下拉选择框的介绍

我们继续，现在需要加入一个学历的下拉选择控件。下拉选择控件最重要的一个定义就是数据的定义的，数据定义错误，可能得不到我们需要的效果，也是很多朋友感觉最麻烦的地方

{

            columnWidth:.5,

            layout: 'form',

            border:false,

            items: [{

                xtype:'combo',

                 store: new Ext.data.SimpleStore(

               {

                  fields: ["retrunValue", "displayText"],

                    data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]

                       }),

                                         valueField :"retrunValue",

                                         displayField: "displayText",

                                         mode: 'local',

                                         forceSelection: true,

                                         blankText:'请选择学历',

                                         emptyText:'选择学历',

                                         hiddenName:'education',

                                         editable: false,

                                                        triggerAction: 'all',

                 allowBlank:false,

                fieldLabel: '学历',

                name: 'education',

                anchor:'90%'

            }]

      }

列的定义就不说了，没变化。在items里，类型设置成combo了，在这里定义了一个sotre属性，就是选择值存储的地方，因为是在客户端的数据，所以使用了一个简单存储（SimpleStore）。在存储里，我们通过一个数组定义了retrunValue和displayText两个字段。retrunValue字段指定是提交给后台的值，displayText字段指定是在下拉中显示的选择值。然后我们在data里定义了几组数据（data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]），我们可以看到，每组数据都是根据fiedls的定义来组成的，数组里第一个值就是retrunValue的值，第二个值就是displayText的值，例如[1,'小学']，就表示retrunValue是1，displayText是小学。

下面就是很重要的一步了，设置下拉选择框的值和显示文本。本例中设置了下拉选择框的提交值对象的是存储中的retrunValue字段（valueField :"retrunValue"），显示文本是存储中的displayText字段（displayField: "displayText"），通过这两个设置就可将存储中的数据和下拉框对应起来。

因为数据是在本地，所以设置了模式为local（mode: 'local'）。该下拉列表只允许选择，不允许输入（editable: false），而且是必须选择一个选项（forceSelection: true）。在没有选择值时显示为选择学历（emptyText:'选择学历'）。提交form时，该项如果没有选择，则提示错误信息“请选择学历”（blankText:'请选择学历'）。该选项值不允许为空（allowBlank:false）。大家要注意的是hiddenName和name属性，name只是改下拉的名称，作用是可通过，而hiddenName才是提交到后台的input的name。如果没有设置hiddenName，在后台是接收不到结构的，这个大家一定要注意。

因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。

如果要为控件设置默认值，就设置属性value，value的值要设置为提交给后台的值，不要设置为显示文本。例如本例要设置大学为默认值得，则设置value的值为6。

现在到第三行了，我们要创建一个checkbox选项输入：

{

            columnWidth:.35,

            layout: 'form',

            border:false,

            items: [{

                xtype:'checkbox',

                fieldLabel: '权限组',

                boxLabel:'系统管理员',

                name: 'popedom',

                inputValue:'1',

                anchor:'95%'

            }]

      },{

            columnWidth:.2,

            layout: 'form',

            labelWidth:0,

            labelSeparator:'',

            hideLabels:true,

            border:false,

            items: [{

                xtype:'checkbox',

                fieldLabel: '',

                boxLabel:'管理员',

                name: 'pepedom',

                inputValue:'2',

                anchor:'95%'

            }]

        },{

            columnWidth:.2,

            layout: 'form',

            labelWidth:0,

            labelSeparator:'',

            hideLabels:true,

            border:false,

            items: [{

                xtype:'checkbox',

                fieldLabel: '',

                boxLabel:'普通用户',

                name: 'pepedom',

                inputValue:'3',

                anchor:'95%'

            }]

        },{

            columnWidth:.25,

            layout: 'form',

            labelWidth:0,

            labelSeparator:'',

            hideLabels:true,

            border:false,

            items: [{

                xtype:'checkbox',

                fieldLabel: '',

                boxLabel:'访客',

                name: 'pepedom',

                inputValue:'4',

                anchor:'95%'

            }]

        }