how to troublehsoot layout problems in 4.1 B2 [Archive]

nbourdeau

20 Feb 2012, 10:18 AM

I have a custom field extension which, when placed in a toolbar of a window, makes the layout process crash and leves the window partially rendered. The problem is: there no error message anywhere!!! I have firebug installed ...

How do I troubleshoot this ????

mitchellsimoens

20 Feb 2012, 10:24 AM

You should use the diag classes then. They are in the src directory.

nbourdeau

20 Feb 2012, 10:27 AM

You should use the diag classes then. They are in the src directory.

Is there any documentation about this ?

nbourdeau

20 Feb 2012, 11:34 AM

Any hint on how to interpret this ?31956

evant

20 Feb 2012, 2:07 PM

Not really possible to say without code, however the layout engine has got into a scenario where it has some dependencies it can't resolve.

Try using the page analyzer, it will give you more "interesting" layout info. It's under examples/page-analyzer

nbourdeau

21 Feb 2012, 10:27 AM

I made a test as simple as I could.See details below ... I don't see how to troubleshoot this !

Datetime field:

Ext.define('Progression.ux.form.field.DateTime', {
extend:'Ext.form.FieldContainer',
mixins: {
field: 'Ext.form.field.Field'
},
alias: 'widget.datetimefield',
layout: 'hbox',
// width: 200,
// height: 22,
combineErrors: true,
msgTarget :'side',

dateCfg:{},
timeCfg:{},

initComponent: function() {
var me = this;
me.buildField();
me.callParent();
this.dateField = this.down('datefield');
this.timeField = this.down('timefield');
me.initField();
},

//@private
buildField: function() {
this.items = [
Ext.apply({
xtype: 'datefield',
format: 'Y-m-d',
width: 100,
isFormField: false // prevent submission
}, this.dateCfg),
Ext.apply({
xtype: 'timefield',
format: 'H:i',
margin: '0 0 0 3',
width: 80,
isFormField: false // prevent submission
}, this.timeCfg)
];
},

getValue: function() {
var value, date = this.dateField.getSubmitValue(), time = this.timeField.getSubmitValue();
if (date) {
if (time) {
var format = this.getFormat();
value = Ext.Date.parse(date + ' ' + time, format);
} else {
value = this.dateField.getValue();
}
}
return value
},

setValue: function(value) {
this.dateField.setValue(value);
this.timeField.setValue(value);
},

getSubmitData: function() {
var value = this.getValue();
var format = this.getFormat();
return value ? Ext.Date.format(value, format) : null;
},

getFormat: function() {
return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
}

});

Html page to test:

<html>
<head>

<link rel="stylesheet" type="text/css" href="/static/ext-4.1.0-beta-2/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="/static/ext-4.1.0-beta-2/resources/css/ext-all-gray.css"/>
<script type="text/javascript" src="/static/ext-4.1.0-beta-2/ext-all-dev.js"></script>


<script type="text/javascript" src="js/ux/form/field/DateTime.js"></script>

<script type="text/javascript" src="/static/ext-4.1.0-beta-2/src/diag/layout/Context.js"></script>
<script type="text/javascript" src="/static/ext-4.1.0-beta-2/src/diag/layout/ContextItem.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
var p = Ext.create('Ext.Panel', {
height: 350,
width: 600,
title: 'Test form',
renderTo: 'test',
layout: 'fit',
tbar: [{
id: 'previous',
icon: '/static/icons/16/rewind_16.gif', cls: 'x-btn-icon'
},{
xtype: 'tbtext',
text: 'From: '
},{
id: 'fromDate',
xtype: 'datetimefield',
dateFormat: 'Y-m-d'
},'-',{
xtype: 'tbtext',
text: 'To: '
},{
id: 'toDate',
xtype: 'datetimefield',
dateFormat: 'Y-m-d'
},{
id: 'next',
icon: '/static/icons/16/foward_16.gif', cls: 'x-btn-icon'
}],
items: [{
html: 'testing one two'
}],
buttonAlign: 'center',
buttons: [{
text: 'Close'
}]
});
});
</script>

</head>
<body>
<div id="test"></div>
</body>
</html>

Page-analyzer result:31995

evant

21 Feb 2012, 1:49 PM

Yeah, that shouldn't be failing. In the interim, try this:

Ext.define('Progression.ux.form.field.DateTime', {
extend: 'Ext.form.FieldContainer',
mixins: {
field: 'Ext.form.field.Field'
},
alias: 'widget.datetimefield',
layout: 'fit',
combineErrors: true,
msgTarget: 'side',

dateCfg: {},
timeCfg: {},

initComponent: function() {
var me = this;
me.buildField();
me.callParent();
this.dateField = this.down('datefield');
this.timeField = this.down('timefield');
me.initField();
},
//@private
buildField: function() {
this.items = {
layout: 'hbox',
xtype: 'container',
items: [Ext.apply({
xtype: 'datefield',
format: 'Y-m-d',
width: 100,
isFormField: false // prevent submission
}, this.dateCfg), Ext.apply({
xtype: 'timefield',
format: 'H:i',
margin: '0 0 0 3',
width: 80,
isFormField: false // prevent submission
}, this.timeCfg)]
};
},
getValue: function() {
var value, date = this.dateField.getSubmitValue(), time = this.timeField.getSubmitValue();
if(date) {
if(time) {
var format = this.getFormat();
value = Ext.Date.parse(date + ' ' + time, format);
} else {
value = this.dateField.getValue();
}
}
return value
},
setValue: function(value) {
this.dateField.setValue(value);
this.timeField.setValue(value);
},
getSubmitData: function() {
var value = this.getValue();
var format = this.getFormat();
return value ? Ext.Date.format(value, format) : null;
},
getFormat: function() {
return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
}
});

Ext.onReady(function() {
var p = Ext.create('Ext.Panel', {
height: 350,
width: 600,
title: 'Test form',
renderTo: document.body,
layout: 'fit',
tbar: [{
id: 'previous',
icon: '/static/icons/16/rewind_16.gif',
cls: 'x-btn-icon'
}, {
xtype: 'tbtext',
text: 'From: '
}, {
id: 'fromDate',
xtype: 'datetimefield',
dateFormat: 'Y-m-d'
}, '-', {
xtype: 'tbtext',
text: 'To: '
}, {
id: 'toDate',
xtype: 'datetimefield',
dateFormat: 'Y-m-d'
}, {
id: 'next',
icon: '/static/icons/16/foward_16.gif',
cls: 'x-btn-icon'
}],
items: [{
html: 'testing one two'
}],
buttonAlign: 'center',
buttons: [{
text: 'Close'
}]
});
});

nbourdeau

22 Feb 2012, 10:11 AM

That works.
Thank you!