extjs 4 gleiche Komponente mit mehreren tabs

ich m arbeiten mit extjs 4 & rails 3. ich bin mit toolbar & tab-panel. ich will gleiche Symbolleiste in allen tab-panel & wollen die Schaltflächen auf der Symbolleiste, um die Arbeit nach Registerkarte aktiv ist. Für zB. Symbolleiste enthält hinzufügen,Bearbeiten,usw Tasten. Angenommen ich habe-region & Kategorie tabs. Wenn region Registerkarte aktiv ist, sollte ich in der Lage zu führen Sie die "ADD" - operation für die "Region" & so weiter. Was kann der richtige Weg, um dieses Ziel zu erreichen extjs 4 ? Ich bin nicht in der Lage, um eine Aktion zuzuweisen, die auf der Symbolleiste in der Region & Category Controller?
ich bezog mich dieseaber keine Ahnung, wie kann ich es umsetzen in meinem code ?
Hier ist der Beispielcode von "Regionen" extjs mvc-controller, den ich ausprobiert habe. Das problem ist, wenn ich Schreibe, ähnlichen code in Kategorie Controller für das HINZUFÜGEN von btn commontoolbar, FÜGEN Sie die Umsetzung der Region aufgerufen wird 🙁

    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);
        }
});

InformationsquelleAutor Shruti | 2011-08-17

extjs4 tabs

2

Hoffe, dass der folgende code wird Ihnen helfen:
```
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();
```
Können Sie das funktionierende Beispiel der obige code durch klicken auf den folgenden link:

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

1.Nach dem öffnen Sie den obigen link finden Sie das Ergebnis in der rechten unteren Ecke.

2.Wie pro Ihre Frage eine Symbolleiste erstellt, und es wird mit zwei Registerkarten mit der gleichen Taste.

3.Wenn Sie auf die Schaltfläche klicken,dann erhalten Sie die aktuelle Registerkarte-id und zeigt Sie den anderen Ergebnis als Grundlage, welche Registerkarte aktiviert ist.
- hey thnx @kiran, das ist eine hilfreiche code, aber in dis u r hinzufügen von 2 diff-Tasten, um die tabs, aber ich will "gleichen" Tasten auf der Symbolleiste, anders zu handeln, je nach aktiver Registerkarte. Ich meine smthing wie das hinzufügen button btn1 toolbar-n shud Wünsche alert "region" auf die region tab & dasselbe für das Land.
- Sie können jetzt überprüfen.Ich änderte den code wie pro Ihre Anforderung.Sie können prüfen, zu arbeiten,indem Sie auf das veränderte die Probe.
- thnx a lot für die schnellen Antworten,das ist das, was ich wollte, aber das problem ist, ich m mit extjs 4 mvc-Muster. So habe ich seperate controller für Land & region. Wie kann ich dasselbe auf controller, bcoz wenn ich finden-Symbolleiste durch den alias dann nicht entsprechend handeln, um die aktive Registerkarte. Gibt es eine Möglichkeit zu bestimmen, in derselben Symbolleiste mit verschiedenen id im Controller?
- thnx ich versuchte ur-code funktioniert es einwandfrei. jetzt gibt es eine Möglichkeit zum umleiten von Steuern auf bestimmte extjs controller je nach aktiver Registerkarte in den extjs mvc da ich habe alles im controller ??
- Können Sie teilen, dass der code mit uns?Wir werden versuchen, um die Lösung zu finden. 🙂
- ich bearbeitet meine ques & posted Beispielcode, mit denen ich gearbeitet habe, auf. ich möchte einen Weg geben, um eine eindeutige Identifizierung zu Symbolleiste in jedem controller/tab & fügen Sie dann eine Aktion darauf im separaten controller mit dieser Identität?
- Wenn Sie definieren die Komponenten weltweit können Sie die Komponente oder die Komponenten-id, wo jeder.Hier habe ich aber nicht bekommen Sie über die einzigartige Identifikation für die Symbolleiste heißt?
- ich meine, ich m definieren von Aktionen auf der Symbolleiste mit dem gleichen Namen d.h. commontoolbar als Folge-Aktionen definiert sind, für die es in der region controller sind in Land-controller auch. Wenn ich Ihren Ansatz, den ich prüfen müssen, alle Registerkarten, die es in mein proj. So kann ich einschränken Gültigkeitsbereich von commontoolbar zu bestimmten controller kann b durch die Verwendung von eindeutigen Namen für es ?
- I dnt knw, ob im denken, im Recht, dir oder nicht, aber kann ich erstellen verschiedene Instanzen/Objekte für commontoolbar & dann überschreiben-Methode für Sie? i m lil schwach in extjs 4 🙁
- Als pro ich weiß,wenn Sie in der region tab(active), dann müssen Sie, um die details aus der region-controller und erhalten die Maßnahmen gemäß obigen code.Wenn Sie in der Land-Registerkarte, dann gehen Sie zu Land-controller und Lesen die Aktionen.
- Mein Rat ist, es besser ist die Verwendung von eindeutigen IDS.Denn wenn die region Registerkarte ist in der aktiven position sind, dann können Sie direkt die jeweilige Aktion basiert auf eindeutigen id.Wenn Sie in der coutry dann ist es auch einfach mit einer eindeutigen id.
- wenn ich commontoolbar tab, i m zuweisen von eindeutigen id für commontoolbar für die Registerkarte. wie kann ich das binden von Aktionen in jedem controller verwenden, die eindeutige id der commontoolbar? Wie in meinem code, den ich gepostet ich m Zuweisung von Aktionen mit xtype:commontoolbar wie kann ich es tun, für die "id" der commontoolbar?
- Überprüfen Sie thwe obigen code wie wenn region Registerkarte aktiv ist, dann müssen Sie die Knöpfe unter region-controller.Nächsten buttonclick-Ereignis müssen Sie prüfen, active tab id und dann zuweisen von controller ich meine actin mit der Taste
InformationsquelleAutor Unknown

Wenn Sie streng auf die Verwendung von nur einer Klasse,kann der code unten ist auch hilfreich für Sie, shruti:

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');