PDA

View Full Version : How To Load Grid Combo Store When Tab Is Activated



sportda
14 Oct 2010, 6:33 AM
I Have a dynamic combo box in a grid that needs it's items loaded when the tab the grid resides on is activated. Right now I'm seeing the ids rather than the strings until I drop down the combo box which is bad but also more items can be added to the database table that feeds the combo on the other tab so the combo needs to be reloaded ideally when the tab is activated that the grid resides on.

Here is where the window is configured that has the tabs each with a grid, I have a listener that is firing when the tab that contains the grid with the combo is activated...



var App = new Ext.App({});

Ext.onReady(function()
{
Ext.QuickTips.init();

var w = new Ext.Window
({
title: 'Horses/People',
height: 300,
width: 500,
modal: true,
layout: 'fit',
items:
[{
xtype:'tabpanel',
defaults:{layout:'fit'},
activeItem:0,
items:
[{
title:'Horses',
id:'horsestab',
xtype:'horses_grid',
autoScroll:true,
listeners: {
'activate': function() { alert('Need to load combo store here!'); }
}
},{
title:'People',
id:'personstab',
xtype:'persons_grid',
autoScroll:true
}]
}]
});
w.show();
});
Here is the code for the grid that has the dynamic combo box...


var Thorses_grid = Ext.extend(Ext.grid.GridPanel,
{
title: 'Horses',
frame: false,
height: 300,
width: 500,
enableHdMenu: false,
stripeRows: true,
viewConfig:
{
forceFit: true
},
editor: new Ext.ux.grid.RowEditor
({
saveText: 'Update'
}),
onAdd: function(btn, ev)
{
var u = new this.store.recordType({
name: '',
owner1_no: ''
});
this.editor.stopEditing();
this.store.insert(0, u);
this.editor.startEditing(0);
},


onDelete: function()
{
var rec = this.getSelectionModel().getSelected();
if (rec)
{
this.store.remove(rec);
}
},


initComponent: function()
{
var proxy = new Ext.data.HttpProxy
({
url: 'app.php/horses'
});

var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data',
messageProperty: 'message' // attribute in server response for user message...
},[
{ name: 'id' },
{ name: 'name', allowBlank: false},
{ name: 'owner1_no', allowBlank: false}
]);

var writer = new Ext.data.JsonWriter({
encode: false
});

var store = new Ext.data.Store({
id: 'horse',
restful: true,
proxy: proxy,
reader: reader,
writer: writer

});

var owners_store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields:['owner_id','owner_name'],
root:'owners'
}),
proxy: new Ext.data.HttpProxy({
url: 'load_owners.php'
})
});

var ownersCombo = new Ext.form.ComboBox({
store: owners_store,
displayField: 'owner_name',
valueField: 'owner_id',
hiddenName:'owner_name',
typeAhead: false,
triggerAction: 'all',
editable: false,
anchor: '55%',
allowBlank: false,
autoLoad: true,
mode: 'remote' // >modify
});


var config =
{
store: store,
plugins: [this.editor],
columns:
[{
header: "Name",
width: 100,
sortable: true,
dataIndex: 'name',
editor: new Ext.form.TextField({})
},{
header: "Owner",
width: 50,
sortable: true,
dataIndex: 'owner1_no',
editor: ownersCombo // new Ext.form.TextField({})
}],
tbar:
[{
text: 'Add Horse',
iconCls: 'silk-add',
handler: this.onAdd,
scope: this
}, '-', {
text: 'Delete Horse',
iconCls: 'silk-delete',
handler: this.onDelete,
scope: this
}, '-']
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
Thorses_grid.superclass.initComponent.apply(this, arguments);
},
onRender: function()
{
this.store.load(),
Thorses_grid.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('horses_grid', Thorses_grid);

Not sure at all how to make this happen. Any help is greatly appreciated!