首页 > 代码库 > 【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的集成以及值的获取