PDA

View Full Version : override fieldset?



jinjianhe
9 Jan 2012, 12:47 AM
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 used by extjs.4.0, it does not show the plus icon on the fielset,the attached image is what i wanna show30561

mitchellsimoens
9 Jan 2012, 9:16 AM
So all you are wanting is to add a tool to the fieldset?

jinjianhe
9 Jan 2012, 4:52 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.