PDA

View Full Version : Problem with creation of dynamic ext components



jai@15
14 Aug 2013, 7:00 PM
Hi,
I am new to extjs ,i have a requirement of creating ext components .I some have managed by using for loops but the problem is its taking more time to load and also i want to add load mask there to indicate that that particular section in loading. can anyone please help in resolving this issues.

Thank you

Gary Schlosberg
19 Aug 2013, 2:41 PM
I'm not able to understand exactly what you are trying to do. Do you have any code that you've written so far, or do you have an example that you are trying to emulate?

jai@15
19 Aug 2013, 5:24 PM
Here i need to add some fields to be added dynamically based on the database values so for that i am getting the data through azax request and adding

please find the below example code that i am using for adding

for (var i = 1; i <1000; i++) {

var container = Ext.getCmp('addTOContainer');

var config = Ext.create('Ext.container.Container', { layout: {
type: 'hbox'
},
width: 400,
renderTo: "MYDIV",
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'Start date'
},{
xtype: 'datefield',
name: 'endDate',
fieldLabel: 'End date'
}]
});

container.add(config);
}

This is working but a bit time taking to load,So i planned to loadmask so that it indicates that the form is loading . I tried to add loadmask but i failed.

please let me know if i am using some false practice.

Please let me know if there are any other ways to achieve this requirement .
Thank You.:)

evant
19 Aug 2013, 6:03 PM
Yes, there's a problem with the way you're doing it. When you add a new component to a container, the container will layout, which means you'll trigger 1000 layouts (bad!).

Compare:



Ext.require('*');

Ext.onReady(function() {

// Toggle me
var suspend = true;

var ct = new Ext.container.Container({
renderTo: document.body
});

console.time('Run');
if (suspend) {
Ext.suspendLayouts();
}
for (var i = 0; i < 50; ++i) {
ct.add({
layout: 'hbox',
items: [{
flex: 1,
html: 'Item ' + (i + 1) + '.1'
}, {
flex: 1,
html: 'Item ' + (i + 1) + '.2'
}]
});
}
if (suspend) {
Ext.resumeLayouts(true);
}
console.timeEnd('Run');

});

jai@15
21 Aug 2013, 10:09 PM
Hi evant , I tried the solution given its working fine but when i am using more than one hbox ,it is displaying empty in that particular contianer

please find the below code

var suspend = true;

for (var i = 1; i < 3; ++i) {
ct.add({
padding:'0 0 5 0',
layout: 'column',
border:true,
items:[{
// layout:'anchor',
columnWidth:0.6,
items:[{
xtype:'label',
text:'Goal : '+i
},{
xtype:'textfield',
fieldLabel:'Title of Goal',
name:'titleOfGoal'+i,
id:'titleOfGoal'+i,
labelAlign: 'side',
padding:'3 0 0 20',
width:400,
readOnly:true
},{
xtype: 'container',
layout: 'hbox',
border:false,
padding:'0 0 2 0',
items:[{
xtype:'slider',
name: 'weightSlider'+i,
id: 'weightSlider'+i,
fieldLabel:'Weight',
labelAlign:'side',
labelWidth:100,
padding:'3 0 0 20',
width:250,
//flex:1,
increment: 1,
minValue: 1,
maxValue: 100,
tipText: function(thumb) {
return Ext.String.format('<b>{0} %</b>', thumb.value);
}
},{
xtype:'splitter'
},{
xtype:'textfield',
name: 'weightValueOfSlider'+i,
id: 'weightValueOfSlider'+i,
width:30,
padding:'0 0 0 5',
readOnly:true
}]
},{
xtype:'fieldset',
items:[{
xtype:'label',
text:'Goal Category'
},{
xtype:'container',
id:'goalCategory'+i,
border:false
},{
xtype:'htmleditor',
fieldLabel:'Description of Goals',
name:'goalDescription'+i,
id:'goalDescription'+i,
anchor:'100%',
height:100,
readOnly:true
}]
},{
xtype:'fieldset',
items:[{
xtype:'label',
text:'Action Plan'
},{
xtype:'container',
id:'actionPlan'+i,
border:false
}]
},{
xtype:'fieldset',
items:[{
xtype:'datefield',
labelAlign:'side',
labelWidth:150,
padding:'10 0 5 0',
fieldLabel:'Target Completion Date',
name:'targetCompletionDate'+i,
id:'targetCompletionDate'+i,
readOnly:true
},{
layout:'hbox',
border:false,
items:[{
xtype:'label',
text: 'Active?',
padding:'0 0 0 70'
},{
xtype:'label',
width:30
},{
xtype:'checkbox',
padding:'0 0 0 25',
name: 'activeGoal'+i,
id: 'activeGoal'+i,
fieldCls:'',

inputValue:'Active',
boxLabel:' (This Goal is Active)',
flex:1,
listeners:{
change: function(cb,nv){
if (nv) {
cb.boxLabelEl.update(' (This Goal is Active)');
} else {
cb.boxLabelEl.update(' (This Goal is Inactive)');
}
}
}
}]
},{
xtype:'htmleditor',
fieldLabel:'Comments and Updates',
name:'targetComments'+i,
id:'targetComments'+i,
anchor:'100%',
height:100,
readOnly:true
}]
}]
}
]
});
}

if (suspend) {
Ext.resumeLayouts(true);
}
please let me know if i am going wrong anywhere

Thank You :).