I just started using ExtJS 3.4 version. And I was not sure how to access the items within the panel when there is no id or itemId assigned to it. I have used Ext JS 4.2 before but I need to use 3.4 version for now.
In my case, I am using border layout here. I have a tree panel on the east region and a tabpanel in the center region. And I want to update the center region dynamically with grids or forms based on the tree node clicked.
here is my code for the tabpanel
{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
And here is the complete code that I tried First ExtJs Page Ext.onReady(function () {
Ext.namespace('Class');
Class.create = function() {
return this.init(config);
}
};
Ext.namespace('FirstOOPS');
FirstOOPS = Class.create();
FirstOOPS.prototype = {
init: function (config) {
var store= new Ext.data.ArrayStore({
fields: [{name: 'C1'},{ name: 'C3'}, {name: 'C5'}]
});
var myData= [['abcdC11','C3','C5'],['asdf','C3_asdf','C5_asdf']]
store.loadData(myData);
var gridpnl= new Ext.grid.GridPanel({
layout: 'fit',
height: 500,
width: 500,
store: store,
columns:[
{header: "C1", dataIndex: 'C1'},
{header: "C3", dataIndex: 'C3'},
{header: "C5", dataIndex: 'C5' }
]
});
var mainPanel = new Ext.Panel({
layout : 'border',
items : [
{
region: 'east',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Grid',
leaf: true
}, {
text: 'Form',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
if(n.text=='Grid'){
Ext.Msg.alert(n.text);
}
}
}
},{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
]
});
new Ext.Viewport({
layout : 'fit',
items : [mainPanel]
});
}
};
var firstObj = new FirstOOPS();
});
</script>
</body>
</html>
Can someone tell me how to access this without id, so that I can update the tabpanel dynamically or create new tabs based on the tree node click.
Thanks in advance
you can use the following code to access tabpanel without using id or items id
to test the above code I am alerting the title of the tab panel by following code
it will alerts the title of the tab panel