PDA

View Full Version : Dynamical addition of the fields to the FieldSet



vvorobeychik
13 Aug 2012, 7:11 AM
Problem: I want to add the fields to the FieldSet control dynamically. On the first level of inclusion the functionality works without any problem. On the second level of inclusion it give me an error (I used ext-all-debug.js): "Line 25736. Error:Unable to get value of property 'dom'. Object is null or underfined".
I tried the same logic with the main container: no problem (it is commented out in the code in the CreateChildren() function). If it is not a bug in the ExtJS librarry, what do I do wrong?


<script type="text/javascript">
var m_BodyStyle = 'padding:5px 5px 0';
var m_repFieldStore = null;
var m_nCondCount = 0;
var m_nCondCurr = 0;
var m_CondAray = [];
var m_NumOperStore = null;
var m_StrOperStore = null;
Ext.onReady(function()
{
Ext.define('operator', {extend:'Ext.data.Model', fields:[{name:'operator', type:'string'}]});
var numOperData = [{'operator':'='},{'operator''>'}, {'operator':'>='},{'operator':'<'}, operator':'<='}];
m_repFieldStore = new Ext.data.JsonStore({storeId:'repFieldStore',
proxy:{type:'ajax', url:'worksproperly' (http://www.sencha.com/forum/'worksproperly'), reader:{type:'json', root:'reportFields'}},
autoLoad:true,
fields:['fieldName', 'fieldDesc', 'lookupSQL', 'dataType', {name:'isFloat', type:'boolean'}]
});
var pnlCond = Ext.create('Ext.form.Panel', {id:'pnlCond', frame:true, title:'Conditions', bodyStyle:m_BodyStyle,
width:490, height:400, renderTo:'tdConditions', autoScroll:true, //selModel:smRepFields,
tools:[{type:'plus', tooltip:'Add Condition', handler:AddCondition}]
});
});
//------------------------------------------------------------------------------
function AddCondition()
{
var opName = 'oper' + m_nCondCurr;
var radioGr = Ext.create('Ext.form.RadioGroup', {id:'radioGr' + m_nCondCurr,
columns:2, vertical:true, width:200,
items:[{boxLabel:'And', name:opName, inputValue:1, checked:true},{boxLabel:'Or', name:opName, inputValue:2}]
});
var fsCond = Ext.create('Ext.form.FieldSet',{id:'fsCond' + m_nCondCurr, width:450,
frame:false, border:0,
layout:{type:'column', align:'start', flex:1},
items:[
{xtype:'combobox', id:'condField' + m_nCondCurr, store:m_repFieldStore, fieldLabel:'Info Field',
valueField:'fieldName', displayField:'fieldDesc', labelWidth:60, typeAhead:true, layout:'column',
mode:'local', columnWidth:0.4, listeners:{select:CreateChildren}
},
{columnWidth:0.4, border:0, frame:false},
{xtype:'button', id:'btnDel' + m_nCondCurr, icon:'/images/remove.jpg',
layout:{type:'column', align:'start', flex:1},
text:'Delete', handler:DeleteCondition, columnWidth:0.15
}
]
});
var fsContainer= Ext.create('Ext.form.Panel',{id:'fsContainer' + m_nCondCurr, width:460,
frame:true, border:1, layout:'form', items:[fsCond]
}); if(m_nCondCount > 0)
Ext.getCmp('pnlCond').add(radioGr);
Ext.getCmp('pnlCond').add(fsContainer);
fsCond.doLayout();
Ext.getCmp('pnlCond').doLayout();
m_CondAray[m_nCondCount] = m_nCondCurr;
m_nCondCurr++;
m_nCondCount++;
}
//------------------------------------------------------------------------------
function DeleteCondition()
{
// get fieldset id
var nInd = Number(this.id.substr(6)); // 6 = length('btnDel')
for(var i = 0; i < m_CondAray.length; i++)
{
if(m_CondAray[i] == nInd)
{
Ext.getCmp('pnlCond').remove(Ext.getCmp('fsContainer'+ nInd), true);
Ext.getCmp('pnlCond').remove(Ext.getCmp('radioGr'+ nInd), true);
m_CondAray.splice(i, 1);
m_nCondCount--;
break;
}
}
}
//------------------------------------------------------------------------------
function CreateChildren(combo, recs, opts)
{
// get fieldset id
var nInd = Number(combo.id.substr(9)); // 9 = length('condField')
var fs = Ext.create('Ext.form.FieldSet',{id:'fs' + nInd, width:400,
frame:false, border:0, layout:'column',
items:[
{xtype:'combobox', id:'oper' + nInd + '_1', store:m_NumOperStore, fieldLabel:'Operator',
valueField:'operator', displayField:'operator', labelWidth:60, typeAhead:true, layout:'anchor',
mode:'local', columnWidth:0.3
},
{columnWidth:0.05, border:0},
{xtype:'numberfield', id:'value' + nInd + '_1', layout:'anchor', hideTrigger: true,
keyNavEnabled:false, mouseWheelEnabled:false, columnWidth:0.3
}
]
});
var obContainer = Ext.getCmp('fsContainer' + nInd);
// Ext.getCmp('pnlCond').add(fs); // this line works without any problem
obContainer.).add(fs); // this line causes the problem
}
//------------------------------------------------------------------------------
</script><
div align="center">
<table><tr><td id="tdRepFields"></td></tr><tr><td></td></tr></table>
<table><tr><td id="tdConditions"></td></tr></table>
</div>

scottmartin
11 Sep 2012, 12:10 PM
The following should help:



var fieldContainer = Ext.widget({
xtype: 'fieldcontainer',
layout: 'vbox'
});

var fieldText = Ext.widget({
xtype: 'textfield',
fieldLabel: 'Text'
});

var fieldNumb = Ext.widget({
xtype: 'numberfield',
fieldLabel: 'Text'
});

fieldContainer.add(fieldText);
fieldContainer.add(fieldNumb);

Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [ fieldContainer ]
});?


Scott.