PDA

View Full Version : Show/hide buttons



extjser12
25 Feb 2012, 12:53 PM
Hi together

I have a form which looks as follows:
32136
On the text field I have set an "blur" event which executes the following code:


listeners: {
blur: function() {
var form = this.up();
var toolbar = form.getDockedItems('toolbar[ui=footer]')[0];
toolbar.items.items[0].getEl().show();
toolbar.items.items[1].getEl().show();
toolbar.items.items[2].getEl().hide();
form.doLayout();
}
}


After executing the above code my form looks like this:
32138
(Behind the "Cancel" button is the "Save" button)

But I want that my form looks like this:
32139

How do I have to change my code, so that my form will look like the same as of picture 3?

Here you can see my entire code:


Ext.onReady(function() {
var window = Ext.create('Ext.window.Window', {
title: 'Test Form',
height: 200,
width: 400,
layout: 'fit'
})

var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
listeners: {
blur: function() {
var form = this.up();
var toolbar = form.getDockedItems('toolbar[ui=footer]')[0];
toolbar.items.items[0].getEl().show();
toolbar.items.items[1].getEl().show();
toolbar.items.items[2].getEl().hide();
form.doLayout();
}
}
},{
fieldLabel: 'Last Name',
name: 'last'
}],
buttons: [{
text: 'Save',
id: 'refresh',
hidden: true
}, {
text: 'Cancel',
hidden: true
}, {
text: 'Refresh'
}]
})
window.add(form);
window.show();
});


Thanks for your help!
extjser12

vietits
25 Feb 2012, 4:03 PM
Here is my suggestion (in red color):


...
items: [{
fieldLabel: 'First Name',
name: 'first',
listeners: {
blur: function() {
var form = this.up();
var toolbar = form.getDockedItems('toolbar[ui=footer]')[0];
// toolbar.items.items[0].getEl().show();
// toolbar.items.items[1].getEl().show();
// toolbar.items.items[2].getEl().hide();
// form.doLayout();


toolbar.items.items[0].show();
toolbar.items.items[1].show();
toolbar.items.items[2].hide();
}
}
...