lylepratt
21 Nov 2011, 11:03 AM
I'm not sure if "float left" is the correct term here. But basically, if you have content in a TPL in a panel, all that content looks like it has "float: left" applied to it. After looking deeper into the CSS, its actually because the parent container has "display: -webkit-box;" applied. If you remove that declaration, it seems to work fine.
As an example you can take set up a simple panel and alternate the same content from TPL to HTML and see how the format changes (the content in HTML is correct).
This may not be a bug, but it definitely is different from how ST1 works and it feels like a bug just because its so odd. You can alleviate the problem if you wrap all of your tpl content in an element with "display: block".
Example:
Ext.application({
name: 'app',
controllers: [],
launch: function() {
console.log('app launch');
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',
getGroupString: function(record) {
return record.get('lastName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
]
});
var panel = new Ext.Panel({
fullscreen: true,
//Uncomment this and comment out the TPL to see how it is supposed to look
//html: '<h1 style="margin: 5px; padding: 5px; border: 1px solid #000;">Fest</h1><div class="contact" style="margin: 5px; padding: 5px; border: 1px solid #000;">{firstName} <strong> {lastName}</strong></div>',
//Content in a TPL is oddly floating left.
tpl: '<h1 style="margin: 5px; padding: 5px; border: 1px solid #000;">Fest</h1><div class="contact" style="margin: 5px; padding: 5px; border: 1px solid #000;">{firstName} <strong> {lastName}</strong></div>',
initialize: function() {
console.log('initialized');
this.setData(store.getAt(0).data);
}
});
}
});
As an example you can take set up a simple panel and alternate the same content from TPL to HTML and see how the format changes (the content in HTML is correct).
This may not be a bug, but it definitely is different from how ST1 works and it feels like a bug just because its so odd. You can alleviate the problem if you wrap all of your tpl content in an element with "display: block".
Example:
Ext.application({
name: 'app',
controllers: [],
launch: function() {
console.log('app launch');
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',
getGroupString: function(record) {
return record.get('lastName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
]
});
var panel = new Ext.Panel({
fullscreen: true,
//Uncomment this and comment out the TPL to see how it is supposed to look
//html: '<h1 style="margin: 5px; padding: 5px; border: 1px solid #000;">Fest</h1><div class="contact" style="margin: 5px; padding: 5px; border: 1px solid #000;">{firstName} <strong> {lastName}</strong></div>',
//Content in a TPL is oddly floating left.
tpl: '<h1 style="margin: 5px; padding: 5px; border: 1px solid #000;">Fest</h1><div class="contact" style="margin: 5px; padding: 5px; border: 1px solid #000;">{firstName} <strong> {lastName}</strong></div>',
initialize: function() {
console.log('initialized');
this.setData(store.getAt(0).data);
}
});
}
});