Ext.FormPanel 3

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

{

            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%'

            }]

        }

checkbox 的设置和 radio 的设置大同小异，大家注意列宽的定义就行。