PDA

View Full Version : MVC grid and tabs



teddy11
5 Jun 2012, 5:48 AM
I am using the example provided on this site -
http://www.extjsframework.com/mvc/simple-mvc-application.
I want to be able to add tabs to the panel that will display different grids in each tab.
I changed the extend in Panel.js to


extend: 'Ext.tab.Panel' .
and added a "Grid2.js"


Ext.define('USERS.view.Grid2' , {
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : '2nd Tab',
store: 'Users',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1
},{
header: 'Email',
dataIndex: 'email',
flex: 1
}]
});
Lastly, I made the following changes in the controller (Users.js) --


views: ['Panel', 'Grid', 'Grid2'], and added
Ext.create('USERS.view.Grid2').show();

The tab is correctly displayed but only one tab is showing and the title is the one for Grid2.
1. How do I add multiple tabs using a controller?
2. What can I do to make the grid show up?
Thanks.

scottmartin
15 Jun 2012, 4:47 PM
Here is a quick example of creating tabs and adding a grid to each. In the MVC pattern, you will just need to reference the tab as expected.




Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', 'email':'lisa@simpsons.com', 'change':100 },
{ 'name': 'Bart', 'email':'bart@simpsons.com', 'change':-20 },
{ 'name': 'Homer', 'email':'home@simpsons.com', 'change':23 },
{ 'name': 'Marge', 'email':'marge@simpsons.com', 'change':-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.define('MY.grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.simpsonsgrid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
]
});

Ext.onReady(function() {
var items = [{}];

var button1 = new Ext.Button({
text: 'Create Tab',
width: 150,
renderTo: Ext.getBody(),
handler: Ext.Function.bind(addTab, this, [ this.text ], true)
});

var tabPanel = Ext.createWidget('tabpanel', {
itemId: 'mytabpanel',
renderTo: Ext.getBody(),
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 500,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: items
});

function addTab(item,event,text,id){
var id = tabPanel.items.length;
var tab = tabPanel.add({
title: 'text-'+id,
itemId: 'id-'+id,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
closeAction: 'close',
closable: true,
border: false,
items: [
{
xtype: 'simpsonsgrid',
title: 'Simpsons Grid '+id
}]

});

tabPanel.doLayout();
tabPanel.setActiveTab(tab);
}
});


Scott.