Extjs笔记Word格式文档下载.docx

1、GroupType）.getValue（） = 0 ? : Ext.getCmp（UserID为treeview添加节点 var tn = new Ext.tree.TreeNode（ id: response.toString（）, text:）.getValue（）, order:）.getValue（）, owner_id:）.getValue（）, editable: 1, iconCls:icon-group ）; treeView.getRootNode（）.appendChild（tn）;获取指定元素：Html: FormLayout ID=FormLayout4 LabelWi

2、dth=80Anchor Horizontal=98%TextField ID=txtReadUser ReadOnly=true FieldLabel=必须查看人员/ext:TextFieldAnchorFormLayout/BodyPanelJs:form1.txtReadUser.value = ;Ext.getCmp（TabPanel1）.getActiveTab（）.id/获取树控件 var treeView = Ext.getCmp（ if （!treeView） return;/获取树控件当前选中的节点 var selModel = treeView.getSelectionMo

3、del（）; var node = selModel.getSelectedNode（）;if （!node） Ext.Msg.show（ title:删?除y请?选?择?要癮删?除y的?组哩?？?, buttos: /获?取?兄?弟台?节点? var activeNode = node.nextSibling;activeNode） activeNode = node.previousSibling; /移?除y本? node.parentNode.removeChild（node）; /选?中D兄? if （activeNode != undefined） activeNode.selec

4、t（）; activeNode.fireEvent（click, activeNode）; GridPanel1.selModel.getSelections（）/获取所有选中的行。1.Ext.container.Viewport用该元素布局将默认充满父容器，并且默认填入body中，所以该元素暂时一般用来给页面整体进行布局时使用。示例：Ext.create（Ext.container.Viewport, layout:border, items: region:north html:h1 class=x-panel-headerPage Title border: false, margins

5、:0 0 5 0 , west collapsible: true, title:Navigation width: 150 / could use a TreePanel or AccordionLayout for navigational itemssouthSouth PanelInformation goes here split: height: 100, minHeight: 100eastEast Panelcenter xtype:tabpanel, / TabPanel itself has no title activeTab: 0, / First tab active

6、 by default Default TabThe first tabs content. Others may be added dynamically 2.Ext.Panel直接布局：其实，Ext.container.Viewport的底层也是用Ext.Panel来写的，只是对这个写法的进一步封装，原始的不一定都好，比如在body里，对整体布局时，因为页面的长宽不固定，可是这个写法中长宽都是要写死的，问题就来了。Ext.Panel容器面板 renderTo: window.document.body, /div4 1210, 600, defaults: true, /是否有分割线 tr

7、ue, /是否可以折叠 bodyStyle:padding:15px , /子元素的方位：north、west、east、center、south北panel子元素1 70西子元素2东主体子元素3南子元素43.grid的行选中问题本节主要学习ExtJS4.2 Grid多选行知识，示例图片：在线演示/示例代码主要内容如下：1. 可以点击行选中记录与只能点击多选框选中记录2. 选中Grid中数据加载到Form3. 获取Grid中多行数据，生成JSON格式1.可以点击行来选中记录，此时多选Grid只需要配置selType:checkboxmodel，此时有一个缺陷，当你通过多选框勾选多条记录时，如果

8、不小心点击某行，则当前点击行被选中，其它选中的记录行都被取消选择了。2.只能点击多选框选中记录，此时多选Grid需要配置selModel: new Ext.selection.CheckboxModel（checkOnly:true），将checkOnly设为true，此时点击行记录时该 行不会被选中，只能通过点击每行左边的多选框来选中行。4. 关于renderTo属性该属性指向的是元素的id或一个DOM元素，目前只有这两个测通了，而且最好是id,如下。 id:eWindowSon Ext.getBody（）, eY1panel /renderTo: Ext.getDom（）, kBodyWi

9、dth, 30, margin:0 0 0 0 /title:houggggdddddddddddddddddddddeY230 0 0 0hou /html: #5 Ext.onReadyExt.onReady（ fn, scope, options ）Adds a function to be called when the DOM is ready, and all required classes have been loaded.If the DOM is ready and all classes are loaded, the passed function is execute

10、d immediately.我们知道，只有在Ext框架全部加载完后才能在客户端的代码中使用Ext，而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后，所要执行的函数。 调用onReady方法时可以带三个参数，第一个参数是必须的，表示要执行的函数或匿名函数，第二参数表示函数的作用域，第三个参数表示函数执行的一些其它特性，比如延迟多少毫秒执行等，大多数情况下只需要第一个参数即可。比如示例代码会在页面加载后执行函数a，弹出Everything is ready.的提示信息。function a（） alert（ Ext.onReady（a）;作用域示例：Ext.color

11、= init: function （） alert（init ;Ext.onReady（Ext.color.init, Ext.color）;关于第三个参数：可以在一个页面中多次调用onReady方法，则将会把这些方法放到事件队列中，依次执行;onReady的第三个参数是事件执行的一些特殊属性描述，可以是简单的true或false，也可以是一个对象，对象中可以包含delay、single、buffer等属性，比如在上面的代码中添加下面的代码：Ext.onReady（function（）alert（2）,this,delay:5000）;#6给工具条上的按钮加样式tbar:button text

12、:保存 style: 0px 100px 0px 0px /renderTo: Ext.getBody（） / handler: function（） / alert（You clicked the button! / 添加设备#7Ext.form.Combox赋值版本：此法更多地是针对Ext2.3的，因为这个版本不像Ext4.2那样有比较详细的文档。注意：下边两个点需要注意，实践中发现有时绑值总是绑不进去，或者绑进去了，但是选择一项后其他项就消失了从而导致没法选择，这个现象只要按下边的写法写就行了，注意的是store需要定义在combox的定义中， 或许还有triggerAction:all

13、,的功劳。 var con = new Ext.form.ComboBox（ fieldLabel:月 份 name:combo anchor:100% emptyText:请选择 mode:local store: new Ext.data.SimpleStore（ fields: valuetext, data: V11月V22月V33月V44月V55月V66月V77月V88月 ）, editable: triggerAction: valueField: displayField:#8Extjs取得某个控件 在开发的很多时候,在调用另一个弹出页面或修改完一个内容后,需及时地反应出来,就这

14、需要在修改后及时的给原有的框框赋值. 实际操作也是很简单,如:Ext.getCmp（listname）.setValue（updateitemname）;通过ID取得某个控件：1.alertProductManagerWin.queryById（id）.setValue（value），其中alertProductManagerWin为定义的panel2.Ext.getCmp（id）.setValue（value）;通过名字取得某个控件1.panelName.getForm（）.findField（name）.setValue（value）;获取form里面的field的三种方法 1）Ext.g

15、etCmp（id2）FormPanel.getForm（）.findField（id/name3）Ext.get（/前提是FormPanel在界面上显示出来了获得某个panel下的某个id的控件panel.down（#id）#9Panel.items的操作下边的iCenterMain是一个Panel的idvar kCenterMainObj = Ext.getCmp（iCenterMainvar kJsonDom = cFrame.mJsonDomDeviceEdit（）;/kCenterMainObj.items = kJsonDom;/此路不通kCenterMainObj.removeAl

16、l（）;/移除Panel下所有的itemkCenterMainObj.add（kJsonDom）;/向Panel中添加一个items值对象（一个json数组对象）其中，kJsonDom =一个json对象，如下kJsonDom = textfield名称 labelAlign:right labelPad: 5, labelSeparator: labelWidth: 50, 22, 500, /font:blod10px 0px 0px 10px /button_fontWeight:bold /button_color:redtextareafield设备简述 ;#10文本控件的定义xty

17、pe:，#10Tree的数据中的属性解释#id:#text:#children:一个完整的标准json数组对象#leaf:true时不会显示那个展开符号 result = Ext.create（Ext.data.TreeStore root: expanded: true/, /children: proxy: type:ajax url:./././api/ConferenceMain/GetRoomsForTree reader:json如此，后台只需返回一个json对象或json字串即可。#11GridPanel 与其bbar的数据加载的同步注：iCenterMain是gridpanel

18、所在的区域panel的ID,kJsonDom是一个完整的gridpanel控件的json对象。图中，如果我们没有红框中的代码，而只有上边的那四句的话只会加载出一个gridpanel控件而没有数据，bbar上也是空的，如下：而加上任意一个红框中的代码就可以实现让gridpanel控件与其bbar同时出现数据了（其中如果是停在了中间某页时要刷新数据的话最好是用后者，即调用bbar上的刷新按钮的方法，因为只有这样才可以明确地确保页码仍停留在当前刷新的这一页上而不是回到了第一页），但是要注意的是，在kJsonDom中定义时，一定要让gridpanel控件与其bbar使用同一个store，否则就会出现只

19、加载其中一个控件的数据的现象，kJsonDom中定义代码如下：注意上图中的这样一个语句：var kStore = cFrame.mDeviceGridPanelStore（pRoomID）;上图中定义时gridpanel控件与其bbar的store属性均指向到这个kStore ，只有这样才可以保证两者加载数据的同步性。#12GridPanel行选中事件目标是当下边的checkbox选中时触发代码如下： function mDeviceGridSelectChanging（pThis, selected, eOpts） / / 设备列表gridpanel中的行的选择项改变事件/summaryparam name=pThis Ext.