PDA

View Full Version : Toolbar rendering at incorrect place when used with Combobox [position changes later]



purvi.shah
8 Feb 2011, 9:51 AM
I have a form extending FormPanel. In the form, I have some fields that user needs to fill, combo boxes to select form & then Submit (toolbar).

In IE(Mozilla works fine), submit form is getting right before the combobox, and once you focus on it, toolbar moves from before the combobox to bottom of the page (where it is supposed to be in first place).

I am going to paste the screen-shots before & after focus for everybody to see whats going on:
before & after





24631

24632

Any ideas??
Thanks in advance.

purvi.shah
8 Feb 2011, 10:04 AM
blah.blah.myForm = Ext.extend( Ext.FormPanel, {
initComponent : function() {
this.Combo3 = new Ext.form.ComboBox({
name : xxx,
store : new Ext.data.JsonStore(
{
autoDestroy : true,
url : 'xxx'
storeId : xxx
root : 'bean',
idProperty : 'name',
fields : [ 'name', 'value' ],
scope: this,
listeners:{
load: function(store, record, e){
var obj=store.scope.Combo3;
if(store.getTotalCount() == 0)
obj.setDisabled(true);
}
}
}),
displayField : 'value',
typeAhead : true,
mode : 'local',
forceSelection : true,
disabled : true,
allowBlank: false,
triggerAction : 'all',
emptyText : 'Select a blah blah ...',
selectOnFocus : true,
fieldLabel : 'blah blah'

});

this.Combo2 = new Ext.form.ComboBox({
name : xxx,
store : new Ext.data.JsonStore(
{
autoDestroy : true,
url : 'xxx'
storeId : xxx
root : 'bean',
idProperty : 'name',
fields : [ 'name', 'value' ],
scope: this,
listeners:{
load: function(store, record, e){
var obj=store.scope.Combo2;
if(store.getTotalCount() == 0)
obj.setDisabled(true);
}
}
}),
displayField : 'value',
typeAhead : true,
mode : 'local',
forceSelection : true,
disabled : true,
allowBlank: false,
triggerAction : 'all',
emptyText : 'Select a blah blah ...',
selectOnFocus : true,
fieldLabel : 'blah blah'

});


this.Combo1 = new Ext.form.ComboBox({
name : xxx,
store : new Ext.data.JsonStore(
{
autoDestroy : true,
url : 'xxx'
storeId : xxx
root : 'bean',
idProperty : 'name',
fields : [ 'name', 'value' ],
scope: this,
listeners:{
load: function(store, record, e){
var obj=store.scope.Combo1;
if(store.getTotalCount() == 0)
obj.setDisabled(true);
}
}
}),
displayField : 'value',
typeAhead : true,
mode : 'local',
forceSelection : true,
disabled : true,
allowBlank: false,
triggerAction : 'all',
emptyText : 'Select a blah blah ...',
selectOnFocus : true,
fieldLabel : 'blah blah'

});

Ext.apply(this, {
labelWidth : 75, // label settings here cascade
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 450,
id:'blah blah',
paramsAsHash: true,
api: {
submit:
myhander.blahblah
},
defaults : {
width : 230
},
defaultType : 'textfield',
// TODO check field size
items : [ {
fieldLabel : 'Title',
name : 'xxxxxx',
allowBlank : false,
maxLength : 100,
width : 380
}, {
xtype : 'radiogroup',
fieldLabel : 'xxxxxxxx',
itemCls : 'x-check-group-alt',
columns : 1,
items : [ {
// TODO use portal tags to set this from user profile
// values
boxLabel : 'blah blah',
name : 'blah blah',
inputValue : 'blah blah',
checked : true
}, {
boxLabel : 'blah blah',
name : 'blah blah',
inputValue : 'blah blah'
} ]
}
, this.Combo1
, this.Combo2
, this.Combo3
, {
fieldLabel : 'blah blah',
xtype : 'textarea',
name : 'blah blah',
allowBlank: false,
width : 380,
height : 170

}
, {
xtype: 'hidden',
name: 'something',
value: 'something'
}
, {
xtype: 'hidden',
name: 'something2',
value: 'something2'
}
],

bbar: [
'->',
{
text: 'Submit Form',
handler: function(b, e){
b.findParentByType(blah.blah.myForm).getForm().submit({
waitMsg:'Saving...',
scope: this,
// TODO move success to a this.success method??
success: function(form, action){
Ext.Msg.alert('success');
form.reset();
},
failure: function(form, action){
if(form.isValid())
Ext.Msg.alert('Error');
}
});
},
waitMsg: 'Submitting .......'
}
]

});


blah.blah.myForm.superclass.initComponent.apply(this, arguments);


this.form.api = {
submit : myhander.blahblah
};
},
onRender : function() {
// call parent
blah.blah.myForm.superclass.onRender.apply(this, arguments);
this.getForm().waitMsgTarget = this.getEl();
}

});

purvi.shah
8 Feb 2011, 10:30 AM
XXXXs & blah blahs to replace actual ids



blah.blah.myForm = Ext.extend( Ext.FormPanel, {
initComponent : function() {
this.Combo3 = new Ext.form.ComboBox({
name : xxx,
store : new Ext.data.JsonStore(
{
autoDestroy : true,
url : 'xxx'
storeId : xxx
root : 'bean',
idProperty : 'name',
fields : [ 'name', 'value' ],
scope: this,
listeners:{
load: function(store, record, e){
var obj=store.scope.Combo3;
if(store.getTotalCount() == 0)
obj.setDisabled(true);
}
}
}),
displayField : 'value',
typeAhead : true,
mode : 'local',
forceSelection : true,
disabled : true,
allowBlank: false,
triggerAction : 'all',
emptyText : 'Select a blah blah ...',
selectOnFocus : true,
fieldLabel : 'blah blah'

});

this.Combo2 = new Ext.form.ComboBox({
name : xxx,
store : new Ext.data.JsonStore(
{
autoDestroy : true,
url : 'xxx'
storeId : xxx
root : 'bean',
idProperty : 'name',
fields : [ 'name', 'value' ],
scope: this,
listeners:{
load: function(store, record, e){
var obj=store.scope.Combo2;
if(store.getTotalCount() == 0)
obj.setDisabled(true);
}
}
}),
displayField : 'value',
typeAhead : true,
mode : 'local',
forceSelection : true,
disabled : true,
allowBlank: false,
triggerAction : 'all',
emptyText : 'Select a blah blah ...',
selectOnFocus : true,
fieldLabel : 'blah blah'

});


this.Combo1 = new Ext.form.ComboBox({
name : xxx,
store : new Ext.data.JsonStore(
{
autoDestroy : true,
url : 'xxx'
storeId : xxx
root : 'bean',
idProperty : 'name',
fields : [ 'name', 'value' ],
scope: this,
listeners:{
load: function(store, record, e){
var obj=store.scope.Combo1;
if(store.getTotalCount() == 0)
obj.setDisabled(true);
}
}
}),
displayField : 'value',
typeAhead : true,
mode : 'local',
forceSelection : true,
disabled : true,
allowBlank: false,
triggerAction : 'all',
emptyText : 'Select a blah blah ...',
selectOnFocus : true,
fieldLabel : 'blah blah'

});

Ext.apply(this, {
labelWidth : 75, // label settings here cascade
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 450,
id:'blah blah',
paramsAsHash: true,
api: {
submit:
myhander.blahblah
},
defaults : {
width : 230
},
defaultType : 'textfield',
// TODO check field size
items : [ {
fieldLabel : 'Title',
name : 'xxxxxx',
allowBlank : false,
maxLength : 100,
width : 380
}, {
xtype : 'radiogroup',
fieldLabel : 'xxxxxxxx',
itemCls : 'x-check-group-alt',
columns : 1,
items : [ {
// TODO use portal tags to set this from user profile
// values
boxLabel : 'blah blah',
name : 'blah blah',
inputValue : 'blah blah',
checked : true
}, {
boxLabel : 'blah blah',
name : 'blah blah',
inputValue : 'blah blah'
} ]
}
, this.Combo1
, this.Combo2
, this.Combo3
, {
fieldLabel : 'blah blah',
xtype : 'textarea',
name : 'blah blah',
allowBlank: false,
width : 380,
height : 170

}
, {
xtype: 'hidden',
name: 'something',
value: 'something'
}
, {
xtype: 'hidden',
name: 'something2',
value: 'something2'
}
],

bbar: [
'->',
{
text: 'Submit Form',
handler: function(b, e){
b.findParentByType(blah.blah.myForm).getForm().submit({
waitMsg:'Saving...',
scope: this,
// TODO move success to a this.success method??
success: function(form, action){
Ext.Msg.alert('success');
form.reset();
},
failure: function(form, action){
if(form.isValid())
Ext.Msg.alert('Error');
}
});
},
waitMsg: 'Submitting .......'
}
]

});


blah.blah.myForm.superclass.initComponent.apply(this, arguments);


this.form.api = {
submit : myhander.blahblah
};
},
onRender : function() {
// call parent
blah.blah.myForm.superclass.onRender.apply(this, arguments);
this.getForm().waitMsgTarget = this.getEl();
}

});