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

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'

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.

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

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

var leftPanel = Ext.getCmp('LeftPanel')