0

現在、ストアのないフォームパネルを使用しています。私が達成したいのは、そのパネルのボタンをクリックして、そのフォームのデータオブジェクトを変数に保存することです。これを達成する方法は？

これが私のコードです：

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 オブジェクトが必要です

4

1 に答える 1

2

を使用Ext.form.Basic.getFieldValuesして必要なオブジェクトを取得し（ここでドキュメントで説明されています）、それを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これは、呼び出しによって返されるキーと値のペアの「キー」部分を表します。

于 2012-07-17T16:52:45.330 に答える