Programmatically adding a datastore to ext designer generated code

[crgrah]

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]

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]

So can you show me a code example of how to add it?

[aconran]

Something along the lines of


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