PDA

View Full Version : Programmatically adding a datastore to ext designer generated code



crgrah
19 Mar 2012, 4:36 PM
Hi forum users and the sencha team,

Im having the following problem, this code generates no errors no does it render to

the specified 'LeftPanel', where is it going wrong?

/// <reference path="http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js" />
/// <reference path="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css" />


Ext.onReady(function () {
// Set up a model
Ext.define('Clients', {
extend: 'Ext.data.Model',
fields: [
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' }
]
});


var clientstore = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'Clients',
sorters: 'firstName',
getGroupString: function (record) {
return record.get('firstName')[0];
},
proxy: {
type: 'ajax',
url: 'data/clients.json',
reader: {
type: 'json',
root: 'users'
}
}
});


var ClientList = new Ext.view.View({
store: clientstore,
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
grouped: true,
indexBar: true,
//Columns definition
columns: [
{ dataIndex: 'FirstName' },
{ dataIndex: 'LastName' }
],
//Render grid to dom element with id set to panel
renderTo: 'LeftPanel'
});
ClientList.refresh();
});

aconran
20 Mar 2012, 8:53 AM
What is 'LeftPanel'? If it is a plain old div on the page with an id of 'LeftPanel' then you want to give your View a width and a height.

If 'LeftPanel' is something more intelligent like an Ext.Panel, you are probably looking to add the ClientList to that panel via the Container's add api and use layout management.

crgrah
20 Mar 2012, 10:28 PM
So can you show me a code example of how to add it?

aconran
22 Mar 2012, 1:54 PM
Something along the lines of


var leftPanel = Ext.getCmp('LeftPanel')
leftPanel.add(ClientList);
leftPanel.doLayout();