Extjs笔记.docx
《Extjs笔记.docx》由会员分享，可在线阅读，更多相关《Extjs笔记.docx（25页珍藏版）》请在冰豆网上搜索。
Extjs笔记
Extjs弹框大全：
Ext.Msg.show（{title:
'删除',msg:
"程序异常，请联系开发人员！
",buttons:
Ext.Msg.OK,icon:
Ext.Msg.ERROR}）;
Ext.Msg.show（{title:
'删除成员',msg:
'请选择要删除的成员！
',buttons:
Ext.Msg.OK,icon:
Ext.Msg.WARNING}）;
Ext.Msg.show（{title:
'添加成员',msg:
'添加成员失败！
错误信息：
'+response,buttons:
Ext.Msg.OK,icon:
Ext.Msg.ERROR}）;
Ext.MessageBox.alert（"错误",msg）;
Ext.Msg.alert（'Status','Changessavedsuccessfully.'）;
Ext.Msg.confirm（'提示','确定要删除该附件吗?
',function（btn）{}）;//注意，该语在Extjs4.2API里并没有出现，但事实上却完全可用，只能说Extjs这个控件集的稀烂罢了，莫多深究。
修改treeview节点值
vartreeView=Ext.getCmp（"TreePanel1"）;
varselModel=treeView.getSelectionModel（）;
vartn=selModel.getSelectedNode（）;
tn.setText（Ext.getCmp（"GroupName"）.getValue（））;
tn.attributes.order=Ext.getCmp（"GroupSeq"）.getValue（）;
tn.attributes.owner_id=Ext.getCmp（"GroupType"）.getValue（）=="0"?
"0":
Ext.getCmp（"UserID"）.getValue（）;
为treeview添加节点
vartreeView=Ext.getCmp（"TreePanel1"）;
vartn=newExt.tree.TreeNode（{id:
response.toString（）,text:
Ext.getCmp（"GroupName"）.getValue（）,order:
Ext.getCmp（"GroupSeq"）.getValue（）,
owner_id:
Ext.getCmp（"GroupType"）.getValue（）=="0"?
"0":
Ext.getCmp（"UserID"）.getValue（）,editable:
1,iconCls:
"icon-group"
}）;
treeView.getRootNode（）.appendChild（tn）;
获取指定元素：
Html:
PanelID="Panel8"runat="server"BodyBorder="false">
FormLayoutID="FormLayout4"runat="server"LabelWidth="80">
AnchorHorizontal="98%">
TextFieldID="txtReadUser"ReadOnly="true"runat="server"FieldLabel="必须查看人员">
TextField>
Anchor>
FormLayout>
Panel>
Js:
form1.txtReadUser.value="";
Ext.getCmp（"TabPanel1"）.getActiveTab（）.id
//获取树控件
vartreeView=Ext.getCmp（"TreePanel1"）;
if（!
treeView）
return;
//获取树控件当前选中的节点
varselModel=treeView.getSelectionModel（）;
varnode=selModel.getSelectedNode（）;
if（!
node）{
Ext.Msg.show（{title:
'删?
除y',msg:
'请?
选?
择?
要癮删?
除y的?
组哩?
？
?
',buttos:
Ext.Msg.OK,icon:
Ext.Msg.WARNING}）;
return;
}
//获?
取?
兄?
弟台?
节ú点?
varactiveNode=node.nextSibling;
if（!
activeNode）{
activeNode=node.previousSibling;
}
//移?
除y本?
节ú点?
node.parentNode.removeChild（node）;
//选?
中D兄?
弟台?
节ú点?
if（activeNode!
=undefined）{
activeNode.select（）;
activeNode.fireEvent（'click',activeNode）;
}
GridPanel1.selModel.getSelections（）//获取所有选中的行。
1.Ext.container.Viewport
用该元素布局将默认充满父容器，并且默认填入body中，所以该元素暂时一般用来给页面整体进行布局时使用。
示例：
Ext.create（'Ext.container.Viewport',{
layout:
'border',
items:
[{
region:
'north',
html:
'PageTitle',
border:
false,
margins:
'0050'
},{
region:
'west',
collapsible:
true,
title:
'Navigation',
width:
150
//coulduseaTreePanelorAccordionLayoutfornavigationalitems
},{
region:
'south',
title:
'SouthPanel',
collapsible:
true,
html:
'Informationgoeshere',
split:
true,
height:
100,
minHeight:
100
},{
region:
'east',
title:
'EastPanel',
collapsible:
true,
split:
true,
width:
150
},{
region:
'center',
xtype:
'tabpanel',//TabPanelitselfhasnotitle
activeTab:
0,//Firsttabactivebydefault
items:
{
title:
'DefaultTab',
html:
'Thefirsttab\'scontent.Othersmaybeaddeddynamically'
}
}]
}）;
2.Ext.Panel直接布局：
其实，Ext.container.Viewport的底层也是用Ext.Panel来写的，只是对这个写法的进一步封装，原始的不一定都好，比如在body里，对整体布局时，因为页面的长宽不固定，可是这个写法中长宽都是要写死的，问题就来了。
示例：
Ext.create（'Ext.Panel',{
title:
'容器面板',
renderTo:
window.document.body,//'div4',
width:
1210,
height:
600,
layout:
'border',
defaults:
{
split:
true,//是否有分割线
collapsible:
true,//是否可以折叠
bodyStyle:
'padding:
15px'
},
items:
[{
region:
'north',//子元素的方位：
north、west、east、center、south
title:
'北',
xtype:
"panel",
html:
"子元素1",
height:
70
},{
region:
'west',
title:
'西',
xtype:
"panel",
html:
"子元素2",
width:
100
},{
region:
'east',
title:
'东',
xtype:
"panel",
html:
"子元素2",
width:
100
},{
region:
'center',
title:
'主体',
xtype:
"panel",
html:
"子元素3"
},{
region:
'south',
title:
'南',
xtype:
"panel",
html:
"子元素4",
height:
70
}]
}）;
3.grid的行选中问题
本节主要学习ExtJS4.2Grid多选行知识，示例图片：
在线演示 / 示例代码
主要内容如下：
1.可以点击行选中记录与只能点击多选框选中记录
2.选中Grid中数据加载到Form
3.获取Grid中多行数据，生成JSON格式
1.可以点击行来选中记录，此时多选Grid只需要配置selType:
'checkboxmodel'，此时有一个缺陷，当你通过多选框勾选多条记录时，如果不小心点击某行，则当前点击行被选中，其它选中的记录行都被取消选择了。
2.只能点击多选框选中记录，此时多选Grid需要配置selModel:
newExt.selection.CheckboxModel（{checkOnly:
true}），将checkOnly设为true，此时点击行记录时该行不会被选中，只能通过点击每行左边的多选框来选中行。
4.关于renderTo属性
该属性指向的是元素的id或一个DOM元素，目前只有这两个测通了，而且最好是id,如下。
Ext.create（'Ext.container.Viewport',{
id:
'eWindowSon',
layout:
'border',
renderTo:
Ext.getBody（）,
items:
[
{
id:
'eY1',
xtype:
'panel',
layout:
'border',
//renderTo:
Ext.getDom（'eWindowSon'）,
width:
kBodyWidth,
height:
30,
margin:
'0000',
//title:
'hougggg',
html:
'ddddddddddddddddddddd'
},{
id:
'eY2',
xtype:
'panel',
layout:
'border',
//renderTo:
Ext.getDom（'eWindowSon'）,
width:
kBodyWidth,
height:
600,
margin:
'30000'
//title:
'hou'
//html:
'ddddddddddddddddddddd'
}
]
}）;
[#5]Ext.onReady
Ext.onReady（fn,scope,options）
AddsafunctiontobecalledwhentheDOMisready,andallrequiredclasseshavebeenloaded.
IftheDOMisreadyandallclassesareloaded,thepassedfunctionisexecutedimmediately.
我们知道，只有在Ext框架全部加载完后才能在客户端的代码中使用Ext，而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后，所要执行的函数。
调用onReady方法时可以带三个参数，
第一个参数是必须的，表示要执行的函数或匿名函数，
第二参数表示函数的作用域，
第三个参数表示函数执行的一些其它特性，比如延迟多少毫秒执行等，大多数情况下只需要第一个参数即可。
比如示例代码会在页面加载后执行函数a，弹出"Everythingisready."的提示信息。
functiona（）{
alert（"Everythingisready."）;
}
Ext.onReady（a）;
作用域示例：
Ext.color={
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:
[{
xtype:
'button',
text:
'保存',
style:
{
margin:
'0px100px0px0px'
}
///renderTo:
Ext.getBody（）
//handler:
function（）{
//alert（'Youclickedthebutton!
'）;
//}
},{
xtype:
'button',
text:
'添加设备'
}]
[#7]Ext.form.Combox赋值
版本：
此法更多地是针对Ext2.3的，因为这个版本不像Ext4.2那样有比较详细的文档。
注意：
下边两个点需要注意，实践中发现有时绑值总是绑不进去，或者绑进去了，但是选择一项后其他项就消失了从而导致没法选择，这个现象只要按下边的写法写就行了，注意的是store需要定义在combox的定义中，或许还有triggerAction:
'all',的功劳。
varcon=newExt.form.ComboBox（{
fieldLabel:
'月份',
name:
'combo',
anchor:
'100%',
emptyText:
'请选择',
mode:
'local',
store:
newExt.data.SimpleStore（{
fields:
['value','text'],
data:
[['V1','1月'],
['V2','2月'],
['V3','3月'],
['V4','4月'],
['V5','5月'],
['V6','6月'],
['V7','7月'],
['V8','8月']]
}）,
editable:
false,
triggerAction:
'all',
valueField:
'value',
displayField:
'text'
}）;
[#8]Extjs取得某个控件
在开发的很多时候,在调用另一个弹出页面或修改完一个内容后,需及时地反应出来,就这需要在修改后及时的给原有的框框赋值...
实际操作也是很简单,如:
Ext.getCmp（'listname'）.setValue（updateitemname）;
通过ID取得某个控件：
1.alertProductManagerWin.queryById（id）.setValue（value），
其中alertProductManagerWin为定义的panel
2.Ext.getCmp（id）.setValue（value）;
通过名字取得某个控件
1.panelName.getForm（）.findField（name）.setValue（value）;
获取form里面的field的三种方法
1）Ext.getCmp（'id'）;
2）FormPanel.getForm（）.findField（'id/name'）;
3）Ext.get（'id/name'）;//前提是FormPanel在界面上显示出来了
获得某个panel下的某个id的控件
panel.down（'#id'）
[#9]Panel.items的操作
下边的iCenterMain是一个Panel的id
varkCenterMainObj=Ext.getCmp（"iCenterMain"）;
varkJsonDom=cFrame.mJsonDomDeviceEdit（）;
//kCenterMainObj.items=kJsonDom;//此路不通
kCenterMainObj.removeAll（）;//移除Panel下所有的item
kCenterMainObj.add（kJsonDom）;//向Panel中添加一个items值对象（一个json数组对象）
其中，kJsonDom=一个json对象，如下
kJsonDom=[
{
xtype:
'textfield',
fieldLabel:
'名称',
labelAlign:
'right',
labelPad:
5,
labelSeparator:
'',
labelWidth:
50,
height:
22,
width:
500,
style:
{
//font:
'blod',
margin:
'10px0px0px10px'
//button_fontWeight:
'bold',
//button_color:
"red"
}
},
{
xtype:
'textareafield',
fieldLabel:
'设备简述',
labelAlign:
'right',
labelPad:
5,
labelSeparator:
'',
labelWidth:
50,
height:
100,
width:
500,
style:
{
//font:
'blod',
margin:
'10px0px0px10px'
//button_fontWeight:
'bold',
//button_color:
"red"
}
}
];
[#10]文本控件的定义
{
xtype:
'textfield',
fieldLabel:
'名称',
labelAlign:
'right',
labelPad:
5,
labelSeparator:
'',
labelWidth:
50,
height:
22,
width:
500,
style:
{
//font:
'blod',
margin:
'10px0px0px10px'
//button_fontWeight:
'bold',
//button_color:
"red"
}
}，
{
xtype:
'textareafield',
fieldLabel:
'设备简述',
labelAlign:
'right',
labelPad:
5,
labelSeparator:
'',
labelWidth:
50,
height:
100,
width:
500,
style:
{
//font:
'blod',
margin:
'10px0px0px10px'
//button_fontWeight:
'bold',
//button_color:
"red"
}
}
[#10]Tree的数据中的属性解释
#id:
#text:
#children:
一个完整的标准json数组对象
#leaf:
true时不会显示那个展开符号
result=Ext.create（'Ext.data.TreeStore',{
root:
{
expanded:
true//,
//children:
[]
},
proxy:
{
type:
'ajax',
url:
'../../../api/ConferenceMain/GetRoomsForTree',
reader:
{
type:
'json'
}
}
}）;
如此，后台只需返回一个json对象或json字串即可。
[#11]GridPanel与其bbar的数据加载的同步
注：
iCenterMain是gridpanel所在的区域panel的ID,kJsonDom是一个完整的gridpanel控件的json对象。
图中，如果我们没有红框中的代码，而只有上边的那四句的话只会加载出一个gridpanel控件而没有数据，bbar上也是空的，如下：
而加上任意一个红框中的代码就可以实现让gridpanel控件与其bbar同时出现数据了（其中如果是停在了中间某页时要刷新数据的话最好是用后者，即调用bbar上的刷新按钮的方法，因为只有这样才可以明确地确保页码仍停留在当前刷新的这一页上而不是回到了第一页），但是要注意的是，在kJsonDom中定义时，一定要让gridpanel控件与其bbar使用同一个store，否则就会出现只加载其中一个控件的数据的现象，kJsonDom中定义代码如下：
注意上图中的这样一个语句：
varkStore=cFrame.mDeviceGridPanelStore（pRoomID）;
上图中定义时gridpanel控件与其bbar的store属性均指向到这个kStore，只有这样才可以保证两者加载数据的同步性。
[#12]GridPanel行选中事件
目标是当下边的checkbox选中时触发
代码如下：
functionmDeviceGridSelectChanging（pThis,selected,eOpts）{
///
///设备列表gridpanel中的行的选择项改变事件
///
///Ext.
升级会员 