Items not rendering

[pc.adams@live.co.uk]

Hi All,

I am trying to render out a class (follows) but it does not render at all. Its based arround several different examples, and I have cut it down to the bare bones. If i add a renderTo to the combobox and set it to a div with an ID outside of the class it renders correctly, but I cannot get it to render within the class items array



Ext.define('Ext.chooser.IconBrowser', { extend: 'Ext.view.View', alias: 'widget.iconbrowser', id: 'mainBrowser', uses: ['Ext.form.Panel', 'Ext.form.field.ComboBox'], initComponent: function () { Ext.define('State', { extend: 'Ext.data.Model', fields: [ { type: 'string', name: 'abbr' }, { type: 'string', name: 'name' }, { type: 'string', name: 'slogan' } ] }); // The data for all states var states = [ { "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" }, { "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" } ]; // The data store holding the states; shared by each of the ComboBox examples below mainStore = Ext.create('Ext.data.Store', { model: 'State', data: states }); this.items = [ Ext.create('Ext.form.field.ComboBox', { fieldLabel: 'Select a single state', displayField: 'name', width: 320, labelWidth: 130, store: mainStore, queryMode: 'local', typeAhead: true })] }
});

[mitchellsimoens]

4 things...


You shouldn't use the Ext namespace. You should have a root namespace that is descriptive of your app.
You shouldn't use id unless debugging. In this case, all instances will share the same id so if you create two instances, the first will be lost.
You shouldn't use Ext.define within another class. Your model should be outside the IconBrowser.
You aren't calling callParent at the end of the initComponent. Add this.callParent(arguments); after your define your items.

[pc.adams@live.co.uk]

Thats excellent advice, thank you

I was using the ID's to assign styles to a particular element and at the moment I dont ever see more than one them appearing at once; and at the moment I am debugging, but shall endeavour to remove them soon

I'll change the namespace now - I was using the samples that you provide as a starting point and just carried on using them

with regards to "Ext.Define" do you mean that each define should never be nested? What is a good method of passing some parameters (e.g. a store) to the other define in this case?

What does this.callparent actually do? I am wondering if this is the root cause of the problems - when I add the renderTo it all starts to work!

[pc.adams@live.co.uk]

Your advice is excellent - is there any document which explains this? I'm quite new to sencha and have gone through the examples/samples, but have not found a simple "getting started" basics through to a complete walkthough

[mitchellsimoens]

You shouldn't use Ext.define within anything. Each new class made with Ext.define should have it's own file, this will help with organization and maintenance. If you need to pass parameters to a class, put it in the configuration when instantiating the class.