1

extjs アプリケーションでインライン編集を行いたいと考えています。表示フィールドで埋められた単純なフォームを作成し、その横に編集可能であることを示す小さなアイコンを表示しました。クリックすると実際のフィールドになるようにしたい。

ここで同様の質問を見たことがありますが、答えはありません。

これは私のフォームです：

var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24'/>";

Ext.define('BM.view.test.Edit', {
    extend: 'Ext.form.Panel',
    alias: 'widget.test-edit',

    layout: 'anchor',
    title: 'Edit Test',
    defaultType: 'displayfield',

//    handleFieldChanged: function() {
//        console.log('click el');
//    },
//
//    listeners: {
//        add: function(me, component, index) {
////            if( component.isFormField ) {
//                component.on('click', me.handleFieldChanged, me);
////            }
//        }
//    },

    items: [
        {name: 'id', hidden: true},
        {
            name: 'name',
            fieldLabel: 'Name',
            afterSubTpl: editPic,
            cls: 'editable',
            listeners: [
                {
                    element: 'element',
                    delegate: '.editable',
                    event: 'click',
                    fn: function() {
                        console.log('Edit Now!');
                    }
                }
            ]
        },

        {name: 'status', fieldLabel: 'Status'}
        ]
});

これは私のコントローラー内のコントロールです:

    this.control({
        'test-edit': {
            afterrender: this.beenRendered
        },
        'test-edit > displayfield': {
            click: this.updateTestField
        }
    });


updateTestField: function(button) {
    console.log('field clicked');
},

beenRendered: function() {
        console.log('Rendered!'); // Getting here
        var myDiv = Ext.get(".editable");  // Doesn't find anything
        myDiv.on("click",handleClick); 

    function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
        e.preventDefault();
        console.log('clicked');
    }

},

私が理解している限り、フィールドはクリック イベントをリッスンしていません。どうやって作るの？上記のように、私は多くの方法を試しました。afterrender イベントはうまく機能します。

クリック イベントを監視するコンテナを使用してフィールドをカプセル化する必要があるのでしょうか。

手がかりは大歓迎です。

4

2 に答える 2

1

getEl()フィールドのメソッド define を使用します。

df.getEl().on('click', function(){});
于 2012-08-23T23:35:44.897 に答える
0

el次のプロパティを使用できます。

..
beenRendered: function(df) {
        console.log('Rendered!'); // Getting here
        var el = df.el;
        el.on("click",handleClick); 

    function handleClick(e, t){
        e.preventDefault();
        console.log('clicked');
    }

}

el は Ext.Element (html dom のラッパー) w/c のインスタンスであり、イベントの処理に使用できます。

于 2012-08-23T07:38:07.030 に答える