PDA

View Full Version : Extend button to have metadata



aaronbartell
15 Oct 2010, 9:08 AM
I am trying to learn how to do my first user extension. My need is that I want to store metadata values with the declaration of a button in an Ext.FormPanel. The specific scenario of metadata involves wanting to store the forms that should be submitted when a particular button is pressed.

Here's a sample of what I want to do when defining a form panel and it's buttons:


var pnl1 = new Ext.FormPanel({
items:[
{
xtype:'textfield',
fieldLabel:'User Id',
id:'USRID',
}
],
buttons:[
{
id:'btnNext1A',
text:'NEXT',
handler: btnHandler,
submitForms: [{'form1', 'form2', 'form3'}]
}
]
});
Here is how I want my generic button handler to accesses the submitForms public array property:



function btnHandler(button, event){
Ext.Ajax.request({
url:pgmNam,
params:getFormVars(button.submitForms) + '&action=' + button.getId(),
success: function(r, o) {
// Process response
},
failure:function(o,r){
// Process fail
}
});
} Here is my attempt at extending the base functionality of the Ext.Button implementation:



Ext.Button = Ext.extend(Ext.Button, {
constructor: function(config) {
MyPanel.superclass.constructor.apply(this, arguments);
},
submitForms:[]
});
When I run a sample of the above code I get an "invalid object initializer" error on this line:


submitForms: [{'form1', 'form2', 'form3'}]I have tried a variety of other syntaxes for the submitForms property, but nothing is getting rid of the Javascript initialization error. Could somebody point out my error or point me to a tutorial that deals with extending existing components with new properties (I looked at the example at Sencha.com but didn't see one that addressed this type of scenario).

Thanks,
AaronBartell.com

winklerd
15 Oct 2010, 10:13 AM
You don't need to extend a button just to add a field. Get rid of your Ext.extend statement and see what it does.

For future reference, if you override the constructor, you MUST call it explicitly in your override function. Also, I generally recommend extending to a new object name:


MyButton = Ext.extend(Ext.Button, {
constructor: function(config) {
MyButton.superclass.constructor.call(this,config);
},
property: 'value',
customFunction: function() {
//Do stuff here
}
});

var btn1 = new MyButton({
customProperty: 'customValue'
});

aaronbartell
15 Oct 2010, 11:09 AM
winklerd, you hit it right on the head. Here is how I now configure my button:


var pnl1 = new Ext.FormPanel({
items:[
{
xtype:'textfield',
fieldLabel:'User Id',
id:'USRID',
}
],
buttons:[
{
id:'btnNext1A',
text:'NEXT',
handler: btnHandler,
submitForms:['form1','form2','form3']
}
]
});

Then my generic button handler is now able to process that property as follows:

function btnHandler(button, event){
Ext.Ajax.request({url:pgmNam, params:getFormVars(button.submitForms) + '&action=' + button.getId(),
success: function(r, o) {
// Process response
}
});
}In case anybody wanted to see the contents of getFormVars I thought I would post it:

function getFormVars(forms){
var formParms = '';
Ext.iterate(forms, function(form, i) {
formParms = formParms + getFormVarsRecurse(form);
});
return formParms;
}

function getFormVarsRecurse(uiObject){
var formParms = '';
if (uiObject != null){
uiObject = Ext.getCmp(uiObject);
if(uiObject.getXType() == 'form'){
formParms = formParms + '&' + Ext.urlEncode(uiObject.getForm().getFieldValues());
} else if(uiObject.getXType() == 'panel'){
uiObject.items.each(function(f){
if(f.getXType() == 'panel' || f.getXType() == 'form'){
formParms = formParms + '&' + getFormVarsRecurse(f);
} else if(f.getXType() == 'grid'){
// TODO address grid here. Determine how this should be done. Send all recs? Changed recs?
} else if(f.getXType() == 'checkbox'){
formParms = formParms + '&' + f.getId() + '=' + f.getValue();
} else if(f.getXType() == 'numberfield'){
formParms = formParms + '&' + f.getId() + '=' + f.getValue();
} else if(f.getXType() == 'textfield'){
formParms = formParms + '&' + f.getId() + '=' + f.getValue();
} else if(f.getXType() == 'datefield'){
formParms = formParms + '&' + f.getId() + '=' + f.getValue();
} else if(f.getXType() == 'combo'){
formParms = formParms + '&' + f.getId() + '=' + f.getValue();
} else{
//alert(f.getXType());
}
});
}
}
return formParms;
}

Thanks,
AaronBartell.com