Databases
StackOverflow2013
Postsdbo
POextjs4 render component in tab panel
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POextjs4 render component in tab panel
    primarykey
    data
    text
    <p>As you might notice, I'm a newbie in extjs; I have managed to do some stuff myself but the truth is that I don't understand certain things.</p> <p>I have this tree on the left side, and a content panel with a tab panel on the right side. Basically what I want is to load different options (calling different components) on the tab panel when the user clicks on the tree on the left side. Right now, when the user clicks on the first of the options, it displays the components that are related to that option on the content panel. (I'm sure is not the most elegant way of showing this, but at least for now it works) however, my problem is the fact that the components doesn't seem to load in the right tab, once it loads, even if I change tabs the components stay in the same place.</p> <p>I have tried using the <code>rbac.tabs.doLayout();</code> after reading some topics here in the forum, with no success.</p> <p>I really appreciate the help you guys can give me so i can point in the right direction.</p> <p>Here is my code:</p> <pre><code>rbac.userPanel = Ext.create('role.formUserRbac'); rbac.grid = Ext.create('role.gridUserRbac'); rbac.tabsShowPanel = Ext.define('mainPanel',{ extend:'Ext.panel.Panel', border:'false', initComponent: function() { this.callParent(); }, items:[rbac.userPanel,rbac.grid] }); tabsShowPanel = Ext.create('rbac.tabsShowPanel'); function test(nameTab,des){ rbac.addTab(true,nameTab); console.log(des); if (des=='users'){ //console.log(rbac.tabs.addDocked(rbac.testPanel)); rbac.tabs.addDocked(tabsShowPanel) } } Ext.define('treeModel', { extend: 'Ext.data.Model', fields: [ {mapping: 'id', name: 'id', type: 'string'}, {mapping: 'text', name: 'text', type: 'string'}, {mapping: 'descripcion', name: 'descripcion', type: 'string'}, ] }) rbac.TreeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'service.php', extraParams: { accion:'loadtree' }, reader: { type: 'json', root: 'nodes', } }, autoLoad:true, sorters: [{ property: 'id', direction: 'ASC' },{ property: 'id', direction: 'ASC' }], root: { id: 0, expanded: true }, model:'treeModel' }); rbac.treePanel = Ext.create('Ext.tree.Panel', { id: 'tree-panel', title: 'Navegaci\u00f3n', region:'west', split: true, height: 360, width: 180, minSize: 150, rootVisible: false, autoScroll: true, collapsible: true, collapseMode: 'mini', store: rbac.TreeStore }); var currentItem; rbac.tabs = Ext.create('Ext.tab.Panel', { resizeTabs: true, enableTabScroll: true, defaults: { autoScroll:true, bodyPadding: 10 }, items: [{ title: 'Men\u00FA Principal', iconCls: 'tabs', closable: false }] }); rbac.addTab = function (closable,tabName) { rbac.tabs.add({ title: tabName, iconCls: 'tabs', closable: !!closable }).show(); //rbac.tabs.doLayout(); } rbac.treePanel.getSelectionModel().on('select', function(selModel, record) { if (record.get('leaf')) { var des = record.data.descripcion; var nameTab = record.data.text; test(nameTab,des); } }); rbac.contentPanel = { id: 'content-panel', region: 'center', layout: 'card', margins: '2 5 5 0', activeItem: 0, border: false, items: [rbac.tabs], }; rbac.panel = Ext.create('Ext.Viewport', { layout: 'border', title: 'Ext Layout Browser', items: [{ xtype: 'box', id: 'header', region: 'north', html: '&lt;img src="images/test.png"/&gt;', height: 70 },{ layout: 'border', id: 'layout-browser', region:'center', border: false, split:true, margins: '2 0 5 5', width: 275, minSize: 100, maxSize: 500, items: [rbac.treePanel, rbac.contentPanel] }], renderTo: Ext.getBody() }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJosh
    1. USSolar Confinement
    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.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POextjs4 render component in tab panel
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POextjs4 render component in tab panel
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONew user, don't want to bash you... :) ...yet: ever wondered why there is a formatting language for code on StackOverflow? Hint: because you are suppose to do something else than linking a pastebin drop... ;)
      singulars
      1. POextjs4 render component in tab panel
      1. USmac
    2. COok, sorry, let me fix it.
      singulars
      1. POextjs4 render component in tab panel
      1. USSolar Confinement
    3. COI don't know if you can already or not (if I remember correctly there is a time limit), but you should post your solution as an answer and select it as "accepted" (the green thick). This way other visitors with the same problem will immediately know there is a solution. On top of that you will also get a bronze badge, if I am not mistaken... :)
      singulars
      1. POextjs4 render component in tab panel
      1. USmac
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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