Ext实例 - 利用json实现自动填充表单

数据编辑是很常用的开发之一，在ext官方的demo中，我们可以看到利用xml填充表单的demo，但是需要认为触发，且没有json方便，贼给出个例子，可以自动填充表单，数据采用json形式

代码: 全选

/**
* 创建条件设置表单
*/
function formPannel () {
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget = 'side';
   return new Ext.FormPanel({
      //url:'index.php?mo=emoneycondition&do=getset&r='+Math.random(),
      reader:reader,
        labelWidth: 75, // label settings here cascade unless overridden
      border:false,
        bodyStyle:'padding:5px;background-color:#d2e0f2;',
      buttonAlign:'center',
        labelAlign:'right',
      width:400,
        items: [
            gameSelect = new Ext.form.ComboBox({
               fieldLabel: "游戏",
               hiddenName:'game',
               store: gameds,
               valueField:'game_id',
               displayField:'game_name',
               editable:false,
               mode: 'remote',
               triggerAction: 'all',
               emptyText:"请选择",
               selectOnFocus:true,
               allowBlank:false,
               blankText:'请选择一款游戏',
               width: 300,
               listeners:{
                        select:function(gameSelect){
                                    serverSelect.setValue('');
                           serverds.load({params:{game: gameSelect.getValue()}});
                        }
                       }
            }),serverSelect = new Ext.form.ComboBox({
               fieldLabel: "所在大区",
               hiddenName:'area',
               store: serverds,
               valueField:'server_id',
               displayField:'server_name',
               editable:false,
               mode: 'local',
               triggerAction: 'all',
               emptyText:"请选择",
               selectOnFocus:true,
               allowBlank:false,
               blankText:'请选择大区',
               width: 300,
               listeners:{//这里的监听事件触发填充表单，也可以不放在监听事件里
                        select:function(o){
                                                                    //利用ajax返回数据
                            Ext.Ajax.request({
                                        url:'index.php?mo=emoneycondition&do=getset&r='+Math.random(),
                              success: function(result, request) {
                                                                                        //对json进行反编码
                                 var json = Ext.util.JSON.decode(result.responseText);
                                 formPanel.form.findField('card').setValue(json.card);
                                            //填充表单
                                            formPanel.form.findField('buy_type').setValue(json.buy_type);
                                            //formPanel.form.findField('date_space').setValue(json.date_spacing);
                                            formPanel.form.findField('no_buy').setValue(json.no_buy_days);
                                            //formPanel.form.findField('date').setValue(json.search_time);
                                            formPanel.form.findField('level_offset').setValue(json.level_condition);
                                 formPanel.form.findField('emoney_offset').setValue(json.emoney_condition);
                                 formPanel.form.findField('emoney').setValue(json.emoney);
                                 formPanel.form.findField('level').setValue(json.level);
                              },
                              failure: Ext.Ajax.failure,
                              params:{gameid:formPanel.form.findField('game').getValue(),area_id:formPanel.form.findField('area').getValue()}
                                    });
                        }
                       }
            }), cardSelect = new Ext.form.ComboBox({
               fieldLabel: "密保卡",
               hiddenName:'card',
               store: cardstore,
               valueField:'value',
               displayField:'text',
               editable:false,
               mode: 'local',
               triggerAction: 'all',
               emptyText:"请选择",
               selectOnFocus:true,
               width: 300
            }),buyTypeSelect = new Ext.form.ComboBox({
               fieldLabel: "交易类型",
               hiddenName:'buy_type',
               store: buyTypeStore,
               valueField:'value',
               displayField:'text',
               editable:false,
               mode: 'local',
               triggerAction: 'all',
               emptyText:"请选择",
               selectOnFocus:true,
               width: 300
            }),nobuy = new Ext.form.NumberField({
                fieldLabel:'未交易天数',
                name:'no_buy',
                allowDecimals:true,
                allowNegative :false,
                width: 300
            }),{
               layout:'column',
               border:false,
                    items:[{
                  columnWidth:.4,
                  layout: 'form',
                  bodyStyle:'background-color: #d2e0f2',
                  border:false,
                  items: [
                     levelOffset = new Ext.form.ComboBox({
                        fieldLabel: "玩家等级",
                        hiddenName:'level_offset',
                        store: store,
                        valueField:'value',
                        displayField:'text',
                        editable:false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:"请选择",
                        selectOnFocus:true,
                        anchor: '100%'
                     })
                  ]
               },{
                  columnWidth:.6,
                  layout: 'form',
                  border:false,
                  bodyStyle:'background-color: #d2e0f2',
                  items: [
                     levelSelect = new Ext.form.NumberField({
                         fieldLabel:'等级',
                         name:'level',
                         allowDecimals:true,
                         allowNegative :false,
                         anchor: '96%'
                     })
                  ]
               }]
            },{
               layout:'column',
               border:false,
                    items:[{
                  columnWidth:.4,
                  layout: 'form',
                  bodyStyle:'background-color: #d2e0f2',
                  border:false,
                  items: [
                     emoneyOffset = new Ext.form.ComboBox({
                        fieldLabel: "代币数",
                        hiddenName:'emoney_offset',
                        store: store,
                        valueField:'value',
                        displayField:'text',
                        editable:false,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:"请选择",
                        selectOnFocus:true,
                        anchor: '100%'
                     })
                  ]
               },{
                  columnWidth:.6,
                  layout: 'form',
                  border:false,
                  bodyStyle:'background-color: #d2e0f2',
                  items: [
                     emoney = new Ext.form.NumberField({
                         fieldLabel:'代币',
                         name:'emoney',
                         allowDecimals:true,
                         allowNegative :false,
                         anchor: '96%'
                     })
                  ]
               }]
            }
        ],

        buttons: [{
            text: '更新',
         //查询函数开始
         handler: function(){
                  if(formPanel.form.isValid()){
                     formPanel.form.submit({
                        url:'index.php?mo=emoneycondition&do=update',
                        waitMsg:"正在保存...",
                        waitTitle: "请稍等",
                        params:{
                                gameid:formPanel.form.findField('game').getValue(),
                               area_id:formPanel.form.findField('area').getValue(),
                               card:formPanel.form.findField('card').getValue(),
                                         buy_type:formPanel.form.findField('buy_type').getValue(),
                               //date_spacing:formPanel.form.findField('date_space').getValue(),
                               no_buy_days: formPanel.form.findField('no_buy').getValue(),
                               level_offset:formPanel.form.findField('level_offset').getValue(),
                                         level:formPanel.form.findField('level').getValue(),
                               emoney_offset:formPanel.form.findField('emoney_offset').getValue(),
                               emoney_condition:formPanel.form.findField('emoney').getValue()
                               //search_time:new Date(formPanel.form.findField('date').getValue()).toDateString()
                        },
                        success: function(form,action){
                           if (action.result.msg=='ok') {
                              Ext.MessageBox.hide();
                              Ext.Msg.alert("成功","数据更新成功！");
                           } else {
                              Ext.Msg.alert("错误",action.result.msg);
                           }
                        },
                        failure: function(){
                           Ext.Msg.alert("错误", "服务器错误，请稍候再试！");
                        }
                     });
                  }
                }
         //查询函数结束
        },{
          text:'重置',
         handler:function(){formPanel.form.reset()}
      }]
    });
}