PDA

View Full Version : Problem on a Grid inside a Tab



jlopescruz
17 Feb 2010, 4:25 PM
I'm pretty new to Extjs and i'm having a problem with a grid inside a tab.

I have the main file (Main.js) where i define the viewport, and from a tab inside the center panel I want to call a grid defined in (noticias.js).

How can I call it?

Main.js


var c_panel= new Ext.TabPanel({
id:'c_panel_id',
xtype: 'tabpanel',
region: 'center',
margins: '0 5 5 5',
border: true,
resizeTabs: true,
minTabWidth: 115,
tabWidth: 150,
enableTabScroll: true,
activeTab: 0,
items:[{
title: 'Benvindo',
html: 'Aqui será o conteúdo inicial'
}]
});

(...)

function onItemClick(item){
addTab(1,item.text);
}

function addTab(index,nome) {
var tab=c_panel.add({
id:nome,
title:nome,
width: 150,
contentEl:noticias.init(),
//html: 'Conteúdo de ' + (nome) + '<br/><br/>' + noticias.init(),
closable: true
});
//noticias.init();
tab.show();

}


Noticias.js
Ext.namespace('noticias');
Ext.QuickTips.init();

noticias.init = function() {

var store = new Ext.data.Store({
url: 'noticias.php',
reader: new Ext.data.JsonReader({
root:'rows',
totalProperty:'results',
id:'id'
}, [
'idNoticias',
'sumario',
'corpo',
{name: 'criado', type: 'date', dateFormat: 'Y-m-d'},
{name: 'modificado', type: 'date', dateFormat: 'Y-m-d'},
'imagem'
])
});

store.load();

var grid = new Ext.grid.GridPanel({
//renderTo:document.body,
frame:true,
autoHeight:true,
title: 'Noticias',
autoHeight:true,
autoWidth:true,
store: store,
columns: [
{header: "ID", dataIndex: 'idAssociados'},
{header: "Sumário", dataIndex: 'sumario'},
{header: "Corpo", dataIndex: 'corpo'},
{header: "Criado", dataIndex: 'criado', sortable: true, xtype: 'datecolumn', format: 'Y-m-d'},
{header: "Modificado", dataIndex: 'modificado', sortable: true, xtype: 'datecolumn', format: 'Y-m-d'},
{header: "Imagem", dataIndex: 'imagem'}
],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: 'Mostrando resultados {0} - {1} de {2}',
emptyMsg: 'Não existem registos para mostrar'
})
}).show();

}


Thank you.

jlopescruz
17 Feb 2010, 6:55 PM
I solve my problem,
here is my solution, it might help somebody else.

Tks:

Noticias.js


Ext.namespace('noticias');
Ext.QuickTips.init();

noticias.init = function() {

var store = new Ext.data.Store({
url: 'noticias.php',
reader: new Ext.data.JsonReader({
root:'rows',
totalProperty:'results',
id:'id'
}, [
'idNoticias',
'sumario',
'corpo',
{name: 'criado', type: 'date', dateFormat: 'Y-m-d'},
{name: 'modificado', type: 'date', dateFormat: 'Y-m-d'},
'imagem'
])
});

store.load();

Ext.getCmp('viewport_id').findById('c_panel_id').add({
id:'noticias_id',
title:'Notícias',
width: 150,
closable: true,
items: [
new Ext.grid.GridPanel({
frame:true,
title: 'Listagem de todas as Noticias',
height:500,
autoWidth:true,
store: store,
columns: [
{header: "ID", dataIndex: 'idAssociados'},
{header: "Sumário", dataIndex: 'sumario'},
{header: "Corpo", dataIndex: 'corpo'},
{header: "Criado", dataIndex: 'criado', sortable: true, xtype: 'datecolumn', format: 'Y-m-d'},
{header: "Modificado", dataIndex: 'modificado', sortable: true, xtype: 'datecolumn', format: 'Y-m-d'},
{header: "Imagem", dataIndex: 'imagem'}
],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: 'Mostrando resultados {0} - {1} de {2}',
emptyMsg: 'Não existem registos para mostrar'
})
})
]
}).show();

}