View Full Version : Add xtype components to a custom container component

31 Jan 2013, 12:29 AM

I have a lot of nested container, and some can be reused in different par of my project, so I was thinking of making a custom components out of it. (Kinda view like component)

The purpose is the same than for website template: only a small part can change.

So I made this:

Ext.define('com.nflabs.peloton.web.PopUp', { extend: 'Ext.window.Window',

config : {

constructor: function(config){
return this;

initComponent : function(){

Ext.apply(this, {

layout: {type : 'vbox', align: 'stretch'},

style: 'padding: 10px;',
modal : true,
draggable: false,
constrain: true,
resizable: false,
bodyCls: 'innerWindow',

items : [
xtype: 'container',
autoScroll: true,
width : 550,
minWidth : 350,
minHeight : 140,
layout: {type : 'vbox', align : 'stretch'},
style: 'background-color:blue;padding-bottom: 20px; padding-left: 20px; padding-right: 20px; margin-top: 20px;',
items: [


and I call it like that:

this.settingWindow = Ext.create("com.nflabs.peloton.web.PopUp",{
contentWidth: 550,
content : [
xtype : 'label',
text : "Please select widget to add"


However nothing happened. I realized that is the content is in xtype Json kinda format, it doesn't build the object, when If I build the label with Ext.create() it works.

Since the basic items: [] of a component can accept xtype Json, how can I do it too?

Thank you

1 Feb 2013, 12:45 PM
Let's look what your doing. You are trying to pass in an array of items via the content config. You are trying to use that content within the items array. So you are having an array within an array. So instead of this:

items : [

do this:

items : this.content