Extjs对tabPanel中的第一个Panel进行布局让里面的面板具有拖拽效果
ExtJS4.1TabPanel动态加载页面并执行脚本
ExtJS4.1TabPanel动态加载页⾯并执⾏脚本知道extjs是很久以前的事情，但是⼀直没有机会⽤到。
不怕⼤家笑话，直到上个星期准备⽤它了，这才开始接触，没想到⼀开始就碰到难题。
TablePanel动态加载页⾯很简单的，官⽅有⽰例，但是我加载的页⾯需要执⾏脚本，为了这个功能，研究了⾜⾜4天。
看来我把extjs想的太简单了，还是需要对它深⼊了解下。
第⼀天，按照官⽅⽰例，可以动态加载页⾯，可是脚本不执⾏，于是查SDK、google，发现scripts需要设置为true，于是设置该属性，整个代码如下tabPanel.add({title: 'dynamic page',closable: true,loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }});刚开始以为加载页⾯的脚本写的有问题，因为查了很多资料，有⼈说要写在<body>⾥⾯，有⼈说只能写在页⾯上，不能⽤src引⽤js⽂件，但⽆论怎么试也不⾏，我的加载页⾯很简单，只要页⾯被加载就出弹窗<script type="text/javascript">alert("addd");</script>后来想，是不是需要在tab被激活的事件⼿⼯load，⽽不是autoLoad，于是再次实验，终于成功了，兴奋！tabPanel.add({title: 'dynamic page',closable: true,loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }listeners: {activate: function(tab){tab.loader.load();}}});本来想着到此为⽌，⼀天时间总算搞定这个tab，但是兴奋之余发现，该做法是有问题的，每次点击tab，都会触发激活事件，去读取后台页⾯⼀次，⽽我想要的效果是，前台加载⼀次之后，切换tab也不要再访问后台。
ExtjsPanel的10种布局
XT标准布局类面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。
ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种： ContainerLayout（容器布局）FitLayout（自适应布局）AccordionLayout（折叠布局）CardLayout（卡片式布局）AnchorLayout（锚点布局）AbsoluteLayout（绝对位置布局）FormLayout（表单布局）ColumnLayout（列布局）TableLayout（表格布局）BorderLayout（边框布局）接下来分别介绍这10种布局类的特点及使用方式。
1 ContainerLayout容器布局yout.ContainerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过 new 关键字直接创建。
如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。
表5-4 yout.ContainerLayout主要配置项目表2 FitLayout自适应布局yout.FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。
注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。
xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。
在后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。
下面是自适应布局的一个简单的示例。
代码5-7：FitLayout（自适应布局）示例<script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';var panel = new Ext.Panel({layout :'fit',title:'yout.FitLayout布局示例',frame:true, //渲染面板height : 150,width : 250,applyTo :'panel',defaults : { //设置默认属性bodyStyle:'background-color:#FFFFFF' //设置面板体的背景色},//面板items配置项默认的xtype类型为panel，该默认值可以通过defaultType配置项进行更改items: [{title : '嵌套面板一',html : '面板一'},{title : '嵌套面板二',html : '面板二'}]})});</script>在代码5-7中共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图 5-11可以看到“嵌套面板一”充满了整个外层面板，而“嵌套面板二”并没有显示出来。
学习ExtJs笔记
学习ExtJs笔记Grid表格1、添加数据的时候，将数据的属性设置为dirty。
因为在使用Ajax提交数据的时候，非dirty的数据不会自动保存到store的modifield属性中。
2、保存数据：（1）store.modifield.slice(start,end);作用：返回一个新数组，取得从start到end的所有元素，但不包括end元素。
如果参数只有一个0，则表示取得全部的数据；（2）each(m,function())(m为一个数组)，该方法主要作用是遍历数组m中的每一条记录，并且每条记录都按照function()方法进行处理。
不可在function方法里面加上循环，否则，将出现多重结果。
（3）listeners监听器：listeners: {"afterEdit": {fn: afterEdit,scope: this} }作用：监听afterEdit。
当单元格编辑完成或者退出编辑状态，自动调用fn方法，作用的范围是当前页面。
（4）当添加数据成功后，新添加的数据有三角行的标识，要除掉标识，可用Record 的commit方法。
3、读取数据（1）从Txt文件中读取数据将读取的数据编码eval(response.responseText),否则将不能正确读取数据。
（2）设置记录的字段的值var initValue = {name:'',gender:'',age:''};var p = new Record(initValue);p.set('name',data_get[i].name);p.set('gender',data_get[i].gender);p.set('age',data_get[i].age);Tree 树1、Tree的加载使用方法render。
Tree.render()方法将tree加载到tree的‘el’中。
winform tablelayoutpanel用法
winform tablelayoutpanel用法Winform TableLayoutPanel用法简介TableLayoutPanel是Winform中的一个容器控件，可以用于布局其他控件，以达到自定义布局的目的。
它可以将控件按照行和列的方式排列，并可以通过合并单元格的方式来创建复杂的布局效果。
基本用法TableLayoutPanel的基本用法如下：1.在Visual Studio的设计界面中拖拽TableLayoutPanel控件到窗体中。
2.设置TableLayoutPanel的行和列的数量和大小。
3.拖拽其他控件到TableLayoutPanel中的指定单元格中。
行和列TableLayoutPanel通过行和列来进行布局，可以通过以下方式进行配置：•在属性窗口中设置RowCount（行数）和ColumnCount（列数）属性来配置行和列的数量。
•设置RowStyles和ColumnStyles属性来配置行和列的大小和样式。
单元格TableLayoutPanel中的每个控件都占据一个或多个单元格，可以通过以下方式进行配置：•在属性窗口中拖拽控件到指定的单元格中，控件将自动占据该单元格。
•设置控件的Dock属性为Fill，使其自动充满整个单元格。
单元格合并TableLayoutPanel支持将多个单元格合并为一个，以创建复杂的布局效果，可以通过以下方式进行配置：•选中TableLayoutPanel上的单元格，通过属性窗口中的MergeRowIndex、MergeColumnIndex和MergeRowCount、MergeColumnCount属性来指定合并单元格的范围。
控件布局TableLayoutPanel可以方便地控制控件的布局，通过设置控件在单元格中的对齐方式和大小模式，可以实现各种布局效果。
可以通过以下方式进行配置：•选中指定的控件，通过属性窗口中的Anchor属性设置控件距离单元格的边界的对齐方式。
js拖拽方法
js拖拽方法一、拖拽方法概述在JavaScript中，拖拽功能是用户与网页交互的一种常见方式。
通过拖拽，用户可以轻松地完成元素的重排、移动、缩放等操作。
本文将介绍JavaScript拖拽方法的分类及具体实现步骤，并给出两个实用的第三方库拖拽实例。
二、JavaScript拖拽方法分类1.原生拖拽原生拖拽是指使用JavaScript原生实现拖拽功能。
它通过监听鼠标事件（mousedown、mousemove、mouseup）来实现元素的拖拽。
2.第三方库拖拽第三方库拖拽是指使用一些成熟的库（如Dragula、Sortable.js等）来实现拖拽功能。
这些库封装了拖拽的细节，使用起来简单便捷，且具有丰富的功能和良好的可扩展性。
三、原生拖拽实现步骤1.获取元素首先，需要获取需要拖拽的元素。
可以使用getElementById、getElementsByClassName等方法获取。
2.添加事件监听器在获取到元素后，为元素添加mousedown、mousemove、mouseup 事件监听器。
3.实现拖拽功能在mousemove事件中，根据鼠标的移动方向和速度，计算元素的新位置，并更新元素样式。
4.释放事件监听器在mouseup事件中，释放mousedown事件监听器。
四、第三方库拖拽实例1.使用Dragula实现拖拽Dragula是一个轻量级的拖拽库，支持原生拖拽和惯性拖拽。
首先，引入Dragula库，然后为需要拖拽的元素添加dragula事件监听器。
具体使用方法可参考Dragula官方文档。
2.使用Sortable.js实现拖拽Sortable.js是一个基于HTML的拖拽库，支持拖拽列表、网格等多种布局。
首先，引入Sortable.js库，然后根据需求配置相关选项。
具体使用方法可参考Sortable.js官方文档。
五、拖拽应用场景拖拽功能广泛应用于网页设计中，如组件拖拽、文件上传、图片排序等。
通过使用拖拽功能，可以提高用户体验，使界面更加灵活。
Extjs中布局的组合使用
Extjs4.1中布局的组合使用Extjs4.1中布局很经典，也很好用，关键是如何组合布局，组合布局，不仅要达到我们想要的界面效果，还要注意因为布局所付出的渲染代价。
下面是我经过反复调试，总结的最常用也很高效的几种组合布局，废话不多说，先看其中一个效果图：因为Extjs布局本身并没有难度，我也没必要在这浪费口舌说些没用的知识点，下面是详细代码，复制粘贴就可以直接运行（注意引入extjs的包）.相信效果会吓你一跳。
<body><script language="javascript">$(document).ready(function(){Ext.onReady(function(){Ext.require([//'Ext.form.*',//'yout.container.Column',//'Ext.tab.Panel''*']);Ext.onReady(function() {Ext.QuickTips.init();var bd = Ext.getBody();/** ================ Simple form =======================*/bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';var simple = Ext.widget('form',{layout: 'form',collapsible: true,id: 'simpleForm',url: 'save-form.php',frame: true,title: 'Simple Form',bodyPadding: '5 5 0',width: 350,fieldDefaults: {msgTarget: 'side',labelWidth: 75},defaultType: 'textfield',items: [{fieldLabel: 'First Name',afterLabelTextTpl: required,name: 'first',allowBlank: false},{fieldLabel: 'Last Name',afterLabelTextTpl: required,name: 'last',allowBlank: false},{fieldLabel: 'Company',name: 'company'}, {fieldLabel: 'Email',afterLabelTextTpl: required,name: 'email',allowBlank: false,vtype:'email'}, {fieldLabel: 'DOB',name: 'dob',xtype: 'datefield'}, {fieldLabel: 'Age',name: 'age',xtype: 'numberfield',minValue: 0,maxValue: 100}, {xtype: 'timefield',fieldLabel: 'Time',name: 'time',minValue: '8:00am',maxValue: '6:00pm'}],buttons: [{text: 'Save',handler: function() {this.up('form').getForm().isValid();}},{text: 'Cancel',handler: function() {this.up('form').getForm().reset();}}]});simple.render(document.body);/** ================ Form 2 ======================= */bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'}); var fsf = Ext.widget({xtype: 'form',id: 'fieldSetForm',collapsible: true,url: 'save-form.php',frame: true,title: 'Simple Form with FieldSets',bodyPadding: '5 5 0',layout: 'anchor',width: 350,fieldDefaults: {msgTarget: 'side',labelWidth: 75},defaults: {anchor: '100%'},items: [{xtype:'fieldset',checkboxToggle:true,title: 'User Information',defaultType: 'textfield',collapsed: true,layout: 'anchor',defaults: {anchor: '100%'},items :[{fieldLabel: 'First Name',afterLabelTextTpl: required,name: 'first',allowBlank:false},{fieldLabel: 'Last Name',afterLabelTextTpl: required,name: 'last'},{fieldLabel: 'Company',name: 'company'}, {fieldLabel: 'Email',afterLabelTextTpl: required,name: 'email',vtype:'email'}]},{xtype:'fieldset',title: 'Phone Number',collapsible: true,defaultType: 'textfield',layout: 'anchor',defaults: {anchor: '100%'},items :[{fieldLabel: 'Home',name: 'home',value: '(888) 555-1212'},{fieldLabel: 'Business',name: 'business'},{fieldLabel: 'Mobile',name: 'mobile'},{fieldLabel: 'Fax',name: 'fax'}]}],buttons: [{text: 'Save'},{text: 'Cancel'}]});fsf.render(document.body);/** ================ Form 3 ======================= */bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'}); var top = Ext.widget({xtype: 'form',id: 'multiColumnForm',collapsible: true,frame: true,title: 'Multi Column, Nested Layouts and Anchoring',bodyPadding: '5 5 0',width: 600,fieldDefaults: {labelAlign: 'top',msgTarget: 'side'},items: [{xtype: 'container',anchor: '100%',layout: 'hbox',items:[{xtype: 'container',flex: 1,layout: 'anchor',items: [{xtype:'textfield',fieldLabel: 'First Name',afterLabelTextTpl: required,allowBlank: false,name: 'first',anchor:'95%',value: 'Don'}, {xtype:'textfield',fieldLabel: 'Company',name: 'company',anchor:'95%'}]},{xtype: 'container',flex: 1,layout: 'anchor',items: [{xtype:'textfield',fieldLabel: 'Last Name',afterLabelTextTpl: required,allowBlank: false,name: 'last',anchor:'100%',value: 'Griffin'},{xtype:'textfield',fieldLabel: 'Email',afterLabelTextTpl: required,allowBlank: false,name: 'email',vtype:'email',anchor:'100%'}]}]}, {xtype: 'htmleditor',name: 'bio',fieldLabel: 'Biography',height: 200,anchor: '100%'}],buttons: [{text: 'Save',handler: function() {this.up('form').getForm().isValid();}},{text: 'Cancel',handler: function() {this.up('form').getForm().reset();}}]});top.render(document.body);/** ================ Form 4 =======================*/bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'}); var tabs = Ext.widget({xtype: 'form',id: 'tabForm',width: 350,border: false,bodyBorder: false,fieldDefaults: {labelWidth: 75,msgTarget: 'side'},items: {xtype:'tabpanel',activeTab: 0,defaults:{bodyPadding: 10,layout: 'anchor'},items:[{title:'Personal Details',defaultType: 'textfield',defaults: {anchor: '100%'},items: [{fieldLabel: 'First Name',name: 'first',afterLabelTextTpl: required,allowBlank: false,value: 'Ed'},{fieldLabel: 'Last Name',afterLabelTextTpl: required,allowBlank: false,name: 'last',value: 'Spencer'},{fieldLabel: 'Company',name: 'company',value: 'Ext JS'}, {fieldLabel: 'Email',afterLabelTextTpl: required,allowBlank: false,name: 'email',vtype:'email'}]},{title: 'Phone Numbers',defaultType: 'textfield',defaults: {anchor: '100%'},items: [{fieldLabel: 'Home',name: 'home',value: '(888) 555-1212'},{fieldLabel: 'Business',name: 'business'},{fieldLabel: 'Mobile',name: 'mobile'},{fieldLabel: 'Fax',name: 'fax'}]}]},buttons: [{text: 'Save',handler: function() {this.up('form').getForm().isValid();}},{text: 'Cancel',handler: function() {this.up('form').getForm().reset();}}]});tabs.render(document.body);/** ================ Form 5 =======================*/bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'}); var tab2 = Ext.widget({title: 'Inner Tabs',xtype: 'form',id: 'innerTabsForm',collapsible: true,bodyPadding: 5,width: 600,fieldDefaults: {labelAlign: 'top',msgTarget: 'side'},defaults: {anchor: '100%'},items: [{xtype: 'container',layout:'hbox',items:[{xtype: 'container',flex: 1,border:false,layout: 'anchor',defaultType: 'textfield',items: [{fieldLabel: 'First Name',afterLabelTextTpl: required,allowBlank: false,name: 'first',anchor:'95%'}, {fieldLabel: 'Company',name: 'company',anchor:'95%'}]},{xtype: 'container',flex: 1,layout: 'anchor',defaultType: 'textfield',items: [{fieldLabel: 'Last Name',afterLabelTextTpl: required,allowBlank: false,name: 'last',anchor:'95%'},{fieldLabel: 'Email',afterLabelTextTpl: required,allowBlank: false,name: 'email',vtype:'email',anchor:'95%'}]}]},{xtype:'tabpanel',plain:true,activeTab: 0,height:235,defaults:{bodyPadding: 10},items:[{title:'Personal Details',defaults: {width: 230},defaultType: 'textfield',items: [{fieldLabel: 'First Name',name: 'first',value: 'Jamie'},{fieldLabel: 'Last Name',name: 'last',value: 'Avins'},{fieldLabel: 'Company',name: 'company',value: 'Ext JS'}, {fieldLabel: 'Email',name: 'email',vtype:'email'}]},{title:'Phone Numbers',defaults: {width: 230},defaultType: 'textfield',items: [{fieldLabel: 'Home',name: 'home',value: '(888) 555-1212'},{fieldLabel: 'Business',name: 'business'},{fieldLabel: 'Mobile',name: 'mobile'},{fieldLabel: 'Fax',name: 'fax'}]},{cls: 'x-plain',title: 'Biography',layout: 'fit',items: {xtype: 'htmleditor',name: 'bio2',fieldLabel: 'Biography'}}]}],buttons: [{text: 'Save',handler: function() {this.up('form').getForm().isValid();。
ExtJS5学习之Grid与Grid之间的数据拖拽
ExtJS5学习之Grid与Grid之间的数据拖拽拖拽是一个提升用户体验的一个特色功能，虽然不是必需的，但如果添加上此功能，必然就立马变得高大上了，有木有。
Grid与Grid之间的数据拖拽是由gridviewdragdrop 插件，官方源码已经内置了该插件，无须自己实现，进行一些简单配置就完事儿了。
下面是示例代码：Js代码Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]); Ext.define('DataObject', { extend: 'Ext.data.Model', fields: ['name', 'column1','column2'] }); Ext.onReady(function(){ var myData = [ { name : "Rec 0", column1 : "0", column2 : "0" }, { name : "Rec 1", column1 : "1", column2 : "1" }, { name : "Rec 2", column1 : "2", column2 : "2" }, { name : "Rec 3", column1 : "3", column2 : "3" }, { name : "Rec 4", column1 : "4", column2 : "4" }, { name : "Rec 5", column1 : "5", column2 : "5" }, { name : "Rec 6", column1 : "6", column2 : "6" }, { name : "Rec 7", column1 : "7", column2 : "7" }, { name : "Rec 8", column1 : "8", column2 : "8" }, { name : "Rec 9", column1 : "9",column2 : "9" } ]; // create the data storevar firstGridStore = Ext.create('Ext.data.Store',{ model: 'DataObject', data:myData }); // Column Model shortcut array var columns = [ {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'}, {text: "column1", width: 70, sortable: true, dataIndex: 'column1'}, {text: "column2", width: 70, sortable: true, dataIndex:'column2'} ]; // declare the source Gridvar firstGrid = Ext.create('Ext.grid.Panel',{ viewConfig: { plugins:{ ptype: 'gridviewdragdrop', dragGroup: 'firstGridDDGroup',dropGroup: 'secondGridDDGroup' }, listeners: { drop: function(node, data, dropRec, dropPosition) { var dropOn = dropRec ? ' ' + dropPosition + ' ' +dropRec.get('name') : ' on empty view';Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') +dropOn); } } }, store : firstGridStore,columns : columns,stripeRows : true, title :'Grid-1', margins : '0 2 0 0' }); var secondGridStore = Ext.create('Ext.data.Store',{ model: 'DataObject' }); var secondGrid = Ext.create('Ext.grid.Panel',{ viewConfig: { plugins:{ ptype: 'gridviewdragdrop', dragGroup: 'secondGridDDGroup',dropGroup: 'firstGridDDGroup' }, listeners: { drop: function(node, data, dropRec, dropPosition) { var dropOn = dropRec ? ' ' + dropPosition + ' ' +dropRec.get('name') : ' on empty view';Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') +dropOn); } } }, store : secondGridStore,columns : columns,stripeRows : true, title :'Grid-2', margins : '0 0 0 3' }); var displayPanel = Ext.create('Ext.Panel',{ width : 650, height : 300, layout : { type: 'hbox', align: 'stretch', padding: 5 }, renderTo : 'panel', defaults : { flex : 1 }, items : [ firstGrid,secondGrid ], dockedItems:{ xtype: 'toolbar', dock:'bottom', items: ['->',{ text: '重置两个Grid',handler:function(){ firstGridStore.load Data(myData);secondGridStore.removeAll(); }}] } }); });示例截图：接下来打算研究下treePanel的节点拖拽。
Extjs对tabPanel中的第一个Panel进行布局让里面的面板具有拖拽效果
items: [ { id:"CurrentDate", title: '当前日期', html: "<%=CurrentDate %>" }, { id:"NewsList", title: '公告栏', html: "" } ] }
contentEl: 'center2', title: '工作提醒', closable: false, html:"<%=TableInfo %>", frame:true, autoScroll: true
61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. // 79. // 80. // 81. // 82. // 83. // 84. // 85. // 86. 87. 88. }); ] } } { }] ]
[javascript] view plaincopy
1. 2. 3.
var tabs= new Ext.TabPanel({ id:'tab', region: 'center', // a center region is ALWAYS required for border layout deferredRender: true, activeTab: 0, plain:true, Frame:true, layoutConfig:{ animate:true }, items: [ /*对 TabPanel 中的第一个 Panel 进行布局 xtype:'portal'面板就具有自动拖拽效果 */ { title:'工作提醒', layout:'border', items: [{ // first tab initially active enableTabScroll:true,
进阶篇(5)-ExtJs中的TabPanel组件详解
ExtJs版国讯教育通用智能OA办公平台
进阶篇(5)-ExtJs中的TabPanel组件详解
讲师：风舞烟
TabPanel组件简介 简单代码示例 使用iframe作为tab的标签页内容 动态添加tabpanel的标签页 为tabpanel标签页添加右键菜单
Html代码： <div> <a href="javascript:void(0)" onclick="parent.frames['mainFrame'].location='http://w '">换成博客园</a> <iframe id="mainFrame" name="mainFrame" src="" frameborder="0" height="500px" width="100%" ></iframe> </div>
js代码: Ext.onReady(function(){ var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), activeTab:0, height:700,//当用viewport布局时,这个height可以省去 frame:true, items:[{ contentEl:"mainFrame", tabTip:"fengjian", title:"加载页面的标签页", closable:true }] }); });
【原创】js实现一个可随意拖拽排序的菜单导航栏
【原创】js实现⼀个可随意拖拽排序的菜单导航栏1.想做这个效果的原因主要是⽤在UC上看新闻发现他们的导航菜单很有趣。
⽆聊的时候在哪划着玩了很久。
所以就⼲脆⾃⼰写⼀个。
原效果如下2.整体效果如下，在已推荐和未添加⾥⾯每个⼩⽅块可以触摸移动位置互换。
未添加和已添加⾥⾯的⼩⽅块位置可以拖放。
3.结构分析。
整体结构⽤红线框标出。
可以分为三个部分。
关注底部拖拽部分。
⼀个div⾥⾯嵌套两个div.定位关系如图。
本次教程之作⼀个拖拽框1.好了，基本情况已经分析清楚先实现页⾯样式。
<div class="wrap"><div class="menu ">财经</div><div class="menu ">时尚</div><div class="menu ">国际</div><div class="menu ">娱乐</div><div class="menu ">军事</div><div class="menu ">搞笑</div><div class="menu ">科技</div><div class="menu ">游戏</div><div class="menu ">体育</div><div class="menu ">美图</div><div class="menu ">推荐</div><div class="menu ">社会</div><div class="menu ">微信</div><div class="menu ">健康</div><div class="menu ">军事</div><div class="clear"></div></div>css<style type="text/css">*{margin: 0;padding: 0;}.clear{clear: both;}.wrap{width: 380px;height: auto;zoom: 1;overflow: hidden;border: 1px solid #8E8E8E;margin-top:100px ;margin-left: 400px;padding-bottom: 20px;position: relative;}.menu{width: 70px;height: 30px;background-color: cornflowerblue;color: #FFFFFF;font-size: 16px;text-align: center;line-height: 30px;float: left;margin-left: 20px;margin-top: 10px;} .active{height: 28px;width: 68px;border: 1px dashed #8E8E8E;float: left;margin-left: 20px;margin-top: 10px;}.onclick{transform: scale(1.2);position: absolute;background-color:cornflowerblue ;line-height: 30px;height: 30px;width: 70px;text-align: center;color: #FFFFFF;}</style>界⾯如下样式完成了现在开始写js。
EXTJSPanel布局
EXTJSPanel布局1. ⾯板控件panel应⽤2. new Ext.Panel({3. title:'⾯板头部（header）',4. tbar : ['顶端⼯具栏(top toolbars)'],5. bbar : ['底端⼯具栏(bottom toolbars)'],6. height:200,7. width:300,8. frame:true,9. applyTo :'panel',10. bodyStyle:'background-color:#FFFFFF',11. html:'<div>⾯板体（body）</div>',12. tools : [13. {id:'toggle'},14. {id:'close'},15. {id:'maximize'}16. ],17. buttons:[18. new Ext.Button({19. text:'⾯板底部（footer）'20. })21. ]22. })23.24.25. ⾯板panel加载远程页⾯26. var panel = new Ext.Panel({27. title:'⾯板加载远程页⾯',28. height:150,//设置⾯板的⾼度29. width:250,//设置⾯板的宽度30. frame:true,//渲染⾯板31. autoScroll : true,//⾃动显⽰滚动条32. collapsible : true,//允许展开和收缩33. applyTo :'panel',34. autoLoad :'page1.html',//⾃动加载⾯板体的默认连接35. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊36. })37.38. ⾯板panel加载本地页⾯39. var panel = new Ext.Panel({40. title:'⾯板加载本地资源',41. height:150,//设置⾯板的⾼度42. width:250,//设置⾯板的宽度43. frame:true,//渲染⾯板44. collapsible : true,//允许展开和收缩45. autoScroll : true,//⾃动显⽰滚动条46. autoHeight : false,//使⽤固定⾼度47. //autoHeight : true,//使⽤⾃动⾼度48. applyTo :'panel',49. contentEl :'localElement',//加载本地资源50. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊51. })52. 本地资源53. <table border=1 id='localElement'>54. <tr><th colspan=2>本地资源---员⼯列表</th></tr>55. <tr>56. <th width = 60>序号</th><th width = 80>姓名</th>57. <tr>58. <tr><td>1</td><td>张三</td></tr>59. <tr><td>2</td><td>李四</td></tr>60. <tr><td>3</td><td>王五</td></tr>61. <tr><td>4</td><td>赵六</td></tr>62. <tr><td>5</td><td>陈七</td></tr>63. <tr><td>6</td><td>杨⼋</td></tr>64. <tr><td>7</td><td>刘九</td></tr>65. </table>66.67.68. 使⽤html配置项定义⾯板panel内容69. var htmlArray = [70. '<table border=1>',71. '<tr><td colspan=2>员⼯列表</td></tr>',72. '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',73. '<tr><td>1</td><td>张三</td></tr>',74. '<tr><td>2</td><td>李四</td></tr>',75. '<tr><td>3</td><td>王五</td></tr>',76. '<tr><td>4</td><td>赵六</td></tr>',77. '<tr><td>5</td><td>陈七</td></tr>',78. '<tr><td>6</td><td>杨⼋</td></tr>',79. '<tr><td>7</td><td>刘九</td></tr>',80. '</table>'81. ];82. var panel = new Ext.Panel({83. title:'使⽤html配置项⾃定义⾯板内容',84. height:150,//设置⾯板的⾼度85. width:250,//设置⾯板的宽度86. frame:true,//渲染⾯板87. collapsible : true,//允许展开和收缩88. autoScroll : true,//⾃动显⽰滚动条89. applyTo :'panel',90. html:htmlArray.join(''),91. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊92. })93.94.95. 使⽤items添加panel内容96. var panel = new Ext.Panel({97. header : true,98. title:'⽇历',99. frame:true,//渲染⾯板100. collapsible : true,//允许展开和收缩101. autoHeight : true,//⾃动⾼度102. width : 189,//固定宽度103. applyTo :'panel',104. items: new Ext.DatePicker()//向⾯板中添加⼀个⽇期组件105. })106.107.108.109. ⾯板panel嵌套的使⽤110.111. var panel = new Ext.Panel({112. header : true,113. title:'使⽤items进⾏⾯板嵌套',114. frame:true,//渲染⾯板115. collapsible : true,//允许展开和收缩116. height : 200,117. width : 250,118. applyTo :'panel',119. defaults : {//设置默认属性120. bodyStyle:'background-color:#FFFFFF',//设置⾯板体的背景⾊121. height : 80,//⼦⾯板⾼度为80122. collapsible : true,//允许展开和收缩123. autoScroll : true//⾃动显⽰滚动条124. },125. items: [126. new Ext.Panel({127. title : '嵌套⾯板⼀',128. contentEl : 'localElement'//加载本地资源129. }),130. new Ext.Panel({131. title : '嵌套⾯板⼆',132. autoLoad : 'page1.html'//加载远程页⾯133. })134. ]135. })136.137. FitLayout布局panel138.139. var panel = new Ext.Panel({140. layout : 'fit',141. title:'yout.FitLayout布局⽰例',142. frame:true,//渲染⾯板143. height : 150,144. width : 250,145. applyTo :'panel',146. defaults : {//设置默认属性147. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊148. },149. //⾯板items配置项默认的xtype类型为panel，150. //该默认值可以通过defaultType配置项进⾏更改151. items: [152. {153. title : '嵌套⾯板⼀',154. html : '⾯板⼀'155. },156. {157. title : '嵌套⾯板⼆',158. html : '⾯板⼆'159. }160. ]161. })162.163.164. layout.Accordion布局panel165. var panel = new Ext.Panel({166. layout : 'accordion',167. layoutConfig : {168. activeOnTop : true,//设置打开的⼦⾯板置顶169. fill : true,//⼦⾯板充满⽗⾯板的剩余空间170. hideCollapseTool: false,//显⽰“展开收缩”按钮171. titleCollapse : true,//允许通过点击⼦⾯板的标题来展开或收缩⾯板172. animate:true//使⽤动画效果173. },174. title:'yout.Accordion布局⽰例',175. frame:true,//渲染⾯板176. height : 150,177. width : 250,178. applyTo :'panel',179. defaults : {//设置默认属性180. bodyStyle:'background-color:#FFFFFF;padding:15px'//设置⾯板体的背景⾊181. },182. items: [183. {184. title : '嵌套⾯板⼀',185. html : '说明⼀'186. },187. {188. title : '嵌套⾯板⼆',189. html : '说明⼆'190. }191. ,192. {193. title : '嵌套⾯板三',194. html : '说明三'195. }196. ]197. })198.199.200. layout.CardLayout布局panel201. var panel = new Ext.Panel({202. layout : 'card',203. activeItem : 0,//设置默认显⽰第⼀个⼦⾯板204. title:'yout.CardLayout布局⽰例',205. frame:true,//渲染⾯板206. height : 150,207. width : 250,208. applyTo :'panel',209. defaults : {//设置默认属性210. bodyStyle:'background-color:#FFFFFF;padding:15px'//设置⾯板体的背景⾊211. },212. items: [213. {214. title : '嵌套⾯板⼀',215. html : '说明⼀',216. id : 'p1'217. },218. {219. title : '嵌套⾯板⼆',220. html : '说明⼆',221. id : 'p2'222. }223. ,224. {225. title : '嵌套⾯板三',226. html : '说明三',227. id : 'p3'228. }229. ],230. buttons:[231. {232. text : '上⼀页',233. handler : changePage234. },235. {236. text : '下⼀页',237. handler : changePage238. }239. ]240. })241. //切换⼦⾯板242. function changePage(btn){243. var index = Number(yout.activeItem.id.substring(1));244. if(btn.text == '上⼀页'){245. index -= 1;246. if(index < 1){247. index = 1;248. }249. }else{250. index += 1;251. if(index > 3){252. index = 3;253. }254. }255. yout.setActiveItem('p'+index);256. }257.258.259. layout.AnchorLayout布局panel260. var panel = new Ext.Panel({261. layout : 'anchor',262. title:'yout.AnchorLayout布局⽰例',263. frame:false,//渲染⾯板264. height : 150,265. width : 300,266. applyTo :'panel',267. defaults : {//设置默认属性268. bodyStyle:'background-color:#FFFFFF;padding:15px'//设置⾯板体的背景⾊269. },270. items: [271. {272. anchor : '50% 50%',//设置⼦⾯板的宽⾼为⽗⾯板的50%273. title : '⼦⾯板'274. }275. ]276. })277. 或者：278. items: [279. {280. anchor : '-10 -10',//设置⼦⾯板的宽⾼偏移⽗⾯板10像素281. title : '⼦⾯板'282. }283. ]284.285. 或者：286. items: [287. {288. anchor : 'r b',//相对于⽗容器的右边和底边的差值进⾏定位289. width : 200,290. height : 100,291. title : '⼦⾯板'292. }293. ]294.295. 或者：296. items: [297. {298. x : '10%',//横坐标为距⽗容器宽度10%的位置299. y : 10,//纵坐标为距⽗容器上边缘10像素的位置300. width : 100,301. height : 50,302. title : '⼦⾯板⼀'303. },304. {305. x : 90,//横坐标为距⽗容器左边缘90像素的位置306. y : 70,//纵坐标为距⽗容器上边缘70像素的位置307. width : 100,308. height : 50,309. title : '⼦⾯板⼆'310. }311. ]312.313. layout.FormLayout布局panel314. var panel = new Ext.Panel({315. title:'yout.FormLayout布局⽰例',316. layout : 'form',317. labelSeparator : '：',//在容器中指定分隔符318. frame:true,//渲染⾯板319. height : 110,320. width : 300,321. applyTo :'panel',322. defaultType: 'textfield',//指定容器⼦元素默认的xtype类型为textfield 323. defaults : {//设置默认属性324. msgTarget: 'side'//指定默认的错误信息提⽰⽅式325. },326. items: [327. {328. fieldLabel:'⽤户名',329. allowBlank : false330. },331. {332. fieldLabel:'密码',333. allowBlank : false334. }335. ]336. })337.338. layout.ColumnLayout布局panel339. var panel = new Ext.Panel({340. title:'yout.ColumnLayout布局⽰例',341. layout : 'column',342. frame:true,//渲染⾯板343. height : 150,344. width : 250,345. applyTo :'panel',346. defaults : {//设置默认属性347. bodyStyle:'background-color:#FFFFFF;',//设置⾯板体的背景⾊348. frame : true349. },350. items: [351. {352. title:'⼦⾯板⼀',353. width:100,//指定列宽为100像素354. height : 100355. },356. {357. title:'⼦⾯板⼆',358. width:100,//指定列宽为100像素359. height : 100360. }361. ]362. })363.364. 或者：365. items: [366. {367. title:'⼦⾯板⼀',368. columnWidth:.3,//指定列宽为容器宽度的30%369. height : 100370. },371. {372. title:'⼦⾯板⼆',373. columnWidth:.7,//指定列宽为容器宽度的70%374. height : 100375. }376. ]377.378. 或者：379. items: [380. {381. title:'⼦⾯板⼀',382. width : 100,//指定列宽为100像素383. height : 100384. },385. {386. title:'⼦⾯板⼆',387. width : 100,388. columnWidth:.3,//指定列宽为容器剩余宽度的30%389. height : 100390. },391. {392. title:'⼦⾯板三',393. columnWidth:.7,//指定列宽为容器剩余宽度的70%394. height : 100395. }396. ]397.398.399. layout.TableLayout布局panel400. var panel = new Ext.Panel({401. title:'yout.TableLayout布局⽰例',402. layout : 'table',403. layoutConfig : {404. columns : 4 //设置表格布局默认列数为4列405. },406. frame:true,//渲染⾯板407. height : 150,408. applyTo :'panel',409. defaults : {//设置默认属性410. bodyStyle:'background-color:#FFFFFF;',//设置⾯板体的背景⾊411. frame : true,412. height : 50413. },414. items: [415. {416. title:'⼦⾯板⼀',417. colspan : 3//设置跨列418. },419. {420. title:'⼦⾯板⼆',421. rowspan : 2,//设置跨⾏422. height : 100423. },424. {title:'⼦⾯板三'},425. {title:'⼦⾯板四'},426. {title:'⼦⾯板五'}427. ]428. })429.430.431. layout.BorderLayout布局panel432. var panel = new Ext.Panel({433. title : 'yout.BorderLayout布局⽰例',434. layout:'border',//表格布局435. height : 250,436. width : 400,437. applyTo : 'panel',438. items: [439. {440. title: 'north Panel',441. html : '上边',442. region: 'north',//指定⼦⾯板所在区域为north443. height: 50444. },445. {446. title: 'South Panel',447. html : '下边',448. region: 'south',//指定⼦⾯板所在区域为south449. height: 50450. },{451. title: 'West Panel',452. html : '左边',453. region:'west',//指定⼦⾯板所在区域为west454. width: 100455. },{456. title: 'east Panel',457. html : '右边',458. region:'east',//指定⼦⾯板所在区域为east459. width: 100460. },{461. title: 'Main Content',462. html : '中间',463. region:'center'//指定⼦⾯板所在区域为center464. }]465. });466.467. Ext.Viewport布局⽰例468. new Ext.Viewport({469. title : 'Ext.Viewport⽰例',470. layout:'border',//表格布局471. items: [472. {473. title: 'north Panel',474. html : '上边',475. region: 'north',//指定⼦⾯板所在区域为north476. height: 100477. },{478. title: 'West Panel',479. html : '左边',480. region:'west',//指定⼦⾯板所在区域为west481. width: 150482. },{483. title: 'Main Content',484. html : '中间',485. region:'center'//指定⼦⾯板所在区域为center486. }]487. });488.489.490.491. Ext.TabPanel 标签页⽰例492. var tabPanel = new Ext.TabPanel({493. height : 150,494. width : 300,495. activeTab : 0,//默认激活第⼀个tab页496. animScroll : true,//使⽤动画滚动效果497. enableTabScroll : true,//tab标签超宽时⾃动出现滚动按钮498. applyTo : 'panel',499. items: [500. {title: 'tab标签页1',html : 'tab标签页1内容'},501. {title: 'tab标签页2',html : 'tab标签页2内容'},502. {title: 'tab标签页3',html : 'tab标签页3内容'},503. {title: 'tab标签页4',html : 'tab标签页4内容'},504. {title: 'tab标签页5',html : 'tab标签页5内容'}505. ]506. });507.508.509. Ext.TabPanel(转换div)⽰例510.511. <mce:script type="text/javascript"><!--512. Ext.onReady(function(){513. Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; 514. var tabPanel = new Ext.TabPanel({515. height : 50,516. width : 300,517. autoTabs : true,//⾃动扫描页⾯中的div然后将其转换为标签页518. deferredRender : false,//不进⾏延时渲染519. activeTab : 0,//默认激活第⼀个tab页520. animScroll : true,//使⽤动画滚动效果521. enableTabScroll : true,//tab标签超宽时⾃动出现滚动按钮522. applyTo : 'panel'523. });524. });525.526. // --></mce:script>527. </HEAD>528. <BODY>529. <table width = 100%>530. <tr><td> <td></tr>531. <tr><td width=100></td><td>532. <div id='panel'>533. <div class='x-tab' title='tab标签页1'>tab标签页1内容</div>534. <div class='x-tab' title='tab标签页2'>tab标签页2内容</div>535. <div class='x-tab' title='tab标签页3'>tab标签页3内容</div>536. <div class='x-tab' title='tab标签页4'>tab标签页4内容</div>537. <div class='x-tab' title='tab标签页5'>tab标签页5内容</div>538. </div>539. <div class='x-tab' title='tab标签页6'>tab标签页6内容</div>540. <td></tr>541. </table>542. </BODY>543. </HTML>544.545.546. Ext.TabPanel⽰例（动态添加tab页）547. var tabPanel = new Ext.TabPanel({548. height : 150,549. width : 300,550. activeTab : 0,//默认激活第⼀个tab页551. animScroll : true,//使⽤动画滚动效果552. enableTabScroll : true,//tab标签超宽时⾃动出现滚动按钮553. applyTo : 'panel',554. resizeTabs : true,555. tabMargin : 50,556. tabWidth : 100,557. items : [558. {title: 'tab标签页1',html : 'tab标签页1内容'}559. ],560. buttons : [561. {562. text : '添加标签页',563. handler : addTabPage564. }565. ]566. });567. function addTabPage(){568. var index = tabPanel.items.length + 1;569. var tabPage = tabPanel.add({//动态添加tab页570. title: 'tab标签页'+index,571. html : 'tab标签页'+index+'内容',572. closable : true//允许关闭573. })574. tabPanel.setActiveTab(tabPage);//设置当前tab页575. }576.577.578. 布局嵌套实现表单横排579.580. var form = new Ext.form.FormPanel({581. title:'通过布局嵌套实现表单横排',582. labelSeparator :'：',//分隔符583. labelWidth : 50,//标签宽度584. bodyStyle:'padding:5 5 5 5',//表单边距585. frame : false,586. height:150,587. width:250,588. applyTo :'form',589. items:[590. {591. xtype : 'panel',592. layout : 'column',//嵌套列布局593. border : false,//不显⽰边框594. defaults : {//应⽤到每⼀个⼦元素上的配置595. border : false,//不显⽰边框596. layout : 'form',//在列布局中嵌套form布局597. columnWidth : .5//列宽598. },599. items : [600. {601. labelSeparator :'：',//分隔符602. items : {603. xtype : 'radio',604. name : 'sex',//名字相同的单选框会作为⼀组605. fieldLabel:'性别',606. boxLabel : '男'607. }608. },609. {610. items : {611. xtype : 'radio',612. name : 'sex',//名字相同的单选框会作为⼀组613. hideLabel:true,//横排后隐藏标签614. boxLabel : '⼥'615. }616. }617. ]618. },619. {620. xtype : 'panel',621. layout : 'column',//嵌套列布局622. border : false,//不显⽰边框623. defaults : {//应⽤到每⼀个⼦元素上的配置624. border : false,//不显⽰边框625. layout : 'form',//在列布局中嵌套form布局626. columnWidth : .5//列宽627. },628. items : [629. {630. labelSeparator :'：',//分隔符631. items : {632. xtype : 'checkbox',633. name : 'swim',634. fieldLabel:'爱好',635. boxLabel : '游泳'636. }637. },638. {639. items : {640. xtype : 'checkbox',641. name : 'walk',642. hideLabel:true,//横排后隐藏标签643. boxLabel : '散步'644. }645. }646. ]647. }648. ]649. })。
ExtJs4 笔记 Ext.tab.Panel 选项卡
width: 600,
height: 150,
plugins:Ext.create('Ext.ux.TabScrollerMenu', {
maxText: 15,
pageSize: 5
}),
items: [{
title: 'tab0',
html: '第一个tab'
}]
});
3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。
另外，每个tab都可以设置是否可关闭，进入tab时的事件，以及tab是否可用，具体情况请看代码：
[html]
?
1
2
3
4
5
6
7
8
9
10
<h1>基本选项卡</h1>
<divclass="content" style="height: 150px">
}, 1000);
效果：
六、选项卡的右键菜单
一般的应用程序都支持在选项卡按钮上面通过右键的方式去关闭多余的选项卡，在ext中也可以做到，实现方法如下：
[html]
?
1
2
<h1>选项卡的右键菜单</h1>
<divclass="content" id="content6"></div>
[Js]
?
1
2
3
4
plain: true, //True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll: true, //选项卡过多时，允许滚动
ExtJs4笔记（9）Ext.Panel面板控件、Ext.window.Window窗口控。。。
ExtJs4笔记（9）Ext.Panel⾯板控件、Ext.window.Window窗⼝控。
本篇讲解三个容器类控件。
⼀、⾯板控件 Ext.Panel⼀个⾯板控件包括⼏个部分，有标题栏、⼯具栏、正⽂、按钮区。
标题栏位于最上⾯，⼯具栏可以在四个位置放置，围绕中间部分正⽂，按钮区位于最⼩⽅。
下⾯介绍⼏个基本配置项：1.title:设置⾯板标题⽂本。
2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的⼯具栏。
3.html，items:前者⽤来设置正⽂部分的html，后者设置正⽂部分的ext控件。
4.buttons:设置按钮区的按钮。
下⾯看看⾯板⽣成代码：[html]<h1>Panel</h1><div id="div1" class="content"></div>[Js]Ext.onReady(function () {var p = Ext.create('Ext.Panel', {title: '⾯板标题',collapsible: true,renderTo: 'div1',width: 400,height: 300,autoScroll: false,bodyBorder: true,buttonAlign: 'right',buttons: [{text: "按钮1",handler: function () {Ext.Msg.alert("提⽰", "第⼀个事件");},id: "bt1"}, {text: "按钮2",id: "bt2"}],floating: true,footerCfg: { tag: 'span', id: 'span1', html: '⾯板底部' },items: [{xtype: "button",text: "按钮"}],tbar: Ext.create('Ext.toolbar.Toolbar', { items: ["⼯具栏"] }),html: "<b>正⽂</b>"});p.setPosition(40, 50);});效果如下：⼆、窗⼝控件 Ext.window.Window窗⼝控件与⾯板控件基本类似，只不过他看起来像⼀个窗⼝，具备最⼤化，最⼩化，打开关闭、拖动等窗⼝操作，下⾯看看窗⼝⽣成代码：下⾯看看⾯板⽣成代码：[html]<h1>窗⼝</h1><div class="content" style="height:300px"><button id="button1">打开窗⼝</button><div id="win1"></div></div>[Js]Ext.onReady(function () {var window1 = Ext.create('Ext.window.Window', {applyTo: 'win1',layout: 'table', //内部元素布局⽅式{absolute accordion anchor border card column fit form table}width: 500,height: 200,closeAction: 'hide', //窗⼝关闭的⽅式：hide/closeplain: true,title: "窗⼝标题",maximizable: true, //是否可以最⼤化minimizable: true, //是否可以最⼩化closable: false, //是否可以关闭modal: true, //是否为模态窗⼝resizable: false, //是否可以改变窗⼝⼤⼩items: [{text: '按钮',xtype: "button"}, {width: 214,minValue: 0,maxValue: 100,value: 50,xtype: "slider"}, {xtype: "button",text: '⼀个菜单',width: "60px",height: "15px",menu: {items: [new Ext.ColorPalette({listeners: {select: function (cp, color) {Ext.Msg.alert('颜⾊选择', '你选择了' + color + '。
extJs 2.0学习笔记(Ext.Panel篇)
extJs 2.0学习笔记(Ext.Panel篇一)2009-01-19 08:51老实不客气的说：没有Panel，就没有extjs的盛名。
那些最常见的UI组件都是继承自它。
暴爽的东西啊。
我就在想，这么好的东西怎么会出现得这么晚呢？在这一篇中，将详细讲一讲Ext.Panel的方方面面。
现在遇到了一些问题：一、显示的问题事实上，这个问题是所有组件的问题，凡是从ponent继承的类都面临这个问题。
例如，我写了一行这样的代码，但是没有任何结果：var panel=new Ext.Panel({width:300,height:300,title:'标题栏'});这是什么原因呢？if(this.applyTo){this.applyToMarkup(this.applyTo);delete this.applyTo;}else if(this.renderTo){this.render(this.renderTo);delete this.renderTo;}这几行代码是写在ponent的构造函数中的。
它标示如果applyTo、renderTo有值，就会在对象创建的时候直接呈现，如果这两值都没有，那就只能手工调用render函数了。
然而这有一个问题，applyTo与renderTo倒底有什么区别，它们取值类型可以是哪些呢？看代码。
applyTo的情况依赖于this.applyToMarkup来实现呈现。
找到它的代码：applyToMarkup : function(el){this.allowDomMove = false;this.el = Ext.get(el);this.render(this.el.dom.parentNode);}而renderTo的情况是直接依赖于this.render(this.renderTo)的。
这两者的差别很明显了，但是，这个问题到目前还不能说清楚，我发现，Ext.Panel最后生成的代码如下：<div id="panel2" class="x-panel" style="width: 300px;"><div id="ext-gen14" class="x-panel-header x-unselectable"style="-moz-user-select: none; cursor: move;"><span id="ext-gen18" class="x-panel-header-text">这是标题栏</span> </div><div id="ext-gen15" class="x-panel-bwrap"><div id="ext-gen16" class="x-panel-body" style="width: 298px; height: 273px;">这是面板的内容！！！</div></div></div>由上代码可知，panel的代码总是外面一个容器：x-panel，然后里面几个，这儿是：x-panel-header、x-panel-bwrap。
extjs中的Panel组件
extjs中的Panel组件今天介绍extjs中的Panel组件。
//html代码<div id="container"></div>//js代码var p = new Ext.Panel({title: 'My Panel',//标题collapsible:true,//右上角上的那个收缩按钮，设为false则不显示 renderTo: 'container',//这个panel显示在html中id为container 的层中width:400,height:200,html: "<p>我是内容，我包含的html可以被执行！</p>"//panel主体中的内容，可以执行html代码});因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。
//配置参数(只列举部分常用参数)1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right8.collapsible：设为true，显示右上角的收缩按钮，默认为false9.draggable:true则可拖动，但需要你提供操作过程，默认为false10.html:主体的内容11.id：id值，通过id可以找到这个组件，建议一般加上这个id值12.width：宽度13.height：高度13.title:标题14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.15.applyTo：（id）呈现在哪个html元素里面16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现17.renderTo：（id）呈现在哪个html元素里面//关于这三个参数的区别(个人认为：applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)：英文如下（本人英语poor，不敢乱翻译）：contentEl - This config option is used to take existing content and placeit in the body of a new panel. It is not going to be the actual panel itself. (It will actually copy the innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel. applyTo - This config option allows you to use pre-defined markup to create an entire Panel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements must be in the correct order/hierarchy. Any components which are not found and need to be created will be autogenerated. renderTo - This config option allows you to render a Panel as its created. This would be the same as saying myPanel.render(ELEMENT_TO_RENDER_TO); 哪位大人帮忙翻译下...考虑到入门，方法事件会在以后的文章中以实例穿插。
extjstablepanel高度自适应有关问题
于是被迫给tabpanel指定了高度,为了达到自适应的效果用了
document.body.clientWidth
document.body.clientHeight
代码如下:
Ext.onReady(function() { Ext.BLANK_IMAGE_URL = 'script/extjs/resources/images/default/s.gif'; Ext.QuickTips.init();
网络错误503请刷新页面重试持续报错请尝试更换浏览器或网络环境
extjstablepanel高 度 自 适 应 有 关 问 题
extjs tablepanel 高度自适应问题
项目中为了给客户好点的功能切换体验,想到了用extjs的el
在页面中用了tabpanel后,高度新打开的tab页的iframe 的高度总是出现无法填满页面的情况
scrollerMenu = new Ext.ux.TabScrollerMenu({ maxText : 15, pageSize : 5 });
JavaScript实现拖拽效果组件功能（兼容移动端）
JavaScript实现拖拽效果组件功能（兼容移动端）页⾯元素拖拽是⼀种⾮常实⽤的前端效果，基于元素拖拽可以实现很多不同的功能，增加客户端许多操作的便捷性，⼤⼤提⾼⽤户体验。
⽇常⽣活中⼤家多多少少都见过这种效果，所以就不废话了，直接开⼲吧。
预期⽬标实现⼀个 Class 类，通过该 Class，可以将任意 DOM 元素（⽐如 div）⼀键变为可拖拽状态，也可以恢复成原来的状态，例如这样：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1 {height: 50px;width: 50px;background-color: cadetblue;}#box2 {height: 50px;width: 50px;background-color: blue;}#box3 {height: 50px;width: 50px;background-color: red;}</style></head><body><div id="box1">1</div><a id="box2">2</a><div id="box3">3</div></body><script type="module">// 我们要完成的⽬标 Classimport DragElement from './DragElement.js'// 使 3 个元素可拖拽let box1 = new DragElement(document.querySelector("#box1"))let box2 = new DragElement(document.querySelector("#box2"))let box3 = new DragElement(document.querySelector("#box3"))// box2 解除拖拽效果，恢复为原来的样⼦// box2.dragRelease()</script></html>原本的样⼦随意拖放⼀、算法思路1.1 拖拽的⾏为描述我们先思考如何描述拖拽这⼀⾏为。
ExtJS中九种布局方式
１、布局概述容器中可以放置各种各样的元素，这些元素在容器怎么排放，是从左到右，还是从上到下，这些是容器自身所不知道的。
容器中的子元素如何排放，在Ext 中由布局来处理。
所谓布局就是指容器组件中子元素的分布、排列组合方式。
Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。
Ext提供了一套功能强大的布局系统，通过这些布局的应用，可以满足应用程序中各种复杂的用户界面布局处理，下面我们将对ExtJS中的布局作介绍。
Ext 中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可。
布局主要应用于容器组件，在Container类中，提供了一个layout配置选项，该项可以是一个预定义布局名称（字符串），也可以是一个布局对象。
比如下面是两种使用布局的方式：1.new Ext.Panel({2. renderTo:"test",3.width:400,4.height:100,5. layout:new yout.ColumnLayout(),6.items:[{columnWidth:.5,title:"面板1"},7.{columnWidth:.5,title:"面板2"}]8.});9.10.new Ext.Panel({11. renderTo:"test",12.width:400,13.height:100,14. layout:"column",15.items:[{columnWidth:.5,title:"面板1"},16.{columnWidth:.5,title:"面板2"}]17.});18.ExtJS的布局基类为yout.ContainerLayout，其它布局都是继承该类。
extjs试题
extjs试题一、选择题1.使用extjs开发应用程序时必须导入哪些文件？（a、b、c）a．ext-base.jsb．ext-all.cssc．ext-all.jsd．ext-lang-zh_cn.js 2.extjs类库由以下哪些部分组成。
（a、b、c、d）a．底层apib、 UI和Ajax通信类c．实用工具utilsd、控件（小部件）3．extjs中的组件定义是由以下哪个类决定的。
（a）4.extjs中的组件可以大致分为几个类别。
（a、b、c、d）a．基本组件b、工具栏组件c．数据通信组件d、表单和元素组件5．以下属于基本组件有哪些？（）a、钮扣b．colorpalettec．windowd．timefield6.以下创建组件的方法是正确的。
（a、c）a．使用new关键字b．layoutc．xtyped、反对d．items7.创建extjs组件时，如果未指定组件类型，默认组件类型为：（d） 8．在extjs中panel组件默认就具有的配置属性有哪些？（）a、 loaderb.deferredrenderc.autoloadd.buttons9．extjs给对象添加事件的方法可以为：（a、c）a、 addlistenerb.onclickc.ond．delay10.我们知道所有组件都包含beforedestroy事件，其触发方式如下：（c）a．渲染的时候b．数据加载的时候c．销毁的时候d．关闭的时候11．extjs中用于支持事件的基类为：（d）c、容器d．observable12.以下选项属于extjs容器组件（从容器继承）：（B，c）a．fieldsetb．viewportc．toolbard．tabpanel13．以下组件有哪些可以放在工具栏上面？（）a．textitemb．spacerc．filld．separator14．15．e、 pagingtoolbarf.按钮指定tabpanel中的某个panel为当前活动panel的配置参数为：（）b、 closablec.activetabd．enabletabscrolla、树脂extjs控件不需要指定渲染到某个节点的控件为：（a、b）a、 windowb.viewportc.tabpaneld.buttons16．在同一个项目应用开发过程中，一个页面中控件只能唯一的是。