Note that there are some explanatory texts on larger screens.

plurals
  1. POextjs 4 same component multiple tabs
    primarykey
    data
    text
    <p>i m working with extjs 4 &amp; rails 3. i am having toolbar &amp; tab panel. i want to use same toolbar in all the tab panel &amp; want buttons on the toolbar to work according to tab that is active. For eg. toolbar contains add,edit,etc buttons. Suppose i have region &amp; category tabs. When region tab is active i should be able to perform "ADD" operation for "Region" &amp; so on. What can be the correct way to achieve this in extjs 4 ? I am not able to assign action on toolbar in Region &amp; Category controllers? i referred <a href="https://stackoverflow.com/questions/7034975/using-same-item-in-multiple-tab-in-extjs">this</a>but no idea as to how can i implement it in my code ? Here is sample code of "Regions" extjs mvc controller that i have tried. The problem is if i write similar code in <strong>Category</strong> contoller for ADD btn of commontoolbar, ADD implementation of <strong>Region</strong> gets called :(</p> <pre><code> 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 &gt; 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); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload