PDA

View Full Version : Setting gridView or viewconfig to a grid in a form



RollingFred
7 Sep 2010, 5:14 AM
First of: Ext Designer is great! Of course, as with all new things, ramping up is taking time but I'm getting there.

I have a question about syntax:
I have a Form with a Grid inside. The Form class is SearchFormUi, the grid inside is autoref with gridSingleResults.
I want to change the getRowClass of that grid. I'm trying to not modify any of the auto-generated files from Designer and would like to do that in the page calling those objects:



RF = Ext.extend(SearchFormUi, {
applyTo: 'divSearchForm', //div in my page to receive the form
initComponent: function () {
RF.superclass.initComponent.call(this);
}
});
var searchForm = new RF();

// This below works fine (maybe an easier way? RecordCount is a Label in the bbar)
searchForm.gridSingleResults.getStore().on("load", function(store, text) {
if (store.getCount() == 0)
searchForm.RecordCount.setText('No run to display');
else
searchForm.RecordCount.setText(store.getCount() + ' Runs returned');
});

searchForm.btnSearch.on('click', function() {
searchForm.gridSingleResults.getStore().reload({
params:{
txtDateFrom: txtDateFrom.value,
txtDateTo: txtDateTo.value,
txtUsers: txtUsers.value
}
});
});


I have the follwing getRowClass that I want to apply to gridSingleResults:



getRowClass : function (r, index) {
var cls = '';
switch (r.data["StatusCode"]) {
case 'INCOMPLETE' :
cls = 'grey-row';
break;
case 'SUCCESS' :
cls = '';
break;
default :
cls = 'red-row';
break;
}//end switch
return cls;
}


How do I do that?

Once I'll have all my use cases with examples, my dev time should be slashed.

jarrednicholls
7 Sep 2010, 8:36 AM
Hey RollingFred,

You can apply the getRowClass to the instance of the GridView like so:



Ext.apply(searchForm.gridSingleResults.view, {
getRowClass : function (r, index) {
var cls = '';
switch (r.data["StatusCode"]) {
case 'INCOMPLETE' :
cls = 'grey-row';
break;
case 'SUCCESS' :
cls = '';
break;
default :
cls = 'red-row';
break;
}//end switch
return cls;
}
});


You can of course do it within the SearchForm class as well, in the initComponent function after the superclass initComponent is called. You could also add a GridView to the GridPanel in the Designer, and right-click on the GridView and choose "Promote to Class" to bring the GridView up to a top-level node, which means it will be exported as its own class. In this exported class (.js, not .ui.js), you can set the getRowClass function in there.

Hope that helps!

RollingFred
7 Sep 2010, 10:51 AM
Excellent. Just the basis I needed!