PDA

View Full Version : add a tool to fieldset



jinjianhe
10 Jan 2012, 4:54 PM
yes, i wanna add a tool to the fieldset, when click the plus icon, the fieldset will be cloned and added to the below of the exsiting fieldset, and click the minus icon, the added fieldset will be canceled, thx.

Ext.require('Ext.form.FieldSet', function() {
Ext.override(Ext.form.FieldSet, {
dynamic : false,

/**
* Clones a column of form *fields* within a fieldset untill the required amount specified is reached
* @param {Number} card Number of clones required. When no card is specified, the current clones will be returned
* @return {Array} required clones of type {Ext.form.FieldSet}
*/
clones : function(card) {


var panel = this.ownerCt.ownerCt;
var master = this.ownerCt.ownerCt;
var form = master.items.itemAt(0);
//var form = Ext.getCmp('form');
var rowsCloned = form.items.length -1;


if ( Ext.isEmpty(card)) {
var form = master.items.itemAt(0);
// var form = Ext.getCmp('form');
return (form.items.length -1); // number of rows in form only one column per form
}


//foreach column add a number of clones in each row
master.items.each(function(item,index,length){
var form= item;

var colIndex = index;
var colLength = length;


for ( var numOfClones = rowsCloned ; numOfClones < card ; numOfClones ++ ) {
var row = numOfClones;
var clone;
var field = form.items.itemAt(0); //always copy the first field


//last cloned column field add minus tool
if (colIndex== (colLength-1)){
clone = field.cloneConfig({
iconCfg : {cls:'x-tool x-tool-minus',clsOnOver:'x-tool-minus-over'},
listeners :{
'onIcon' : {
fn: function(field) {
var form = field.ownerCt;
var fieldset = form.ownerCt;
var rowNum = form.items.indexOf(field);


//remove every field in row(n) for each form
//forms only contain one column
fieldset.items.each(function(item,index,length){
var form = item;
var fieldset = form.ownerCt;
field = form.items.itemAt(rowNum);
var item = Ext.get(field.el.findParent('.x-form-item'));
item.remove();
form.remove(field);
form.doLayout();
},this);
}
}
},
clone:true,
template:field
});
form.insert(numOfClones+1,clone);
}else{
clone = field.cloneConfig({
clone:true,
template:field
});
form.insert(numOfClones+1,clone);
}
} //for end
},this); //columns end


},

//onRender : Ext.form.FieldSet.prototype.onRender.createInterceptor(function(ct, position) {
onRender : Ext.Function.createInterceptor(Ext.form.FieldSet.prototype.onRender, function(ct, position) {
if ( this.dynamic) {
if ( this.clone ) {
this.tools = [ {type:'minus', handler: function(event, toolEl, fieldset){
var panel = fieldset.ownerCt;
panel.remove(fieldset,true);
panel.doLayout();
}}
];
} else {
this.tools = [ {type:'plus', handler: function(event, toolEl, fieldset){
var numOfClones = fieldset.clones();
if ( !Ext.isEmpty(fieldset.maxOccurs) ) {
if ( fieldset.maxOccurs <= numOfClones + 1) {
fieldset.fireEvent('maxoccurs',fieldset);
return;
}
}
var panel = fieldset.ownerCt;
fieldset.clones(numOfClones+1);
panel.doLayout();
}}
];
}
}
})
})
});
above source is used based on extjs3.0, it works fine, however it does not show the plus icon on the fielset based on extjs4.0,the attached image is what i wanna show
30610