Extjs4 변수의 Formpanel 데이터 스트로크

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'); 
      } 
} 
); 

당신은 당신이 (워드 프로세서에 here 덮여로) 다음으로 변환해야하는 개체를 가져 Ext.form.Basic.getFieldValues를 사용해야합니다

Answer 1

이 양식 요소에 대한 JSON 객체를 필요 : 여기

내 코드입니다 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 호출에 의해 반환 된 키/값 쌍 중 "핵심"부분을 나타냅니다.