PDA

View Full Version : extending and 4 questions about dynamically change properties



semenov
26 Jun 2010, 1:27 PM
Hi Guys,

I have created a new component inherited from Ext.FormPanel. I have 2 buttons Save & Cancel. Please see my questions below the code snapshot



MyForm = Ext.extend(Ext.FormPanel, {

initComponent: function () {

var config = {
width: 800,
labelAlign: 'top',
frame: true,
title: 'Reusable component test',
bodyStyle: 'padding:5px 5px 0'
};

this.items= [{
layout: 'column',
items: [{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Company',
name: 'company',
anchor: '95%'
}]
}, {
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
allowBlank: false,
name: 'last',
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
anchor: '95%'
}
]
}]
}, {
xtype: 'htmleditor',
id: 'bio',
fieldLabel: 'Biography',
height: 200,
name: 'bio',
anchor: '98%'
}]

this.buttons= [{
text: 'Save',
handler: SaveBtnClick2
}, {
text: 'Cancel'
}]

Ext.apply(this, Ext.apply(this.initialConfig, config));
MyForm.superclass.initComponent.apply(this, arguments);
},
onRender: function () {
MyForm.superclass.onRender.apply(this, arguments);
}

});

Ext.reg('myformxtype', MyForm);



Right now I call this form like this



var rform = new MyForm();
rform.width = '400';
var win = new Ext.Window({
title: 'Personnel'
, widht: 800
, height: 600
, items: [ rform ]
});

win.show();


Questions

1. How can I change the handlers of "extended component" dynamically. So right now the component MyForm has "save" button handler hardcoded. How can I do something like this



var rform = new MyForm();
rform.buttons.save.handler=otherfunc;

is that possible?

2. How can I dynamically change settings of fields on the form. Something like


var rform = new MyForm();
rform.items.email.allowBlank = true;

is that possible?

3. and another thing. Right now I'm having the following handler on button Save


var SaveBtnClick = function (button, event) {
if (rform.form.isValid()) {
Ext.MessageBox.alert('Status', 'Passed');
}
else {
Ext.MessageBox.alert('Status', 'Not valid');
}

};


My question is that 2nd line explicitly says "rform". How can I have several widgets with forms instantiated from MyForm, but only one handler. So it is something like this



var SaveBtnClick = function (caller,button, event) {
if (caller.form.isValid()) {
Ext.MessageBox.alert('Status', 'Passed');
}
else {
Ext.MessageBox.alert('Status', 'Not valid');
}

};


where caller is the real object on which we clicked the button. Maybe there is a property in a button, that will give me a link to a form the button belongs?

4. If i use xtype option, like this



var win = new Ext.Window({
title: 'Personnel'
, widht: 600
, height: 400
, items: { xtype: 'myformxtype' }
});


how can I configure the settings of the form in types? Like
items: { xtype: 'myformxtype', config.option=something, config.option2=something2 }

Thank you for all your help!

jay@moduscreate.com
28 Jun 2010, 3:44 AM
Hi Guys,

I have created a new component inherited from Ext.FormPanel. I have 2 buttons Save & Cancel. Please see my questions below the code snapshot



MyForm = Ext.extend(Ext.FormPanel, {

initComponent: function () {

var config = {
width: 800,
labelAlign: 'top',
frame: true,
title: 'Reusable component test',
bodyStyle: 'padding:5px 5px 0'
};

this.items= [{
layout: 'column',
items: [{
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Company',
name: 'company',
anchor: '95%'
}]
}, {
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
allowBlank: false,
name: 'last',
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
anchor: '95%'
}
]
}]
}, {
xtype: 'htmleditor',
id: 'bio',
fieldLabel: 'Biography',
height: 200,
name: 'bio',
anchor: '98%'
}]

this.buttons= [{
text: 'Save',
handler: SaveBtnClick2
}, {
text: 'Cancel'
}]

Ext.apply(this, Ext.apply(this.initialConfig, config));
MyForm.superclass.initComponent.apply(this, arguments);
},
onRender: function () {
MyForm.superclass.onRender.apply(this, arguments);
}

});

Ext.reg('myformxtype', MyForm);



Right now I call this form like this



var rform = new MyForm();
rform.width = '400';
var win = new Ext.Window({
title: 'Personnel'
, widht: 800
, height: 600
, items: [ rform ]
});

win.show();


Questions

1. How can I change the handlers of "extended component" dynamically. So right now the component MyForm has "save" button handler hardcoded. How can I do something like this



var rform = new MyForm();
rform.buttons.save.handler=otherfunc;

is that possible?

I would say that your insantiation should include the handlers in the config object. Your class should detect and apply those configs to the buttons.




2. How can I dynamically change settings of fields on the form. Something like


var rform = new MyForm();
rform.items.email.allowBlank = true;

is that possible?

Not that simple. What you should do, perhaps is set a utility method to change the property. Such as rform.setEmailFieldAllowBlank(true)

the code should look something like:


setEmailFieldAllowBlank : function(allowBlank) {
var emailField = this.getComponent('emailField'); // <--- add 'emailField' as an itemId to your email field

emailField.allowBlank = allowBlank;
emailField.isValid();

}





3. and another thing. Right now I'm having the following handler on button Save


var SaveBtnClick = function (button, event) {
if (rform.form.isValid()) {
Ext.MessageBox.alert('Status', 'Passed');
}
else {
Ext.MessageBox.alert('Status', 'Not valid');
}

};


My question is that 2nd line explicitly says "rform". How can I have several widgets with forms instantiated from MyForm, but only one handler. So it is something like this



var SaveBtnClick = function (caller,button, event) {
if (caller.form.isValid()) {
Ext.MessageBox.alert('Status', 'Passed');
}
else {
Ext.MessageBox.alert('Status', 'Not valid');
}

};


where caller is the real object on which we clicked the button. Maybe there is a property in a button, that will give me a link to a form the button belongs?


If you set the SaveBtnClick method as a member of the MyForm class, then, if called within the scope of the instnace of MyForm, the "this" property will point to that instance, therefore giving yout the reference you're looking for.



4. If i use xtype option, like this



var win = new Ext.Window({
title: 'Personnel'
, widht: 600
, height: 400
, items: { xtype: 'myformxtype' }
});


how can I configure the settings of the form in types? Like
items: { xtype: 'myformxtype', config.option=something, config.option2=something2 }

Thank you for all your help!

You don't set "config.option = something"

you set:


{
xtype : 'myformxtype',
myConfigs : {
cfg1 : 'blue',
cfg2 : 'red'
}
}


In the initComponent of your class, you'll see that this.myConfigs is accessible if it is specified in the constructor call.

semenov
28 Jun 2010, 12:02 PM
Hi JGarcia,

thanks for your answers - I have 2 more questions related to suggestions you made.




I would say that your insantiation should include the handlers in the config object. Your class should detect and apply those configs to the buttons.

Not that simple. What you should do, perhaps is set a utility method to change the property. Such as rform.setEmailFieldAllowBlank(true)

the code should look something like:


setEmailFieldAllowBlank : function(allowBlank) {
var emailField = this.getComponent('emailField'); // <--- add 'emailField' as an itemId to your email field

emailField.allowBlank = allowBlank;
emailField.isValid();

}



How can I avoid calling the component by ID? Assuming that I may have several windows (widgets) of the same extended class. In this case this
var emailField = this.getComponent('emailField');
should not work because there will be several forms instantiated from the same extended class. How can I avoid that?





You don't set "config.option = something"

you set:


{
xtype : 'myformxtype',
myConfigs : {
cfg1 : 'blue',
cfg2 : 'red'
}
}


In the initComponent of your class, you'll see that this.myConfigs is accessible if it is specified in the constructor call.

My code that I have above doesn't do anything with myConfigs. Is that I should add something into constructor of my extended class or is this (MyConfigs) already implemented in extJS?


Thanks for your help!

Dmitry

mschwartz
28 Jun 2010, 12:04 PM
If you're wanting to change the behavior of various instantiated objects of the same class, pass information about the behavior to select in the config object you pass to its constructor.

semenov
28 Jun 2010, 12:06 PM
can you show me a simple example?

mschwartz
28 Jun 2010, 12:12 PM
MyPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
// default configuration options, can be overriden at instantiation time
autoScroll: true
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyPanel.superclass.initComponent.apply(this, arguments);
}
};


Instantiate:



var p1 = new MyPanel({
// these become initialConfig items
id: 'id1',
autoScroll: false // override default!
});

// this one will have autoScroll true
var p2 = new MyPanel({
id: 'id2'
});


You really should buy jgarcia's book.

semenov
28 Jun 2010, 12:15 PM
Thanks! I bought the ExtJS 3.0 Cookbook - going through it. JGarcia's book - can you give me the name of the book?

semenov
28 Jun 2010, 1:28 PM
MyPanel = Ext.extend(Ext.Panel, {
initComponent: function() {
var config = {
// default configuration options, can be overriden at instantiation time
autoScroll: true
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyPanel.superclass.initComponent.apply(this, arguments);
}
};


Instantiate:



var p1 = new MyPanel({
// these become initialConfig items
id: 'id1',
autoScroll: false // override default!
});

// this one will have autoScroll true
var p2 = new MyPanel({
id: 'id2'
});




What should I do in the case I instantiate the form using xtype, like this


{
xtype : 'myformxtype'
}


how can I rewrite the settings then?

mschwartz
29 Jun 2010, 5:16 AM
{
xtype: 'myformxtype',
autoScroll: false,
id: 'id3'
}

Animal
29 Jun 2010, 5:20 AM
Thanks! I bought the ExtJS 3.0 Cookbook - going through it. JGarcia's book - can you give me the name of the book?

http://extjsinaction.com/