PDA

View Full Version : Dataview with header before tpl loop problem - worked in 4.0



dolelicious
12 Jun 2012, 9:28 AM
My dataview that worked in Ext 4.0 is no longer rendering correctly. When the data store is empty, both the emptyText and the template are being rendered. If I remove the header tag from before the tpl loop, it works correctly (it's commented below).

I tried changing that to a div, img, or any other tag and it still won't work so it appears the mere presence of a second child tag under the main itemSelector is causing the dataview to break.

Here's my sample (I apologize for any typos I had to print it and type it back in):


Ext.define('filterModel', {
extend: 'Ext.data.Model',
fields: [


{name: 'filterName', type: 'string'},
{name: 'filterSummary', type: 'string'},
{name: 'filterType', type: 'string'},
{name: 'filterId', type: 'string'}


]

});

var noDataFilterStore = new Ext.data.Store({
model: 'filterModel',
data: []

});

With my DataView defined in a panel item as:


{
xtype: 'dataview',
autoScroll: true,
id: 'filters-dataview',
deferEmptyText: false,
emptyText: 'no filters',
tpl: new Ext.XTemplate(

'<div class="filters-view">' +

'<h3 class="filter-header">My Filters</h3>' + //if you remove this line, the dataview will work correctly
'<tpl for=".">' +


'<div class="filter">' +

'<img src="images/delete.png" onclick="deleteFilter(\'{filterId}\'}" class="delete-icon"/>' +
'<div class="filter-name">{filterName}</div>' +
'<div class="filter-summary">{filterSummary}</div>' +


'</div>' +


'</tpl>' +


'</div>'


),
itemSelector: 'div.filters-view', //I tried div.filter here too thinking I am getting the concept of itemSelector wrong
store: noDataFiltersStore

}

evant
12 Jun 2012, 1:44 PM
When I run your code against the latest 4.1.1 build I see:



My Filters
no filters




Ext.define('filterModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'filterName',
type: 'string'
}, {
name: 'filterSummary',
type: 'string'
}, {
name: 'filterType',
type: 'string'
}, {
name: 'filterId',
type: 'string'
}]
});

Ext.require('*');

Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: 'filterModel',
data: []
});

Ext.widget({
renderTo: document.body,
xtype: 'dataview',
id: 'filters-dataview',
deferEmptyText: false,
emptyText: 'no filters',
tpl: new Ext.XTemplate('<div class="filters-view">' + '<h3 class="filter-header">My Filters</h3>' + //if you remove this line, the dataview will work correctly
'<tpl for=".">' + '<div class="filter">' + '<img src="images/delete.png" onclick="deleteFilter(\'{filterId}\'}" class="delete-icon"/>' + '<div class="filter-name">{filterName}</div>' + '<div class="filter-summary">{filterSummary}</div>' + '</div>' + '</tpl>' + '</div>'),
itemSelector: 'div.filters-view',
store: store
});
});


However, you are using the itemSelector incorrectly. I is used so it can map dom nodes in your view to records in your store. As such, the item selector should be as such so that it provides a 1 to 1 mapping between nodes & records. In this case, it should be ".filter"

dolelicious
13 Jun 2012, 12:24 PM
Thanks for your reply. It still does not work. I tried changing it to "div.filter" as well as ".filter" and it still shows the same thing with both the emptyText and tpl text rendered when it should only show the emptyText since there is no data.

Again, if I take out the <h3> tag, it works correctly which is why I think it's possibly a bug.

I am running 4.1.0. Does it work correctly for you in 4.1.1?

scottmartin
13 Jun 2012, 2:50 PM
Please try this against the latest release:
http://www.sencha.com/forum/showthread.php?219836-Ext-JS-4.1.1-RC2-Now-Available

Scott.