PDA

View Full Version : xtype Instances With Different Properties.



j11extjs
13 Nov 2010, 2:11 AM
I have a nested xtype configuration that looks like the following (notice the nested items comboSearch, cbgSearchOptions and panelButtons all of which are xtypes themselves):


var contentPanel = {
xtype: 'panel',
id: 'ContentPanelId',
layout:'column',
border : false,
height: 50,
items: [
{
layout: 'form',
height: 50,
border: false,
xtype: 'panel',
bodyStyle: 'padding:0 18px 0 0',
// id: 'Panel1',
columnWidth: .9,
defaults: {anchor:'100%'},
items: [
comboSearch,
cbgSearchOptions
]
},
panelButtons
]
}
I also have a TabPanel

var searchTabPanel = {
xtype: 'tabpanel',to which I would like to add new tabs to later on. Inside each new tab is an instance of the contentPanel above as follows:


Ext.each(records, function(record) {

searchTabPanel.add({
title: record.data.Id,
items: contentPanel
}).show();(1) How do I change the configuration properties for each instance of my contentPanel? Like 'id' for the contentPanel, and store for the contained comboSearch.
(2) How do I do the same for the nested xtype configuration?

In my mind, this is how the immediate code above would look like:



Ext.each(records, function(record) {

var cntP = new contentPanel(record.data.Id, record.data.anotherProperty, record.data.Property2, record.data.PropertyForComboSearch, ...)

searchTabPanel.add({
title: record.data.Id,
items: cntP
}).show();It seems I may have to change how I constructed my initial xtypes as well. Thanks for any help, even if just to point me in the right direction.

plalx
13 Nov 2010, 6:23 AM
How do you expect to create a new instance of contentPanel when it's not even a constructor function, it's just a config object. To be able to do this, you will have to create a class by extending Ext.Panel. You will then be able to pass the configuration options that you want at instanciation time and perform the wanted logic inside the initComponent or constructor function of your class.

Look at the docs of Ext.extend function as well as this (http://www.sencha.com/learn/Tutorial:Extending_Ext2_Class) tutorial. It will help you understanding how to create custom classes.