PDA

View Full Version : Trouble with Instances of a grid panel with their own instance of a store



WagsMax
11 Oct 2012, 5:47 PM
I can't seem to figure out how to do this... what I want is multiple instances of a grid panel, that should create their own instance of a store to hold that panel's data. With my code below, the grid always shows up empty. Can anyone see the problem?


My store:

Ext.define('MyApp.store.Contacts', {
extend: 'Ext.data.Store',
storeId: 'contactsStore',
alias: 'store.contacts',


autoLoad: true,
model: 'MyApp.model.Contacts',
proxy: {
type: 'memory'
}
});


My model (removed some fields for brevity):

Ext.define('MyApp.model.Contacts', {
extend: 'Ext.data.Model',
alias: 'model.contacts',
fields: [
{
name: 'contact_id',
type: 'string',
defaultValue: ''
},
{
name: 'contact_number',
type: 'string',
defaultValue: ''
},
{
name: 'address_name',
type: 'string',
defaultValue: ''
}

]
});


My grid panel:

Ext.define('MyApp.view.CaseContacts', {
extend: 'Ext.grid.Panel',
alias: 'widget.casecontacts',
itemId: 'casecontacts',

frame: false,
title: 'Contacts',
bodyPadding: 5,
closable: true,
autoDestroy: true,
autoScroll: true,

// custom configs
config: {
case_record: null
},

features: [{
ftype: 'filters',
encode: true,
local: true
}],


columns: [
{ text: 'Name', dataIndex: 'address_name', filterable: true, filter: { type: 'string'} },
{ text: 'Address', dataIndex: 'address', filterable: true, filter: { type: 'string'} },
{ text: 'Main Phone', dataIndex: 'phone_main', filterable: true, filter: { type: 'string'} },
{ text: 'Work Phone', dataIndex: 'phone_work', filterable: true, filter: { type: 'string'} },
{ text: 'Mobile Phone', dataIndex: 'phone_mobile', filterable: true, filter: { type: 'string'} },
{ text: 'Email', dataIndex: 'email', filterable: true, filter: { type: 'string'} },
{ text: 'Notes', dataIndex: 'notes', filterable: true, filter: { type: 'string'} }
]

});





The part of the controller code that creates/loads the store and displays the grid panel. The console.log() does show records being added to the store, so I know the store has data. I assign the store config with store: contactsStore, but no data shows up.

// load the Contacts store from xml data
var contactsStore = Ext.create('MyApp.store.Contacts');
contactsStore.removeAll();
nodes = xpath.selectNodes("//*/contacts/*");
for (i = 0; i < nodes.length; i++) {
var item = Ext.create('MyApp.model.Contacts');
// disassemble
xpathtemp.loadXML(nodes[i].me.xml);
nodestemp = xpathtemp.selectNodes("//contact/*");
for (j = 0; j < nodestemp.length; j++) {
try { item.set(nodestemp[j].nodeName, nodestemp[j].text); } catch (e) {}
}
contactsStore.add(item);
}
console.log(contactsStore.getCount() + " records in Contacts store");
// the above statement shows records in the Contacts store

// CaseContacts
var casecontactsPanel = Ext.create('MyApp.view.CaseContacts', {
xtype: 'casecontacts',
itemId: 'casecontacts' + record.get('case_id'),
tabConfig: {
tooltip: 'Contacts'
},
store: contactsStore,
case_record: record
});

// create the master tab panel
var thePanel = Ext.create('MyApp.view.CaseTabs', {
xtype: 'casetabs',
itemId: 'casetabs' + record.get('case_id'),
title: record.get('case_number'),
case_record: record
});

// add tab(s)
thePanel.add(casecontactsPanel);
thePanel.setActiveTab(thePanel.items.items.length - 1);


// display the master tab panel
Ext.getCmp('maintabs').add(thePanel);
Ext.getCmp('maintabs').setActiveTab(Ext.getCmp('maintabs').items.items.length - 1);

vietits
11 Oct 2012, 6:19 PM
Have you checked to make sure each record in store has correct data?

WagsMax
11 Oct 2012, 8:58 PM
Yes, the store has valid data in it. I am baffled.

vietits
11 Oct 2012, 10:48 PM
Try to set autoLoad to false. Setting autoLoad to true will cause store loading data from contactsStore.data which is null. Because this loading is deferred so it will happen after you've created and added data to it so it will clear all data you have added to contactsStore.


Ext.define('MyApp.store.Contacts', {
extend: 'Ext.data.Store',
storeId: 'contactsStore',
alias: 'store.contacts',
autoLoad: false,
model: 'MyApp.model.Contacts',
proxy: {
type: 'memory'
},
// debug
listeners: {
load: function(){
console.log('store loaded');
}
}
// debug
});

WagsMax
12 Oct 2012, 7:16 AM
Setting autoload to false did it!!! Thank you.
Now I just have one question... little red triangles appear in the upper left corner of every field, and I am assuming that ext thinks these fields are all dirty... how can I get rid of these triangles after first loading the store?

WagsMax
12 Oct 2012, 8:29 AM
Answer to little red triangles... I forgot to add a contactsStore.sync() after loading the store. All better now :)