ExtJS FromPanel 填充静态的json

最新推荐文章于 2019-08-01 18:10:01 发布

原创最新推荐文章于 2019-08-01 18:10:01 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

ExtJS技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在使用ExtJS时，通过Grid选中行的事件触发，将选中的数据填充到FormPanel的FromPanel中，包括实现步骤、代码示例及关键逻辑解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做的一个项目，需要在选中ExtJS Grid中的一行时，点击修改按钮弹出的ExtJS窗口的FromPanel中填充选中行的json数据。

实现方法，先得到Grid选中行的数据

//点击选中行，得到其json对象，赋给全局变量data

        grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
             qTitleId = r.data.id;
             alert("id:" + Ext.util.JSON.encode(r.data));
             data = r.data;
         });

//定义一个弹出窗体的方法

function openDialog(){
  Ext.useShims=true;

     var win=new Ext.Window(
          {title:"新增",
              width:370,
              height:200,
              modal:true,
              closeAction:"close",
              layout:"fit",
              items:[
      new Ext.FormPanel({
       id:"formPanel",
        frame:true,
        x:40,
              y:30,
        labelAlign:"right",
        labelWidth: 85,
              width:360,
              height:400,
              border:false,
              waitMsgTarget: true,
            //  region:"west",
              reader : new Ext.data.JsonReader({
               //root:'showInfoList'
               }, [
                  {name:'id',mapping:'id',type:'int'}, 
                  {name:'Qtitle',mapping:'Qtitle'},
                  {name:'isCheckBox',mapping:'isCheckBox'}, 
                  {name:'isAvalible',mapping:'isAvalible',type:'int'}
                  ]),
              items: [
                  new Ext.form.FieldSet({
                      title: '问卷调查标题',
                      width:340,
                      autoHeight: true,
                      defaultType: 'textfield',
                      items: [{
                              fieldLabel: 'ID',
                              //emptyText: '如stam.qq.com',
                              name: 'id',
                              allowBlank: false,
                              width:190,
                              hidden:true
                          },{
                              fieldLabel: '标题名',
                              name: 'Qtitle',
                              allowBlank: false,
                              width:190
                          },
                          new Ext.form.ComboBox({
                              fieldLabel: '选择模式',
                              hiddenName:'isCheckBox',
                              allowBlank:false,
                              //blankText:'不能为空',
                              store: new Ext.data.ArrayStore({
                                  fields: ['abbr', 'isCheckBox'],
                                  data : [
                                    [0,'单选'],
                                    [1,'多选']] 
                              }),
                              valueField:'abbr',
                              displayField:'isCheckBox',
                              typeAhead: true,
                              mode: 'local',
                              triggerAction: 'all',
                              selectOnFocus:true,
                              width:190
                          })
                          ,
                          new Ext.form.ComboBox({
                          fieldLabel: '是否可用',
                          hiddenName:'isAvalible',
                          allowBlank:false,
                          blankText:'不能为空',
                          store: new Ext.data.ArrayStore({
                              fields: ['abbr', 'isAvalible'],
                              data : [
                                   [0,'否'],
                                   [1,'是']] 
                          }),
                          valueField:'abbr',
                          displayField:'isAvalible',
                          typeAhead: true,
                          mode: 'local',
                          triggerAction: 'all',
                          selectOnFocus:true,
                          width:190
                      })
                      ]
                  })
              ]
      })
                  ],
              buttons:[{
               text:"确认",handler:function(){
               
              }}, {
               text:"取消",handler:function(){
               win.close();
               }
           }]
          }); 
     win.show();
  //点击右上角的关闭按钮后
     win.on("close",function(){
  });
 }

//修改按钮的事件

 var centerPanel = new Ext.Panel({
        id:"centerPanel",
        title:"问卷调查标题",
        layout:"fit",
        region:"center",
        //width:"75%",
        tbar:[//定义顶部工具栏
       {
                 id:'updatenode',
                    text: '修改',
                    iconCls : 'option',
                    //pressed : true,
                    handler : function(){
                    if(qTitleId == 0){
                     Ext.Msg.alert("提示","请选择修改行");
                    }else{
                     openDialog();
                     alert(data);
                     Ext.getCmp("formPanel").form.loadRecord(new Ext.data.MemoryProxy(data));//为表单赋值
                    }
                     }
                    }],
        items:[
      grid
            ]
        
     });