extjs 4 одинаковых компонента несколько вкладок - PullRequest
Новая
       22

extjs 4 одинаковых компонента несколько вкладок

6 голосов
/ 17 августа 2011

я работаю с extjs 4 & rails 3. У меня есть панель инструментов и панель вкладок.Я хочу использовать одну и ту же панель инструментов на всех вкладках и хочу, чтобы кнопки на панели инструментов работали в соответствии с активной вкладкой.Например,Панель инструментов содержит кнопки добавления, редактирования и т. д.Предположим, у меня есть вкладки региона и категории.Когда вкладка региона активна, я должен быть в состоянии выполнить операцию «ДОБАВИТЬ» для «Регион» и так далее.Как можно добиться этого в extjs 4?Я не могу назначить действие на панели инструментов в контроллерах региона и категории?я упомянул это , но не представляю, как я могу реализовать это в своем коде?Вот пример кода "Regions" extjs mvc controller, который я пробовал.Проблема в том, что если я напишу похожий код в контроллере категории для ADD btn commontoolbar, ADD будет реализована реализация Region : (

    Ext.define('overdrive.controller.Regions', {
        extend: 'Ext.app.Controller',
        views: [
            'region.RegionList',
            'region.RegionForm',
            'region.RegionPanel',
            'common.CommonToolbar'
        ],
        models: ['Region'],
        stores: ['Regions'],
         init: function() {
            this.control({
                'viewport > panel': {
                    render: this.onPanelRendered
                },
                'regionpanel':{
                    beforerender:this.addToolbar
                } ,
                'commontoolbar button[action=chk]': {
                    click: this.chk
                }

            });
        },
        chk:function()
        {

            var tabcon = Ext.getCmp('tabcon');//tabcon is id of tab panel
             var activetab = tabcon.getActiveTab();

             var activetabid = activetab.getId();
             console.log('Active Tab ID:'+activetabid);
                if(activetabid == 'regiontab'){
                alert('Clicked button in region Tab');
                }else if(activetabid == 'storetab'){
                 alert('Clicked button in store Tab');
                }
        },


       addToolbar:function()
       {

            var regionpanel=Ext.widget('regionpanel');
            var regiontab=Ext.getCmp('regiontab');
            var tabcon = Ext.getCmp('tabcon');


           regiontab.add({
                xtype:'commontoolbar', id:'regiontoolbar',
                itemId: 'regiontoolbar'
           });

        },

       addRegion: function(button) {

            var regiontoolbar=button.up('regiontoolbar');
            var regiontab = Ext.getCmp('regiontab');
            var regionpanel = regiontab.down('regionpanel');
            var regionform = regionpanel.down('regionform');
            regiontoolbar.child('#add').setDisabled(true);
            regiontoolbar.child('#edit').setDisabled(true);
            regiontoolbar.child('#delete').setDisabled(true);
            regiontoolbar.child('#save').setDisabled(false);
            regiontoolbar.child('#cancel').setDisabled(false);
            regionpanel.layout.setActiveItem(regionform);
        }
});

Ответы [ 2 ]

2 голосов
/ 17 августа 2011

Надеюсь, что следующий код поможет вам: 

btn = {
    id: 'button',
    width : 130,
    height : 35,
    text: 'Button',
    listeners : {
        click : function(){
         var activetab = Ext.getCmp('extabs').getActiveTab();
         var activetabid = activetab.getId();
            if(activetabid == 'regiontab'){
            alert('Clicked button in region Tab');
            }else if(activetabid == 'countrytab'){
             alert('Clicked button in country Tab');
            }
        }
    }
};
toolbar = Ext.create('Ext.Toolbar',{
    id:'extoolbar',
    width : 350,
    height : 40
});
country = {
    id : 'countrytab',
    title : 'Country'
};
region = {
    id : 'regiontab',
    title : 'Region'
};
var exTabs = Ext.create('Ext.tab.Panel',{
    id : 'extabs',
    activeTab : 0,
    width : 350,
    plain : true,
    style : 'background:none',
    items : [region,country],
    listeners : {
        beforerender : function(){
         Ext.getCmp('regiontab').add(toolbar);
            toolbar.add(btn);
        },
        tabchange : function(tp,newTab,currentTab){
            if(newTab.getId()=='countrytab'){
                toolbar.removeAll();
             Ext.getCmp('countrytab').add(toolbar);
                toolbar.add(btn);
            }
            if(newTab.getId()=='regiontab'){
                toolbar.removeAll();
             Ext.getCmp('regiontab').add(toolbar);
                toolbar.add(btn);

            }
        }
    }
});
exWindow = Ext.create('Ext.Window',{
    id : 'examplewin',
    title : 'tabs sample',
    layout : 'fit',
    width : 350,
    height : 300,
    draggable : false,
    resizable : false,
    plain : true,
    frame : false,
    shadow : false,
    items : [exTabs]
}).show();

Вы можете проверить рабочий пример вышеприведенного кода, перейдя по следующей ссылке:

http://jsfiddle.net/kVbra/23/

1.После открытия вышеуказанной ссылки вы можете найти результат в правом нижнем углу.
2.В соответствии с вашим вопросом создана одна панель инструментов, и она используется в двух вкладках с одной и той же кнопкой.
3.Если вы нажмете накнопка, затем он получит текущий идентификатор вкладки и отобразит другой результат в зависимости от того, какая вкладка активирована.

1 голос
/ 20 августа 2011

Если вы строго используете только один класс, приведенный ниже код также может быть полезен для вас. Шрути: 

Ext.define('Sample', {    
    alternateClassName: ['Example', 'Important'],     
    code: function(msg) {        
        alert('Sample for alternateClassName... ' + msg);     
    },
    renderTo :document.body
});
var hi = Ext.create('Sample');
hi.code('Sample');
var hello = Ext.create('Example');
hello.code('Example');
var imp = Ext.create('Important');
imp.code('Important');

Рабочий образец:

http://jsfiddle.net/kesamkiran/kVbra/30/

...