首页 > 代码库 > 【ExtJS】 FormPanel与ComboBox的集成以及值的获取
【ExtJS】 FormPanel与ComboBox的集成以及值的获取
var formPanel = Ext.create("Ext.form.Panel",{
title : ‘formPanel‘,
width : 400,
url : ‘asd.php‘ //默认通过Ajax提交到这个url
layout : ‘anchor‘, //布局占满整个宽度
defaults : {
anchor : ‘100%‘
},
items :[{
xtype : ‘textfield‘, //文本编辑
fieldLabel : ‘FirstName‘,
name : ‘first‘,
allowBlank : ‘true‘
},{
xtype : ‘combo‘, //comboBox
id : ‘cmbId‘,
fieldLabel : ‘cmbName‘,
store : new Ext.data.SimpleStore({
fields : [‘value‘,‘text‘],
data : [
[1, ‘name1‘], [2, ‘name2‘], [3,‘name3‘], ...
]
}),
queryMode : ‘local‘,
displayField : ‘text‘,
valueField : ‘value‘,
renderTo : Ext.getBody()
}],
buttons : [{
text : ‘reset‘,
handler : function(){
this.up(‘form‘).getForm().reset();
}
},{
text : ‘save‘,
handler : function(){
var textValues =this.getValues()[‘first‘]; // 获取编辑框的值,根据‘name’
var cmbValues = Ext.getCmp(‘cmbId‘).getValue(); // 获取comboBox的值,根据‘id’
...
}
}]
});
1、关于获取FormPanel内各个组件的值,this.getValues()获取form中所有表单域当前值得 快捷函数. 和调用this.getForm().getValues()返回的结果是一样的.
2、对于get()、getDom()、getCmp()、getBody()、getDoc()的区别:
get(id/obj):
get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象, Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象 上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。
getDom(id/obj):
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。
getCmp(id):
getCmp方法用来获得一个Ext组件,getCmp方法中只有一个参数,也就是组件的id。
getBody():
得到文档的body节点元素(Element)。
getDoc():
获得与document对应的Ext元素(Element),getDoc方法实质上就是得到当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回。
【ExtJS】 FormPanel与ComboBox的集成以及值的获取