[Solved] FormPanel accessing items

[mohaaron]

I'm trying to add focus and blur events to all the form items on my form panel. I keep getting an error trying to do this and can't figure out how to make it work. Can anyone tell me why this doesn't work?

this.form is undefined


var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
render: function(form) {
this.form.items.each(function(item) {
item.on('focus', function() {
item.el.addClass('textFocus');
});
item.on('blur', function() {
item.el.removeClass('textFocus');
});
});
},
form.items is undefined


var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
render: function(form) {
form.items.each(function(item) {
item.on('focus', function() {
item.el.addClass('textFocus');
});
item.on('blur', function() {
item.el.removeClass('textFocus');
});
});
},
this.items.each is not a function


var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
render: function(form) {
this.items.each(function(item) {
item.on('focus', function() {
item.el.addClass('textFocus');
});
item.on('blur', function() {
item.el.removeClass('textFocus');
});
});
},

[mohaaron]

I found that I don't get any errors if I use afterrender but then I think it's too late to apply the focus and blur events so the events don't work.

I also tried this but it causes this error so the form doesn's complete loading.

this.panel is undefined
this.panel.setPosition(box.x, box.y)


var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
render: function(form) {
Ext.getCmp('mainForm').getForm().items.each(function(item) {
item.on('focus', function() {
item.el.addClass('textFocus');
});
item.on('blur', function() {
item.el.removeClass('textFocus');
});
});

[tryanDLS]

Looks like you're stepping on the render method rather than adding a handler for the render event.

[mohaaron]

Thank you for the clarification. That solved my problem. Here is my code now.

style:


<style type="text/css">
.focusedField { border-color:#FF9900; }
</style>
code:


function styleFormFields(form)
{
form.items.each(function(item) {
item.on('focus', function() {
item.el.addClass('focusedField');
});
item.on('blur', function() {
item.el.removeClass('focusedField');
});
});
}

var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
listeners: {
render: function(form) {
styleFormFields(this.form);
}
},
items: [{