Beginner question - Create dynamically items inside of container

[Ocelyn]

Hello everybody,

I'm from the Flash world, and I'm really exited to improve my skills on Sencha !

I read a lot and watch many videos but I'm stuck at this point.

I have a view : Home.js where I create my class SimpleBlogContent, I pass a labelButton and an array

items : [
			{
				xclass : 'GS.view.SimpleBlogContent',
				labelButton: 'Let\'s do it!!',
				arrayPictures: [ '01.jpg', '02.jpg', '03.jpg' ]
			}
		],

Inside of my class SimpleBlogContent I want to achieve 2 things.

Ext.define('GS.view.SimpleBlogContent', {
	extend: 'Ext.Container',
	xtype: 'simpleblogContent',
	
	config: {
		labelButton : 'undefined',
		arrayPictures: [],
		
		constructor: function (config)
		{
			alert(this.getArrayPictures().length);
			
			var configItemsArray = [];
			
			for (var i=0; i< this.getArrayPictures().length; i++)
			{
				var buttonConfig = {
					xtype: 'button',
					text: this.getArrayPictures()[i] 
				};
				 configItemsArray.push(buttonConfig);
			}
			config.items = configItemsArray;
			this.callParent(arguments);
		},
		
		items : [
			{
				xtype : 'button',
				id : 'validButton',
				ui : 'confirm',
				name : 'boutonvalid',
				text : 'I dont want this label but the dynamic',
				handler : function(){
					alert(this.parent.getArrayPictures());
				}
			}
		]
	}
});

I have a button created in items [] and I want to set the text with the config variable labelButton.

I want also create few buttons dynamically based on the array, I'm trying to do it inside of the constructor as I saw in some board, but it's not working, I have only the button created in items[]

Thank you so much for your help !

Ocelyn

[Maarten Nieber]

Inside the constructor of your container, you can call

this.add(anotherButton);

(assuming that anotherButton is an instance of Ext.Button)

[Ocelyn]

Thank you for your answer,

I'm not sure I completly understand, I try to implement your line but it didnt work

Thanks you again for your help !

Ocelyn

[Ocelyn]

Hello, finally I have been able to find a way to build dynamically my buttons :

Ext.define('GS.view.SimpleBlogContent', {
	extend: 'Ext.Container',
	xtype: 'simpleblogContent',
	
	config: {
		labelButton : 'undefined',
		arrayPictures: [],
	},
	
	constructor: function( config )
	{	
		this.callParent(config);
		for( var i=0; i<3; i++ ) {
			this.add(
				{xtype : 'button',ui : 'confirm'}
			);  
		}
		this.initConfig(config);
	}
});

But I'm not able to access to the parameters in config 'labelButton ' and 'arrayPictures', inside of the constructor and since I've build the constructor class I can't access it even from outside of constructor,

Thanks for your help one more time !

Ocelyn

[Maarten Nieber]

Instead of overriding the constructor, you can also implement the

initialize

function, which is called automatically once the object is constructed. That way, you don't have to call callParent.

When I dynamically create widgets, I do not use the configs. Instead, I create the member widgets using

var anotherButton = Ext.create("Ext.Button");
this.add(anotherButton);

Maybe this is not the officially best way, but it works for me (since you create the members explicitly, you can access them without problems).

[Ocelyn]

Hello Maarten!

Thanks for your answer it's working perfectly! But I'm curious to know if using the constructor is better for the performance, is there someone who could tell us about that?