PDA

View Full Version : setActiveItem and Grid no showing up



rvent
10 Aug 2009, 1:40 PM
Hello,

I have a page with 3 div's entry_panel, floor_panel and info_panel. The default activeItem is info_panel. When i load my page it works, then when i click on my button the activeItem is changed to entry_panel i see the text and the background color associated with that div, but the Grid never shows up.

ui.js


var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var entryCM = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Serial#", width: 100, dataIndex: 'serial_number'},
{header: "In", width: 140, dataIndex: 'created_at'},
{header: "Updated", hidden: true, width: 140, dataIndex: 'updated_at'},
{header: "Assigned", hidden: true, width: 140, dataIndex: 'assigned_at'},
{header: "Completed", hidden: true, width: 140, dataIndex: 'completed_at'},
{header: "Part#", width: 80, dataIndex: 'part_number'},
{header: "Bake", width: 60, dataIndex: 'bake'},
{header: "Hot", width: 60, dataIndex: 'hot'},
{header: "Priority", width: 60, dataIndex: 'priority'},
{header: "Location", width: 80, dataIndex: 'sequence_location'},
{header: "Employee", width: 80, dataIndex: 'last_name'}
]);

var entryGrid = new Ext.grid.GridPanel({
id: 'entry_grid',
store: entryDS,
width: 900,
autoHeight: true,
margins: '0 5 5 5',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
icon: '/public/icons/page_add.png',
text: 'Add Sequence',
handler: function(){
var e = new sequence_log({
name: 'New Guy',
email: '[email protected]',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
entryDS.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
}],
cm: entryCM
});


layout.js


function mkEntryMode()
{
var tb = Ext.getCmp('tbTopMenu');

// <--- Always 1 since we want to leave the menu item in the TB
while(tb.items.length > 1)
tb.remove(tb.items.items[1].id);


tb.add('-',{
id: 'btnAddSequence',
icon: '/public/icons/add.png',
text: 'Add Sequence'
}, '-');

tb.render();

Ext.getCmp('content_panel').layout.setActiveItem('entry_panel');
var ds = Ext.StoreMgr.get('entry_ds');

ds.load();
ds.on('load', function(){
Ext.getCmp('entry_grid').render(Ext.getDom('entry_panel'));
});

}

function makeLayout()
{
var topMenu = new Ext.Toolbar({
id: 'tbTopMenu',
renderTo: 'top_menu',
autoWidth: true,
items: [{
id: 'btnModeToggle',
text: 'Click Me!',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Menu</b>',
{
text: 'Floor View',
handler: resetMenu
}, {
text: 'Entry Mode',
handler: mkEntryMode
}, {
text: 'Admin Mode'
}
]}
},'-']
});

var entryPanel = {
id: 'entry_panel',
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'entry_panel'
};

var floorPanel = {
id: 'floor_panel',
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'floor_panel'
};

var infoPanel = {
id: 'info_panel',
layout: 'fit',
bodyStyle: 'padding:25px',
contentEl: 'info_panel'
};

var contentPanel = new Ext.Container({
id: 'content_panel',
layout: 'card',
border: false,
defaults: {border: false},
autoWidth: true,
height: 600,
margins: '5 5 5 0',
renderTo: 'content',
items: [ entryPanel, floorPanel, infoPanel ]
});

Ext.getCmp('content_panel').layout.setActiveItem('info_panel');

}


Any ideas..?

Thanks