ry.extjs
16 Jun 2008, 11:30 AM
Since I don't have a premium account, I'll post this here as opposed to the Feature Request forum. This isn't really a request as much as it is a suggestion, and some code sharing.
Within my current project, I had the need to apply a class to a DataView when its store returned an empty set. I found it to be visually helpful to change the style of a DataView in addition to displaying text when there was an empty store.
Here's the code additions... (I'm using version 2.1)
Open up DataView.js and go to the refresh() function
refresh : function(){
this.clearSelections(false, true);
this.el.update("");
var html = [];
var records = this.store.getRange();
var el = Ext.get(this.el);
el.removeClass('x-view-empty');
if(records.length < 1){
el.addClass('x-view-empty');
if(!this.deferEmptyText || this.hasSkippedEmptyText){
this.el.update(this.emptyText);
}
this.hasSkippedEmptyText = true;
this.all.clear();
return;
}
this.tpl.overwrite(this.el, this.collectData(records, 0));
this.all.fill(Ext.query(this.itemSelector, this.el.dom));
this.updateIndexes(0);
}
The new additions are in green. I simply added a new class to the DataView called 'x-view-empty' when the store is empty.
You could also add another config parameter called emptyClass that would overwrite the default 'x-view-empty' but I didn't need that. Very simple addition though.
Not sure if this is planned for a future release, but it may be helpful.
Within my current project, I had the need to apply a class to a DataView when its store returned an empty set. I found it to be visually helpful to change the style of a DataView in addition to displaying text when there was an empty store.
Here's the code additions... (I'm using version 2.1)
Open up DataView.js and go to the refresh() function
refresh : function(){
this.clearSelections(false, true);
this.el.update("");
var html = [];
var records = this.store.getRange();
var el = Ext.get(this.el);
el.removeClass('x-view-empty');
if(records.length < 1){
el.addClass('x-view-empty');
if(!this.deferEmptyText || this.hasSkippedEmptyText){
this.el.update(this.emptyText);
}
this.hasSkippedEmptyText = true;
this.all.clear();
return;
}
this.tpl.overwrite(this.el, this.collectData(records, 0));
this.all.fill(Ext.query(this.itemSelector, this.el.dom));
this.updateIndexes(0);
}
The new additions are in green. I simply added a new class to the DataView called 'x-view-empty' when the store is empty.
You could also add another config parameter called emptyClass that would overwrite the default 'x-view-empty' but I didn't need that. Very simple addition though.
Not sure if this is planned for a future release, but it may be helpful.