PDA

View Full Version : Viewport, problem with IDs



ivandres
4 Feb 2012, 6:29 PM
Hi, im just starting a new project using extjs 4 and im having some troubles, basically on the creation of the Viewport, i looked online and i couldnt find any answer for this

The viewport have center and weast panel, the problem appears on the center panel when i try to put an id on it, i need to have an id at least on the tabpanel (it is inside of the center panel), so i'll be able to create new tabs and play with them,

Im getting so mad trying to fix this, so i hope somebody can give me some ideas!


This is my viewport code right now:


Ext.define('myapp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border',
align: 'stretch'
},
border: false,
items: [
// CENTER PANEL
{
region: 'center',
xtype: 'panel',
layout: 'border',
margins: '0 5 0 0',
border: true,
//id: 'someID', //--- IF I ACTIVE THIS AND I MINIMIZE THE WEST PANEL YOU CAN SEE THAT THE CENTER PANEL DOESNT FIT THE WIDTH OF THE PAGE AND IT IS FILLED WITH A NEW CENTER PANEL ONE ABOVE THE OTHER
items: [
{
region: 'center',
xtype: 'tabpanel',
border: false,
enableTabScroll: true,
activeTab: 0,
//id: 'tab-panel', // --- IF I ACTIVE THIS THE TAB PANEL DOESNT RENDER AT ALL
items: [
{
title: 'Overview',
xtype: 'panel',
border: false,
layout: {
type: 'fit',
align: 'stretch'
},
html: 'Link to nowhere'
}, {
title: 'Customers',
xtype: 'panel',
border: false,
layout: {
type: 'fit',
align: 'stretch'
},
items: [{
xtype: 'userlist'
}]
}]
},
{
region: 'north',
xtype: 'panel',
border: false,
html: '<h1>Breadcrumbs</h1>',
height: 25
}
]
},
// WEST PANEL
{
region: 'west',
xtype: 'panel',
hideCollapseTool:true,
collapseMode:'mini',
layout: 'accordion',
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: true
},
autoHeight: true,
width: 180,
split: true,
collapsible: true,
margins: '0 0 0 5',
items: [{
xtype: 'treepanel',
title: 'Category',
rootVisible: false,
useArrows: true,
autoScroll: true,
store: store // I defined the store previously
}, {
title: 'Example',
html: 'Example tree go here'
}]
}]
});

Farish
5 Feb 2012, 1:43 AM
You are using region: 'center' twice! You dont need to encapsulate the tabpabel inside another panel. You can just use the tabpanel directly as center region without using it as an item of another panel.



Ext.define('myapp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border',
align: 'stretch'
},
border: false,
items: [
// CENTER PANEL
{
region: 'center',
layout: 'border',
margins: '0 5 0 0',
border: true,
xtype: 'tabpanel',
enableTabScroll: true,
activeTab: 0,
id: 'tab-panel', // --- IF I ACTIVE THIS THE TAB PANEL DOESNT RENDER AT ALL
items: [
{
title: 'Overview',
xtype: 'panel',
border: false,
layout: {
type: 'fit',
align: 'stretch'
},
html: 'Link to nowhere'
}, {
title: 'Customers',
xtype: 'panel',
border: false,
layout: {
type: 'fit',
align: 'stretch'
},
items: [{
xtype: 'userlist'
}]
}]
},
{
region: 'north',
xtype: 'panel',
border: false,
html: '<h1>Breadcrumbs</h1>',
height: 25
}
},
// WEST PANEL
{
region: 'west',
xtype: 'panel',
hideCollapseTool:true,
collapseMode:'mini',
layout: 'accordion',
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: true
},
autoHeight: true,
width: 180,
split: true,
collapsible: true,
margins: '0 0 0 5',
items: [{
xtype: 'treepanel',
title: 'Category',
rootVisible: false,
useArrows: true,
autoScroll: true,
store: store // I defined the store previously
}, {
title: 'Example',
html: 'Example tree go here'
}]
}]
}); http://www.sencha.com/forum/clear.gif (http://www.sencha.com/forum/newreply.php?do=newreply&p=727237)

ivandres
5 Feb 2012, 6:45 AM
The center panel, is a border layout, and inside the center panel i have a north and center region, north is going to be used for breadcrumbs, and center for the tabpanel.

Even if i change it the way you say the render problem still the same, if i put the id to the tabpanel when i load the page i dont see the tabpanel until y resize the west panel.

Farish
5 Feb 2012, 7:31 AM
the center region occupies the space left by the other regions. So make sure that the other regions are not too big so that there is no space left for the center region.

layout: 'fit' is used for containers which contain a single item. This might not fix your problem but just for your info.

dedoz
5 Feb 2012, 12:53 PM
in docs says
-------
Instead of using assigned ids, use the itemId config, and ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The Container class contains shortcut methods to query its descendant Components by selector.
-------

and anyway u dont need to set ids or itemIds to get reference to ExtJs components.
Theres the componentQuery thing so u can do something like


var all_tab_controls = Ext.ComponentQuery.query("viewport tabpanel");


if u only have one ctrl so u are sure thats the one u want to get reference
var my_tab_control = all_tab_controls[0];

(sorry for my bad english)

ivandres
5 Feb 2012, 7:21 PM
Thanks dedoz!!!, it worked the way you said, but could you hand me the link on the documentation where you saw that?,
So I put: itemId: 'tab-panel' to my tabpanel configuration and then i call it this way:

var panel = Ext.ComponentQuery.query("panel #tab-panel");
panel = panel[0];
var activeTab = panel.getActiveTab();

but now i would like to know the best way to put new content in a tab, im using now
Ext.fly(activeTab.id).dom.innerHTML= obj;
for example to load new content in php, but i think it should be a way more elegant to do it, like this:
activeTab.body.update(obj);
but it doesnt seem to work very well, i have a grid and when i click on a toolbar button i want to put new content on the same tab and delete the grid, but with this when i resize the west panel it shows the grid again, but this doesnt happen when i use the fly function.

Edit:

i found the solution on the forum, its easy (i'm new on ext so everything seems a little hard at the beginning)

panelTab.removeAll();
panelTab.add(new_panel);
panelTab.doLayout();

dedoz
6 Feb 2012, 12:57 AM
glad to help, mark my post as an answer so i get 1 answer thing :D

the documentation in on the id config in every component like in tabpanels or grid panels etc
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Tab-cfg-id

second if you going to use itemId just put the #id thing in the query, also u can append [0] in the same line
var panel = Ext.ComponentQuery.query("#tab-panel")[0];