PDA

View Full Version : Panel don't want to load in FF3



cpra
18 Mar 2010, 10:46 PM
I'm using ext 3.1 and have panel (layout column) render to div. It use to work fine but after a while (I don't know why) the panel don't want to expand during the load. The panels only create broken box on the left.

I have mirrored the code in 6 machines, all have the same code, this problem happen only 2 machines. Clearing cache/cookie doesn't help. Any idea?

This problem happen in FF3.0.9 (unix) and some FF3.5 (windows)

zolnos
18 Mar 2010, 11:47 PM
Show your code, please.

cpra
19 Mar 2010, 12:09 AM
I'm sorry I'm new to extjs, here is my code


Ext.onReady(function() {

var msForm = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'index.php',
method:'POST',
standardSubmit: true,
frame:true,
title: 'Live Access',
defaults: {xtype: 'textfield'},
items: [ {
xtype: 'combo',
fieldLabel: 'Project',
name:'proj',
store: new Ext.data.SimpleStore({
fields: ['projname'],
data: [['All Projects'],['1006400'],['1006401'],['1006402'],['1006403']] // data is local
}),
allowBlank: false,
valueField:'projname',
displayField:'projname',
typeAhead: true,
typeAheadDelay: 500,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
value: 'All Projects'
}],
buttons: [{
text: 'Submit',
handler: function(){
var form = msForm.getForm();

if(form.isValid()){
form.submit();
} else {
Ext.Msg.alert('Incomplete', 'Please choose a project');
}
}
},{
text: 'Reset',
handler: function(){
msForm.getForm().reset();
}
}]
});

var column1 = new Ext.Panel({
width:450,
autoScroll:true,
baseCls:'x-plain',
items: [msForm]
});

var column2 = new Ext.Panel({
width: 370,
style: {paddingLeft: '5px'},
autoScroll:true,
baseCls:'x-plain',
items: [{
title: 'Diskspace Usage Report',
frame: true,
style: {paddingBottom: '5px'},
items:[{
xtype: 'box',
style:'padding: 5px',
html: '<div class="red center">Last Update: 18 March 2010 (10 pm - 10 pm)</div>'
},{
baseCls:'x-plain',
layout:'column',
defaults: { xtype: 'button', width: 160, scale: 'large', style: { padding: '3px', margin: '3px' } },
items:[{
text: 'Machine',
icon: 'includes/images/report_machine.png',
handler: function() { document.location.href='[email protected]=0k'; }
},{
text: 'Project',
icon: 'includes/images/report_project.png',
handler: function() { document.location.href='[email protected]=0'; }
}]
},{
baseCls:'x-plain',
defaultType: 'button',
layout:'column',
defaults: { xtype: 'button', width: 160, scale: 'large', style: { padding: '3px', margin: '3px' } },
items:[{
text: 'User',
icon: 'includes/images/report_user.png',
handler: function() { document.location.href='[email protected]=0kr'; }
},{
text: 'Modified Date',
icon: 'includes/images/report_age.png',
handler: function() { document.location.href='[email protected]=0k'; }
}]
}]
}, {
title: 'Machine Status',
frame: true,
style: {paddingBottom: '5px'},
autoLoad: 'html2/main_history.php'
}]
});

var column3 = new Ext.Panel({
style: {paddingLeft: '5px'},
baseCls:'x-plain',
autoWidth:true,
items: [{
title: 'Active Projects',
frame: true,
style: {paddingBottom: '5px'},
autoLoad: 'html2/main_history.php'
}]
});

var column4 = new Ext.Panel({
style: {paddingLeft: '5px'},
baseCls:'x-plain',
autoWidth:true,
items: [{
title: 'Non-active Projects',
frame: true,
style: {paddingBottom: '5px'},
autoLoad: 'html2/main_history.php'
}]
});

new Ext.Panel({
renderTo: 'extbody',
bodyStyle:'padding:5px;',
autoScroll:true,
layout:'column',
baseCls:'x-plain',
items: [column1, column2, column3, column4]
});

});

cpra
19 Mar 2010, 12:15 AM
I'm sorry I'm new to extjs, here is my code


Ext.onReady(function() {

var msForm = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'index.php',
method:'POST',
standardSubmit: true,
frame:true,
title: 'Live Access',
defaults: {xtype: 'textfield'},
items: [ {
xtype: 'combo',
fieldLabel: 'Project',
name:'proj',
store: new Ext.data.SimpleStore({
fields: ['projname'],
data: [['All Projects'],['1006400'],['1006401'],['1006402'],['1006403']] // data is local
}),
allowBlank: false,
valueField:'projname',
displayField:'projname',
typeAhead: true,
typeAheadDelay: 500,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
value: 'All Projects'
}],
buttons: [{
text: 'Submit',
handler: function(){
var form = msForm.getForm();

if(form.isValid()){
form.submit();
} else {
Ext.Msg.alert('Incomplete', 'Please choose a project');
}
}
},{
text: 'Reset',
handler: function(){
msForm.getForm().reset();
}
}]
});

var column1 = new Ext.Panel({
width:450,
autoScroll:true,
baseCls:'x-plain',
items: [msForm]
});

var column2 = new Ext.Panel({
width: 370,
style: {paddingLeft: '5px'},
autoScroll:true,
baseCls:'x-plain',
items: [{
title: 'Diskspace Usage Report',
frame: true,
style: {paddingBottom: '5px'},
items:[{
xtype: 'box',
style:'padding: 5px',
html: '<div class="red center">Last Update: 18 March 2010 (10 pm - 10 pm)</div>'
},{
baseCls:'x-plain',
layout:'column',
defaults: { xtype: 'button', width: 160, scale: 'large', style: { padding: '3px', margin: '3px' } },
items:[{
text: 'Machine',
icon: 'includes/images/report_machine.png',
handler: function() { document.location.href='[email protected]=0k'; }
},{
text: 'Project',
icon: 'includes/images/report_project.png',
handler: function() { document.location.href='[email protected]=0kr'; }
}]
},{
baseCls:'x-plain',
defaultType: 'button',
layout:'column',
defaults: { xtype: 'button', width: 160, scale: 'large', style: { padding: '3px', margin: '3px' } },
items:[{
text: 'User',
icon: 'includes/images/report_user.png',
handler: function() { document.location.href='[email protected]=0k'; }
},{
text: 'Modified Date',
icon: 'includes/images/report_age.png',
handler: function() { document.location.href='[email protected]=0k'; }
}]
}]
}, {
title: 'Machine Status',
frame: true,
style: {paddingBottom: '5px'},
autoLoad: 'html2/main_history.php'
}]
});

var column3 = new Ext.Panel({
style: {paddingLeft: '5px'},
baseCls:'x-plain',
autoWidth:true,
items: [{
title: 'Active Projects',
frame: true,
style: {paddingBottom: '5px'},
autoLoad: 'html2/main_history.php'
}]
});

var column4 = new Ext.Panel({
style: {paddingLeft: '5px'},
baseCls:'x-plain',
autoWidth:true,
items: [{
title: 'Non-active Projects',
frame: true,
style: {paddingBottom: '5px'},
autoLoad: 'html2/main_history.php'
}]
});

new Ext.Panel({
renderTo: 'extbody',
bodyStyle:'padding:5px;',
autoScroll:true,
layout:'column',
baseCls:'x-plain',
items: [column1, column2, column3, column4]
});

});

cpra
19 Mar 2010, 12:59 AM
While waiting for my previous post to be approved by moderator...

I played around with my code:
1. I removed
layout:'column', reload the browser, the panel load as normal without column.
2. I added back
layout:'column', reload the browser, then everythings works find. The panel load in column as expected.


My panel code:

new Ext.Panel({
renderTo: 'extbody',
layout:'column',
bodyStyle:'padding:5px;',
autoScroll:true,
items:[column1, column2]
});

cpra
31 Mar 2010, 5:49 PM
Is it bugs in Panel layout column? It keep happening randomly in different browser different version. Clean the cache or restarting the browser doesn't help. Every time I need to comment out "layout:column", reload the browser then un-comment to fix it.