PDA

View Full Version : Creating controls dynamically



rajdev0791
29 Jun 2014, 6:06 AM
I want to create a form Panel that can create textboxes and a adjacent delete icon dynamically. It seems to be almost functional , except that the icons are not being rendered dynamically. The code in the onClick is duplicated. Maybe i can move it to a prototype later once functional.

[index.html
<html>
<head>
<title>Menus on Toolbars</title>
<link rel="stylesheet" type="text/css" href="/extJS4.2/resources/ext-theme-classic/ext-theme-classic-all.css">
<script type="text/javascript" src="/extJS4.2/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
.add16 {
background-image:url('/images/buttonAdd.png');
}
</style>
</head>
<body>
</body>
</html>
]

[
app.js
Ext.onReady(function () {
function controlIdFactory(incr) {
if (!this.controlId) {
this.controlId = 0;
} else {
this.controlId = this.controlId + 1;
};
};
var controlFactoryInstance = new controlIdFactory();

Ext.create('Ext.form.Panel', {
renderTo: document.body,
width: 400,
tbar: [{
xtype: 'buttongroup',
items: [{
text: 'Add',
iconCls: 'add16',
scale: 'small',
listeners: {
'click': function () {
//alert('Add invoked...');
debugger;
var form = Ext.ComponentQuery.query('form')[0];
//var form = Ext.getCmp('myForm');
form.add({
xtype: 'textfield',
fieldLabel: 'Name',
width: 330,
allowBlank: false,
margin: "5 0 5 5",
id: 'firstName' + controlFactoryInstance.controlId
}, {
xtype: 'image',
src: '/images/buttonDelete.png',
margin: "5 0 5 5",
id: 'deleteIcon' + controlFactoryInstance.controlId
});
form.doLayout();
}
}
}]
}],
items: [{
xtype: 'form',
id:'dynForm',
border: false,
width: 360,
layout: {
type: 'table',
columns: 2,
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
width: 330,
allowBlank: false,
margin: "5 0 5 5",
id: 'firstName' + controlFactoryInstance.controlId
}, {
xtype: 'image',
src: '/images/buttonDelete.png',
margin: "0 0 0 5",
id: 'deleteIcon' + controlFactoryInstance.controlId,
listeners: {
'afterrender': function (comp) {
var element = comp.getEl();
element.on('click', function () {
//alert(Ext.ComponentQuery.query('panel > form > textfield[name=firstName]')[0].getValue()); //This works
//Ext.ComponentQuery.query('panel > form > textfield[name=firstName]')[0].remove();
var formPanel = Ext.ComponentQuery.query('panel > form')[0];
var controlId = element.id.substring(10);
var textField = Ext.getCmp('firstName' + controlId);
var imageField = Ext.getCmp('deleteIcon' + controlId);
formPanel.remove(textField);
formPanel.remove(imageField);
formPanel.doLayout();
});
}
}
}]
}]
});
});

]

jay@moduscreate.com
30 Jun 2014, 7:15 AM
No one can read this. 1) Post your code within [ code ] tags or use fiddle.sencha.com

rajdev0791
30 Jun 2014, 2:45 PM
Ignore the previous code. look at https://fiddle.sencha.com/#fiddle/77g. 1) one issue i notice is the layout formatting. 2) code around the 'afterrender' event can be improved. any suggestions. 3) since i am using componentquery, isnt there a way in the deleteicon listener to get its previous sibling. I tried nothing worked.

rajdev0791
30 Jun 2014, 2:47 PM
4) you would observe its being added in the beginning, which is incorrect

rajdev0791
1 Jul 2014, 4:41 AM
Very strangely apart from the icons not being rendered. overall it seems to look good in fiddle but if you take the whole code and run it from your App.js you would observe that the icons are not being rendered in the table. Anybody any clue ?