PDA

View Full Version : custom component



mama
8 Jul 2010, 5:52 AM
Hi

How can we create custom component in extjs..?
is der is any simpler way?
In my application der is lot complex structure , so i cannot simply use grid,tab etc as given i need to modify and to give power to dem...
how can i do that..?
is der is any tutorial..?

kindly let me knw.tc

antonye
8 Jul 2010, 6:03 AM
Here's an example from my current codebase.

I have created a custom component of two input boxes - the idea is that you can input an amount (into txtValue box) and it will update the percent (txtPercent box) based upon another figure "total", or the other way round - you input a percent and it works out the value.




Ext.namespace('myCode.components');


...


myCode.components.cInput = Ext.extend(Ext.form.CompositeField,{


constructor:function(config){
// defines a number field for typed input.

var txtValue =new Ext.form.NumberField({
name: config.name,
id: config.name,
value: 0,
allowBlank: true,
allowNegative: false,
style: 'text-align: right',
width: 120
});

// defines a number field for typed input.


// must be a percentage (0-100)

var txtPercent =new Ext.form.NumberField({
minValue: 0,


maxValue: 100,
allowBlank: true,
allowNegative: false,
maxLength: 5,
style: 'text-align: right',
width: 40
});

// update %-age (of total) into txtPercent


txtValue.on('change',function(n){

var iTotal = Ext.getCmp('total').getValue();


if(iTotal !=''){

if(n.getValue()!=''){
var iPCT = n.getValue()/ iTotal;
if(txtPercent.getValue()!= iPCT){
txtPercent.setValue(iPCT *100);


}


}

}else{
txtPercent.setValue('');


}


});



// update value (of Total) into txtValue

txtPercent.on('change',function(n){

// update to only 0-100 %

if(n.getValue()>100){

n.setValue(100);


}

if(n.getValue()<0){

n.setValue(0);


}


var iTotal = Ext.getCmp('total').getValue();

if(iTotal !=''){
if(n.getValue()!=''){
var iVAL = iTotal *(n.getValue()/100);
if(txtValue.getValue()!= iVAL){
txtValue.setValue(iVAL);


}


}

}else{
txtValue.setValue('');


}


});


// config items for this custom component


config.fieldLabel = config.textLabel;

config.items =[
txtValue,
{xtype:'displayfield', value:'or'},


txtPercent,

{xtype:'displayfield', value:'%'}


];



// build it

myCode.components.cInput.superclass.constructor.apply(this,[config]);

}
});



and a typical constructor would look like this. I use a separate input box "total" which you can type into and it will trigger updates to the "child" boxes.




...


items:[
new myCode.components.cInput({
name:'income',
textLabel:'Income Required'
}),
new myCode.components.cInput({


name:'liquidity',
textLabel:'Liquidity Required'
}),
new myCode.components.cInput({


name:'accessShort',
textLabel:'Short Notice Access'
}),
new myCode.components.cInput({


name:'accessRestricted',
textLabel:'Restricted Access'
}),


{
xtype:'numberfield',
name:'total',
id:'total',
width:160,
fieldLabel:'Total Amount',
style:'text-align: right',
allowBlank:false,
allowNegative:false,
minValue:0,
listeners:{
change:function(self, newValue, oldValue){
// fire events to update dependencies


Ext.getCmp('income').fireEvent('change', Ext.getCmp('income'));
Ext.getCmp('liquidity').fireEvent('change', Ext.getCmp('liquidity'));
Ext.getCmp('accessShort').fireEvent('change', Ext.getCmp('accessShort'));
Ext.getCmp('accessRestricted').fireEvent('change', Ext.getCmp('accessRestricted'));
}
}

}

]


...

Condor
8 Jul 2010, 6:05 AM
From the Learning Center: Extending Ext Class (http://www.sencha.com/learn/Tutorial:Extending_Ext_Class)

Also useful: Writing a Big Application in Ext (http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/)

Animal
8 Jul 2010, 6:16 AM
http://www.sencha.com/learn/Tutorial:Creating_new_UI_controls