0

Sencha touchを使った機能を実装しました。

その中で、VIEWのファイルに2つのボタンADD、DELETEを備えたビューを設計しました。

AQnd は、CONTROLLER ファイルのボタンに対応するコントローラーを追加します。

コントローラーはコンソール出力で正常に動作します

しかし、 ADDボタンを動的にテーピングして、フィールドセットのテキストフィールドやテキストエリアなどのフォームを1つ追加する必要があります

DELETEボタンを動的にタップすると、フォームを 1 つ削除します。

ファイルを閲覧する：

Ext.define('MyApp.view.MainPanel', {
           extend: 'Ext.form.Panel',

           config: {
           items: [
                   {
                   xtype: 'button',
                   id: 'addButton',
                   height: 33,
                   left: '',
                   margin: '500px',
                   padding: '',
                   right: '400px',
                   ui: 'confirm-round',
                   width: 100,
                   text: 'Add'
               },

                   {
                   xtype: 'button',
                   id: 'deleteButton',
                   height: 33,
                   margin: '500px',
                   right: '296px',
                    ui: 'decline-round',
                   width: 100,
                   text: 'Delete'
                   }
                   ]
           }});

ここに画像の説明を入力

コントローラ ファイル:

Ext.define('MyApp.controller.MainController', {
    extend: 'Ext.app.Controller',
    config: {
        views: [
            'MainPanel'
        ],


    },

    init: function() {
           this.control({

                        '#addButton': {
                        tap: function() {

                         console.log('Add field');

                        }
                        },


                        '#deleteButton': {
                        tap: function() {

                        console.log('Delete field');

                        }
                        },
        });
    },

出力：ここに画像の説明を入力

4

1 に答える 1

1

これはあなたがやろうとしていることとほぼ同じように聞こえます：http ：//www.swarmonline.com/2011/05/dynamic-sencha-touch-forms-part-3-adding-form-fields-on-the-fly //

ただし、Sencha Touch 1.0用に作成されているため、2.0ではソリューションが少し異なります...

まず、ボタンをフィールドセットに配置します。

ファイルを閲覧する

Ext.define('MyApp.view.MainPanel', {
       extend: 'Ext.form.Panel',

       config: {
           items: [
                {
           xtype: 'fieldset',
                   items: [
                       /** your two button configs here **/
                   ]
                }
       }
 });

これで、ボタンタップハンドラーからフィールドセットにアクセスして、フィールドを追加できます。ボタンを引数としてハンドラーに追加することを忘れないでください。

tap: function(button){
    button.up('fieldset').add({
        xtype: 'textfield',
        name: 'MyField-' + button.up('fieldset').length
    });
}

placeholderフィールド設定などの他のオプションを追加することもできます。

編集：

同様に、フィールドを削除するには、代わりにremoveメソッドを使用します（http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-remove）：

 button.up('fieldset').remove(button.up('fieldset').items.items[0]); // remove 1st item
于 2012-08-01T13:35:14.370 に答える