PDA

View Full Version : horizontal scroll in firefox 3.5.11



SAP
20 Feb 2011, 11:21 PM
I want to get rid of horizontal grid in Firefox ver 3.5.11. there is no issue of horizontal scrollbar in IE 8.
I tried adding



viewConfig: {
forceFit: true
},

result is horizontal bar vanishes but in Internet explorer 8, element below the grid fieldset- vanishes.



// JScript File
var fm = Ext.form;
Application.Network = Ext.extend(Ext.form.FormPanel, {
border: false,
initComponent: function () {
var myData_cache = [
["N1", "155.123.33.12", "jetset ALB", "Yes"],
["N2", "155.123.33.13", "jetset ALV", "Yes"],
["N3", "155.123.33.14", "jetset ALM", "Yes"]
];
function genre_name2(val) {
if (val == 0 || val == undefined) val = 1;
return genres2.queryBy(function (rec1) {
return rec1.data.id == val;
}).itemAt(0).data.genre2;
};
var ds_model = Ext.data.Record.create(['id', 'coverthumb', 'title', 'director', 'released', 'genre', 'tagline',
{
name: 'price',
type: 'float'
}, {
name: 'available',
type: 'bool'
}]);
var store = new Ext.data.Store({
data: [
[1, "", "etho 0", "Test", 1, 2, "eht0=vmxnet", 19.95, true],
[2, "", "etho 1", "Live", 1, 2, "eht1=vmxnet", 20.12, true],
[3, "", "etho 2", "Prod", 1, 1, "eht2=vmxnet", 21.56, 1]
],
reader: new Ext.data.ArrayReader({
id: 'id'
}, ds_model)
});
var genre_edit2 = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: genres2,
displayField: 'genre2',
valueField: 'id',
listeners: {
select: function (f, r, i) {
if (i === 0) {
Ext.Msg.prompt('New Genre', 'Name', Ext.emptyFn);
}
}
}
});

var genres2 = new Ext.data.SimpleStore({
fields: ['id', 'genre2'],
data: [
['0', ''],
['1', '10'],
['2', '100'],
['3', '1000'],
['4', 'Auto']
]
});
var ds12 = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [{
name: 'N1',
type: 'text'
}, {
name: 'N2',
type: 'text'
}, {
name: 'N3',
type: 'text'
}, {
name: 'N4',
type: 'text'
}
])
});
ds12.loadData(myData_cache);
/////// config start
var stDate = new Ext.data.SimpleStore({
fields: ['id', 'Protocol1'],
data: [
['1', 'etho 1'],
['2', 'etho 2']
]
});
var colModel_cache = new Ext.grid.ColumnModel([
{
header: "Destination",
width: '20%',
id: "Destination",
autoScroll: true,
css: "border:0 none;",
sortable: true,
dataIndex: 'N1',
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Gateway",
width: '20%',
sortable: true,
css: "border:0 none;",
dataIndex: 'N2',
editor: new fm.TextField({
allowBlank: false
})
}, {
header: "Mask",
width: '20%',
css: "border:0 none;",
dataIndex: 'genre2',
renderer: genre_name2,
editor: genre_edit2
}, {
header: "Adapter",
width: '20%',
sortable: true,
css: "border:0 none;",
dataIndex: 'N2',
editor: new fm.TextField({
allowBlank: false
})
}, {
header: "Active",
css: "border:0 none;",
width: '20%',
sortable: true,
dataIndex: 'N4',
editor: new fm.TextField({
allowBlank: false
})
}
]);
var config = {
layout: 'form',
autoScroll: true,
height: 460,
//frame:'true',
url: '../Submit.htm<#SessionID>',
width: '100%',
bodyStyle: 'padding:25px',
labelWidth: 70,
propertyNames: {
borderWidth: 'Border Width'
},
defaultType: 'textfield',
labelAlign: 'top',
defaultType: 'textfield',
items: [{
xtype: 'label',
// cls:'gradientV',
style: 'margin-left:0;margin-bottom:20;margin-top:-10;',
html: '<div class="gradientV"><font size="2" face="Arial"><b>Network </b></font></div>',
//html: '<font size="2" face="Arial"><b> Network </b></font>',
anchor: '98%'
}, {
xtype: 'fieldset',
title: 'Default Route',
anchor: '98%',
items: [{
xtype: 'compositefield',
hideLabel: 'true',
anchor: '98%',
items: [{
xtype: 'displayfield',
value: 'Default Gateway:'
}, {
name: 'minutes',
xtype: 'numberfield',
width: 50,
allowBlank: false
}, {
xtype: 'combo',
name: 'genre',
displayField: 'Protocol1',
style: 'margin-left:5',
mode: 'local',
typeAhead: true,
triggerAction: 'all',
width: 250,
store: stDate
}, {
xtype: 'label',
style: 'width:5',
formBind: true
}, {
xtype: 'tbbutton',
text: 'Update',
icon: 'images/addition/update.png',
width: '60',
name: 'update_time'
}]
}]
}, {
xtype: 'label',
html: '<br />',
width: '81%'
},
//---------------------------------------------
{
xtype: 'fieldset',
title: 'Static Route',
anchor: '98%',
items: [{
xtype: 'button',
width: '60px',
icon: 'images/table_add.png',
style: 'margin-left:0;margin-bottom:0;',
text: 'Add Records'
}, {
xtype: 'button',
width: '60px',
icon: 'images/table_delete.png',
style: 'margin-left:100;margin-top:-22;',
text: 'Remove Records'
}, {
xtype: 'label',
html: '<br />',
width: '81%'
}, {
xtype: 'editorgrid',
ds: ds12,
cm: colModel_cache,
width: '98%',
id: 'dgrid',
stripeRows: true,
height: 115,
border: false
}, {
xtype: 'button',
text: 'Save',
icon: 'images/addition/save.png',
formBind: true,
scope: this,
cls: 'x-btn-left2',
style: 'margin-bottom:10;margin-top:-10;',
handler: this.submit
}]
}, {
xtype: 'label',
html: '<br />',
width: '81%'
},
{
xtype: 'fieldset',
title: 'Details',
style: 'margin-bottom:42;',
anchor: '98%',
items: [{
xtype: 'compositefield',
msgTarget: 'side',
fieldLabel: '',
items: [{
xtype: 'textarea',
name: 'Server Too Busy',
height: '100',
style: 'margin-left:1%;',
width: '98%'
}
]
}]
}

]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
// });
Application.EmailEventsForm.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,
onRender: function () {
// this.store.load();
Application.EmailEventsForm.superclass.onRender.apply(this, arguments);
} // eo function onRender
,
submit: function () {
this.getForm().submit({
standardSubmit: true,
//url :'Default.aspx<#SessionID>',
//url :'Default.aspx',
url: this.url,
success: this.onSuccess,
failure: this.onFailure
//params:{cmd:'save'}
});
}
,
onSuccess: function (form, action) {
Ext.MessageBox.alert("Success", "Form Submitted SuccessFully");
}
,
onFailure: function (form, action) {
Ext.MessageBox.alert("Failure", "Form could not be Submitted.");
}
});
Ext.reg('Network', Application.Network);

Condor
21 Feb 2011, 6:11 AM
Do NOT use width:'percentage'!!!

Use a layout:'column' with columnWidth or a layout:'hbox' with flex.