日期:2014-05-16  浏览次数:20463 次

ExtJs+Json实践例子(2)
// 初始化数据
function initData() {
     if (!searchForm) {
         searchForm = new Ext.FormPanel({
              collapsible : true,
              autoHeight : true,
              frame : true,
              width : 800,
              monitorValid : true,// 把有formBind:true的按钮和验证绑定
              layout : "form",
              labelWidth : 55,
              title : "查询房屋信息",
              renderTo : Ext.getBody(),
              items : [{
                            xtype : "panel",// 默认就是它
                            layout : "column",
                            fieldLabel : "标题",
                            isFormField : true,
                            items : [{
                                          columnWidth : 0.17,
                                          xtype : "textfield",
                                          name : "title",
                                          anchor : "100%"
                                     }, {
                                          columnWidth : 0.4,
                                          layout : "form",
                                          labelWidth : 60,// 注意,这个参数在这里可以调整简单fieldLabel的布局位置
                                          items : [{
                                                        xtype : "datefield",
                                                        fieldLabel : "发布日期",
                                                        name : "booktime",
                                                        anchor : "90%"
                                                   }]
 
                                     }]
                       }, { // 上面是第一行
                            xtype : "panel",
                            layout : "column",
                            fieldLabel : "几室",
                            isFormField : true,
                            items : [{
                                 columnWidth : 0.15,
                                 xtype : "combo",
                                 name : "room",
                                 hiddenName : "room",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
                                 store : new Ext.data.SimpleStore({
                                               fields : ['a', 'b'],
                                               data : [['1', '一'], ['2', '二'],
                                                        ['3', '三']]
                                          }),
                                 valueField : 'a',
                                 displayField : 'b',
                                 mode : 'local',
                                 triggerAction : 'all',
                                 // forceSelection : true,
                                 // selectOnFocus : true,
                                 editable : false,
                                 emptyText : "无限制!",
                                 anchor : "80%"
                            }, {
                                 columnWidth : 0.2,
                                 layout : "form",
                                 labelWidth : 40,// 注意,这个参数在这里可以调整简单fieldLabel的布局位置
                                 items : [{
                                     xtype : "combo",
                                     name : "ting",
                                     hiddenName : "ting",
                                     fieldLabel : "几厅",
                                     store : new Ext.data.SimpleStore({
                                                   fields : ['a', 'b'],
                                                   data : [['1', '一'], ['2', '二'],
                                                             ['3', '三']]
                                               }),
                                     valueField : 'a',
                                     displayField