【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对象返回。