PDA

View Full Version : UI alignment not happening in IE6.



natts_82
8 Apr 2010, 10:23 PM
Hello Gurus,

I am using ext3.0.0.

I am using a simple form panel, and aligning combo with a text box horizontally.

Also, when I click on a button (More Subscriptions), I dynamically add this row containing
a combo and a text box.

In IE 6, the first combo / text box is appearing well aligned. However, subsequent additions are getting aligned inappropriately.

Kindly suggest what to be done in this case. The screen shot is attached. Also attaching the code for the form.

Also, I see that the form is somewhat extended at the bottom right corner. Please suggest on what could be the issue there.

I dont see any of these issues in firefox.

Your pointers are highly valuable. Thanks in advance.

Regards,
Nataraja.



var subscriptionCounter = 1;

// not needed anymore.. changed AssetIdentifierTypes to a textfield

var assetIdentifierTypeStore = new Ext.data.SimpleStore( {
fields : [ 'id', 'ait' ],
data : [ [ 'CUSIP', 'CUSIP' ], [ 'CINS', 'CINS' ], [ 'INHSE_IS', 'INHSE_IS' ], [ 'ISIN', 'ISIN'], [ 'PPN', 'PPN'], [ 'SEDOL', 'SEDOL' ]]
});


var msg = function(title, msg) {
Ext.Msg.show( {
title : title,
msg : msg,
minWidth : 200,
modal : true,
icon : Ext.Msg.INFO,
buttons : Ext.Msg.OK
});
};


var textFieldsPanel = new Ext.Panel ({
id : 'txtSubscriptions',
bodyStyle:'padding:10px 10px 0',
layout : 'column',
border : true,
labelAlign: 'top',
items : [ {
columnWidth:.5,
layout: 'form',
id:'aitColumn',
items:[{
id : 'ait0',
xtype : 'combo',
mode : 'local',
store : assetIdentifierTypeStore,
displayField : 'ait',
triggerAction : 'all',
// emptyText : 'Select a Type...',
editable: false,
forceSelection: true,
//xtype:'textfield',
value: 'CUSIP',
fieldLabel : 'Asset Identifier Types',
name : 'assetIdentifierTypes',
anchor:'60%'
}]
}, {
columnWidth:.5,
layout: 'form',
id:'aiColumn',
items:[{
xtype : 'textfield',
id : 'ai0',
fieldLabel : 'Asset Identifiers',
name : 'assetIdentifiers',
// vtype : 'alphanum',
anchor:'60%'
}]

} ]
});


function addNewRow(rowCounter){

Ext.getCmp('aitColumn').add({
id : 'ait'+rowCounter,
xtype : 'combo',
editable: false,
forceSelection: true,
//xtype:'textfield',
name : 'assetIdentifierTypes',
mode : 'local',
store : assetIdentifierTypeStore,
displayField : 'ait',
triggerAction : 'all',
// emptyText : 'Select a Type...',
anchor:'60%'
});

Ext.getCmp('aiColumn').add({
xtype : 'textfield',
id : 'ai'+rowCounter,
name : 'assetIdentifiers',
// vtype : 'alphanum',
anchor:'60%'
});

}

/*
* NOTE:
* Using textfield instead of ComboBox for AssetIdentifierTypes.
* This is becoz ComboBox has a diff vertical spacing style than a textfield.
* so when we have a combo box in column and a text field in another column. they will not align togeother horizontally
* since thier css vertical spacings are different
*/

var txtSubscriptionPanel = new Ext.FormPanel({
width : '50%',
id:'txtSubscriptionFormPanel',
frame : true,
title : 'Text Subscription Form',
autoHeight : true,
bodyStyle : 'padding: 10px 10px 10px 10px;',
defaults : {
allowBlank : false,
msgTarget : 'side'
},
items : [ textFieldsPanel, hiddenField = new Ext.form.Hidden({ name: 'userId', value: userIdJs}) ],
buttons : [

{
text : 'More Subscriptions',
handler : function() {
if(subscriptionCounter <= 9){
subscriptionCounter++;

addNewRow(subscriptionCounter);
loadSpecificCard(1);
loadSpecificCard(5); // we have to switch and
}
}
},
{
text : 'Submit',
handler : function() {
if (txtSubscriptionPanel.getForm().isValid()) {
txtSubscriptionPanel
.getForm()
.submit(
{
url : '/rdrim-webapp/rdrimUI/text-subscriptions.action',
waitMsg : 'Subscribing...',
scope : this,
success : this.onSuccess,
failure : this.onFailure
});
}
},
onSuccess : function(form, action) {
msg('Success','Successfully subscribed to ' + action.result.messages + ' instruments.');
txtSubscriptionPanel.getForm().reset();
},
onFailure : function(form, action) {
this.showError(action.result.error || action.response.responseText);
},
showError : function(msg, title) {
title = title || 'Error';
Ext.Msg.show( {
title : title,
msg : msg,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK,
maxWidth:1200,
minWidth:600
});
}
},
{
text : 'Reset',
handler : function() {

txtSubscriptionPanel.getForm().reset();
var j=0;
// Reason for this...some of the items do not get removed in a single iteration...need to look further
for (j=0; j<10; j++) {
var aitItems = Ext.getCmp('aitColumn').items.find(function(i) {
if (i != null && i.id != null && i.id != 'ait0' ) {
Ext.getCmp('aitColumn').remove(i);
subscriptionCounter = 1;

}

});

var aiItems = Ext.getCmp('aiColumn').items.find(function(i) {
if (i != null && i.id != null && i.id != 'ai0' ) {
Ext.getCmp('aiColumn').remove(i);
subscriptionCounter = 1;
}

});
}


}
} ]
});

natts_82
11 Apr 2010, 9:22 PM
Hello Gurus,

Any updates on this question please ?

I am using a nested panel, as indicated in the code. Is it an issue to do that way ?

Regards,
Nataraja