2

私は extjs 4 MVC 設計の初心者です。次のコードがあります。

onLaunch: function() {
        console.log("Launched Business Unit Controller");
        var businessunitsStore = this.getStore('Businessunits');
        businessunitsStore.load(function(records){
            var comp = Ext.getCmp('business_form');            
            for(var i=0;i<records.length;i++){
                bu = records[i].data;
                console.log(bu);
                comp.add({
                    xtype:'button',
                    cls:'x-button',
                    width:90,
                    autoScroll:false,
                    height:60,                                            
                    text:bu.businessunit_name,
                    enableToggle:true,  
                    listeners:{
                        click: function(){
                            var pnl = Ext.getCmp('active-units-form');    
                            pnl.add({
                                xtype:'label',                                
                                text:this.text,                                
                            })                         
                        } 
                    }                                         
                }) //comp.add
            } //for ...
        });       
    }

ご覧のとおり、ストアの読み込み時にボタンを追加しています。各ボタンにはさらにイベントがあります。問題は、ボタンのクリック イベントのようなサブ イベントを onLaunch の外側のチェーンに沿って別のメソッドとして処理したいことです。しかし、私はこのループから抜け出せないようで、すべてのイベントはチェーンとして書き込まれます。しかし、それは間違っているようで、リスナーの数が増えると、コードが乱雑になります。コントローラーのメソッドと内部を切り替える方法はありますか

4

2 に答える 2

1

なぜイベントバス (コントロール) を使わなかったのですか? MVC アプリを使用する場合は既に存在するため、使用することをお勧めします。それを使用する場合、コントローラー内にリスナーメソッドがあり、ボタンインスタンスが引数として含まれます。キーワードはthisコントローラ インスタンスを提供し、ボタン インスタンスを使用して / を使用して上下に移動できup()ますdown()。確かに別の一意の識別子を追加して、それが必要であることを確認できます。

onLaunch: function() {
    controls('#business_form button[ident=businessunit-btn]':{click:this.onClickBussinesUnitBtn});
    console.log("Launched Business Unit Controller");
    var businessunitsStore = this.getStore('Businessunits');
    businessunitsStore.load(function(records){
        var comp = Ext.getCmp('business_form');            
        for(var i=0;i<records.length;i++){
            bu = records[i].data;
            console.log(bu);
            comp.add({
                xtype:'button',
                cls:'x-button',
                ident: 'businessunit-btn',
                width:90,
                autoScroll:false,
                height:60,                                            
                text:bu.businessunit_name,
                enableToggle:true                                       
            }) //comp.add
        } //for ...
    });       
},
onClickBussinesUnitBtn: function(btn){
     var pnl = Ext.getCmp('active-units-form'); // I recommend you to instantiate this either also with a controller function, so that you can store the reference or doing it with up/down as Alexey mentioned.
     pnl.add({
        xtype:'label',                                
        text:btn.text
     });                                
}
于 2012-09-28T06:41:26.497 に答える
0

thisキーワードがわからない場合は、キーワードの使用を避けたほうがよいでしょう。

click: function (button) {
    var pnl = Ext.getCmp('active-units-form');    
    pnl.add({
        xtype: 'label',                                
        text: button.text,                                
    })                         
}

また、探しているビューがコントローラーの構成で定義されている場合downの代わりに、メソッドを使用してみてください。Ext.getCmpViews

onLaunch: function() {
    console.log("Launched Business Unit Controller");
    var businessunitsStore = this.getStore('Businessunits');
    businessunitsStore.load(function(records){
        var comp = this.down('#business_form'); //Ext.getCmp('business_form');            
        for(var i = 0; i < records.length; i++){
            bu = records[i]; //.data;
            console.log(bu);

            var button = comp.add({
                xtype:'button',
                cls:'x-button',
                width:90,
                autoScroll:false,
                height:60,                                            
                text:bu.get('businessunit_name'), //bu.businessunit_name,
                enableToggle:true,  
            }) //comp.add

            button.on('click', this.businessUnitButton_click, this); 
            // 3rd parameter 'this' will be controller instance inside handler
        } //for ...
    });       
},

businessUnitButton_click: function (button) {
    // 'this' is controller
    var pnl = this.down('#active-units-form'); // Ext.getCmp('active-units-form');
    pnl.add({
        xtype:'label',                                
        text: button.text,                                
    })                         
}
于 2012-09-28T05:29:53.093 に答える