Extjs4变量中的Formpanel数据strore

Question

我有一个当前没有存储的formpanel。我想要达到的目标是通过单击该面板中的按钮将该表单的数据对象存储在变量中。如何实现这一目标？

这里是我的代码：

Ext.define('Nits.view.PropertyPanelCmp', { 
      extend:'Ext.form.Panel', 
      alias : 'widget.propertypanelCmp', 
      id: 'propertypanelCmp', 
      title: 'File properties', 
      height: 500, 
      width: 200, 
      draggable: false, 
      closable: false,  
      //autoScroll:true, 
      layout: { 
       align: 'stretch', 
       type: 'vbox' 
      }, 
      fieldDefaults: { 
       labelWidth: 65 
      }, 
      bodyPadding: 10,  

      initComponent: function() { 
       var me = this; 

       me.items = [ 
       { 
        xtype: 'fieldset', 
        height: 108, 
        title: 'Common Properties', 
        items: [ 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Type', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Age', 
          anchor: '100%' 
         } 
        ] 
       }, 
       { 
        xtype: 'fieldset', 
        title: 'Level1 Properties', 
        items: [ 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Sample1', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'checkboxfield', 
          fieldLabel: 'Recursive', 
         //  boxLabel: 'Box Label', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'checkboxfield', 
          fieldLabel: 'Delete', 
        //  boxLabel: 'Box Label', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'checkboxfield', 
          fieldLabel: 'Read Only', 
         // boxLabel: 'Box Label', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Include', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Exclude', 
          anchor: '100%' 
         } 
        ] 
       }, 
       { 
        xtype: 'fieldset', 
        title: 'Level2 Properties', 
        items: [ 
         { 
          xtype: 'combobox', 
          fieldLabel: 'File B', 
          anchor: '100%' 
         } 
        ] 
       }, 
       { 
        xtype: 'button', 
        text: 'Apply', 
        listeners: { 
         click: { 
          fn: me.onButtonClick, 
          scope: me 
         } 
        } 
       } 
      ]; 
       me.callParent(arguments); 
      }, 
      //Here do what you want to when click on Apply button 
      onButtonClick: function(button, e, options) { 
       alert('Sample'); 
      } 
} 
); 

需要JSON对象，这个表单元素

Answer 1

您应该使用Ext.form.Basic.getFieldValues得到你需要（如文档覆盖here），然后将其转换成对象JSON。

按照MVC模式我把按钮处理程序控制器，而不是一个视图，它会是这个样子：

Ext.define('Nits.controller.MyController', { 
    extend: 'Ext.app.Controller', 

    views: [ 
     'PropertyPanelCmp', 
    ], 

    init: function() { 
     var me = this; 

     me.control({ 

      'propertypanelCmp button[text=Apply]': { 

       click: function(button) { 
        var form = button.up('propertypanelCmp').getForm(), 
         values = form.getFieldValues(), 
         json = Ext.JSON.encode(values); 

        console.log(json); 
        alert(json); 
       } 
      } 
     }); 
    } 
} 

我想，如果你真的想在您的视图按钮处理它可能是这个样子：

//Here do what you want to when click on Apply button 
onButtonClick: function(button, e, options) { 
    var form = this.getForm(), 
     values = form.getFieldValues(), 
     json = Ext.JSON.encode(values); 

    console.log(json); 
    alert(json); 
} 

编辑

正如你注意到的，字段该表单必须具有有效的inputId配置。这将代表由getFieldValues调用返回的键/值对的“关键”部分。