PDA

View Full Version : Rendering problems



sixkiller
10 Apr 2009, 12:27 AM
Hello everybody,

I do have problems with one page that doesn't render correctly. I'm able to see that page correctly on my computer (winxp FF3 and IE6) but on other computers it doesn't work
- (vista bad on IE and FF3... good on Chrome)
- (linux bad on FF3)

Apart of that weird operating problems, going into details is the fact that the components radio buttons are not shown at all. Also I encounter some problems with the property autoScroll: true of the Panel (once again it works on my computer but not on others)

here we have the code:


Ext.namespace('ggm.tournament');

ggm.tournament.AddTournament = Ext.extend(Ext.Panel, {

// soft config (can be changed from outside)
id: 'main-panel',
cls : 'common-panel',
autoScroll: true,
border:false

,initComponent:function() {

var timePanel = new Ext.Panel({
columnWidth:.5,
title: 'Time Details',
layout: 'column',
border: false,
items : [{
border: false,
columnWidth:.5,
layout: 'form',
items:[{
id: 'start_date',
name: 'start',
fieldLabel: 'Start Date',
xtype: 'datefield',
allowBlank: false,
blankText: 'Il campo obbligatorio'
}]
},{
border: false,
columnWidth:.5,
layout: 'form',
items:[
new Ext.form.TimeField({
id: 'startTime',
fieldLabel: 'Start Time',
/*minValue: '9:00 AM',
maxValue: '6:00 PM',*/
width:95,
increment: 30
})
]
},{
border: false,
columnWidth:.5,
layout: 'form',
items:[{
id: 'end_date',
name: 'end',
fieldLabel: 'Subscription End',
xtype: 'datefield',
allowBlank: false,
blankText: 'Il campo obbligatorio'
}]
},{
border: false,
columnWidth:.5,
layout: 'form',
items:[
new Ext.form.TimeField({
id: 'endTime',
fieldLabel: 'End Time',
/*minValue: '9:00 AM',
maxValue: '6:00 PM',*/
width:95,
increment: 30
})
]
},{
border: false,
columnWidth:.5,
layout: 'form',
items:[{
id: 'expire_date',
name: 'expire',
fieldLabel: 'Expiring Date',
xtype: 'datefield',
allowBlank: false,
blankText: 'Il campo obbligatorio'
}]
},{
border: false,
columnWidth:.5,
layout: 'form',
items:[
new Ext.form.TimeField({
id: 'expireTime',
fieldLabel: 'Expire Time',
/*minValue: '9:00 AM',
maxValue: '6:00 PM',*/
width:95,
increment: 30
})
]
}]
});


var statusPanel = new Ext.Panel({
layout : 'fit',
// height: 58,
border: false,
//columnWidth:.5,
layoutConfig: {
// The total column count must be specified here
columns: 1
},
items:[{
cls : 'common-panel',
title : 'Tournament Status',
layout : 'table',
height:58,
border: false,
//width : 350,
//columnWidth:.8,
items:[{
//fieldLabel: 'label.published',
width: 120,
name: 'status',
dataIndex:'status',
id:'status_1',
inputValue: '1',
boxLabel: 'Published',
xtype: 'radio'
},{
//fieldLabel: 'label.notPublished',
name: 'status',
dataIndex:'status',
id:'status_0',
inputValue: '0',
boxLabel: 'Not Published',
checked: true,
xtype: 'radio'
}]
}]
});


var firstItem = new Ext.Panel({
layout: 'column',
/*layoutConfig: {
// The total column count must be specified here
columns: 2
},*/
border: false,
items:[{
columnWidth:.5,
title: 'Tournament Details',
layout: 'form',
border: false,
items:[{
id: 'tournamentName',
name: 'name',
fieldLabel: 'Tournament Name',
xtype: 'textfield',
allowBlank: false,
blankText: 'Il campo obbligatorio',
width:300
},{
id: 'tournamentKind',
name: 'kind',
fieldLabel: 'Tournament Kind',
//xtype: 'textfield',
xtype: 'combo',
allowBlank: false,
blankText: 'Il campo obbligatorio',
width:300
},{
id: 'tournamentQuote',
name: 'quote',
fieldLabel: 'Tournament Quote',
xtype: 'textfield',
allowBlank: false,
blankText: 'Il campo obbligatorio',
width:300
},{
id: 'tournamentPrize',
name: 'prize',
fieldLabel: 'Tournament Prize',
xtype: 'textfield',
allowBlank: false,
blankText: 'Il campo obbligatorio',
width:300
},{
id: 'tournamentTables',
name: 'num_tables',
fieldLabel: 'Number of Tables',
xtype: 'numberfield',
allowBlank: false,
blankText: 'Il campo obbligatorio',
width:300
},{
id: 'tournamentPlayers',
name: 'num_players',
fieldLabel: 'Number of Players',
xtype: 'numberfield',
allowBlank: false,
blankText: 'Il campo obbligatorio',
width:300
}/*,{
xtype: 'radiogroup',
fieldLabel: 'Tournament Status',
items: [
{boxLabel: 'Pending', name: 'status', inputValue: 0, checked: true},
{boxLabel: 'Not Published', name: 'status', inputValue: 1},
{boxLabel: 'Published', name: 'status', inputValue: 2}
]
}*/]
}, timePanel
]
});


var buttonPanel = new Ext.Panel({
cls: 'no-border',
layout: 'column',
border: false,
items : [{
columnWidth:.7,
border:false
},new Ext.Panel({
layout:'form',
columnWidth:.3,
border:false,
items:{
text: 'Add Tournament',
frame: true,
ctCls: 'htmlButton',
xtype: 'button',
handler: function() {
alert(1);
}
}
})
]
});

// hard coded (cannot be changed from outside)
var config = {
region: 'center',
title: 'Add Tournament',
items: [firstItem,statusPanel,buttonPanel]
};

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);


// call parent
ggm.tournament.AddTournament.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

} // eo function initComponent

,onRender:function() {

// before parent code

// call parent
ggm.tournament.AddTournament.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

} // eo function onRender

// any other added/overrided methods

});


Thanks in advance

sixkiller
10 Apr 2009, 2:28 AM
I was trying also with that more simpler page and I get the same result. Right now I start to think that it is a problem of layouts related with the Viewport.

Here is the simple page with a label and a radio


Ext.namespace('ggm.user');

ggm.user.DetailAccount = Ext.extend(Ext.Panel, {

// soft config (can be changed from outside)
id: 'main-panel',
cls : 'common-panel',
autoScroll: true,
border:false

,initComponent:function() {

var topPanel = new Ext.Panel({
layout: 'table',
layoutConfig: {
// The total column count must be specified here
columns: 2
},
border: false,
items:[new Ext.Panel({
layout: 'column',
border: false,
width: 465,
items : [{
columnWidth:.06,
layout: 'form',
border: false,
//style:'margin-top:14px;',
items:{
id: 'radio1',
hideLabel: true,
name: 'searchType',
xtype: 'radio',
inputValue: 'name',
checked: false
/*,listeners : {'change': {
fn: clearFields
}
}*/
}
},{
cls : 'no-border',
columnWidth:.47,
layout: 'form',
border: false,
//style:'margin-right:5px;',
items:{
id: 'sname',
name: 'sname',
fieldLabel: 'label.sname',
disabled: true,
maxLength: 40,
maxLengthText: msg.maxLenghtExceded,
width:200,
xtype: 'textfield',
allowBlank: false,
blankText: msg.fieldRequired,
enableKeyEvents: true
/*,listeners : {'keypress': {
fn: initSearch
}
}*/
}
}]
})]
});

// hard coded (cannot be changed from outside)
var config = {
region: 'center',
title: 'Account Details',
items:[topPanel]
};

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

// call parent
ggm.user.DetailAccount.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

} // eo function initComponent

,onRender:function() {

// before parent code

// call parent
ggm.user.DetailAccount.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

} // eo function onRender

// any other added/overrided methods

}); // eo extendand here it is the viewport page code


Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
Ext.ns('ggm', 'ggm.common', 'ggm.tournament');

Ext.onReady(function() {

var header = new ggm.common.Header({});

var leftContainer = new ggm.common.AccordionMenu({});

var mainContainer = new ggm.home.Index({});

var footer = new ggm.common.Footer({});

var viewport = new Ext.Viewport({
id: 'main-viewport',
layout: 'border',
renderTo: Ext.getBody(),
items: [
header,
leftContainer,
mainContainer,
footer
]
});

});

and finally this is the function that I use to load the pages in the mainContainer


loadPanel = function(obj){

var centerMainPanel = Ext.getCmp('main-viewport').getComponent(2);

var el = Ext.get('main-panel');
if(el != null) {
el.remove();
}

centerMainPanel.add(obj);
centerMainPanel.doLayout();
}

I hope someone has an idea about what's wrong...

aconran
10 Apr 2009, 4:38 AM
Does the sum of your columnWidth's equal 1?

sixkiller
12 Apr 2009, 9:00 AM
I was able to solve some rendering problems with the columnWidth sum... but unfortunately I'm still not able to see any radio button in my pages. even with that simple page I can see only the box label but not the radio button


Ext.namespace('ggm.tournament');

ggm.tournament.ListTournament = Ext.extend(Ext.Panel, {

// soft config (can be changed from outside)
id: 'main-panel',
cls : 'common-panel',
border:false

,initComponent:function() {

// hard coded (cannot be changed from outside)
var config = {
region: 'center',
title: 'List Tournament',
items: [ {
xtype: 'radio',
name: 'schedule',
inputValue: 'page',
boxLabel: 'Show page:'
}]
};

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

// call parent
ggm.tournament.ListTournament.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

} // eo function initComponent

,onRender:function() {

// before parent code

// call parent
ggm.tournament.ListTournament.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

} // eo function onRender

// any other added/overrided methods

}); // eo extend