PDA

View Full Version : Heavily styling an Ext.grid.GridPanel ?



cblin
6 Apr 2011, 7:22 AM
Hi,

I'd like to know if someone can provide me advices or tips to style an ExtJs GridPanel so it looks more "fun".

An example of what I'd like to do :
www.hotels.com (http://www.uie.com/images/Hotels_SearchResults.png),
wwww.kayak.com (http://www.uie.com/images/Search_results_part2/Kayak.com_SearchResults.png)

The first thing I thought was to use Ext.DataView.
The problem with this approach is that you have a hard time to write a component that will render multiple grids with the same "style".
(ex: 1st "column" = actions, 2nd column = multiline description)

So my idea was to customize the div that contains a row (.x-grid3-row) but this also seems hard.

Regards,

chris

tobiu
6 Apr 2011, 12:02 PM
you can do a lot with the cell-renderers -> meta attribute.
for example add (conditional) css classes for each column.


best regards
tobiu

cblin
5 May 2011, 7:56 AM
sorry for the delay in my response, it seems I badly configure my notifications

I had try to define a new column class with an xtype to do so but this is very annoying since you need to be careful each time you redefine a renderer...

I finally go for a more generic solution (albeit less elegant) : styling the x-grid3-row and creating js file to adjust what goes wrong in extjs :


.search_results_grid .x-grid3-row {
border: 2px solid #EEEEEE;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 3px;
padding: 3px;
}

.search_results_grid .x-grid3-row td {
vertical-align: middle;
}

.search_results_grid .row_odd {
background-color: #EFEFEF;
}

.search_results_grid .row_even {
background-color: #FFFFFF;
}

.search_results_grid .x-grid3-row-over {
border-color: #EEEEEE;
background-image: none;
}
.search_results_grid .x-grid3-row-over.row_odd {
background-color: #EFEFEF;
}
.search_results_grid .x-grid3-row-over.row_even {
background-color: #FFFFFF;
}

.search_results_grid .x-grid3-row-selected td {
font-weight: bold;
}

.search_results_grid .x-grid3-cell-inner {
white-space: normal;
}




factory: function(config) {
return {
viewConfig: Ext.apply(config.viewConfig || {}, this.viewConfigFactory()),
cls: (config.cls ? config.cls + ' ' : '') + 'search_results_grid'
}
},
viewConfigFactory: function() {
return {
getRowClass: function(record, number) {
return (number % 2) ? 'row_odd' : 'row_even';
},
autoExpand : function(preventUpdate){
var g = this.grid, cm = this.cm;
if(!this.userResized && g.autoExpandColumn){
var tw = cm.getTotalWidth(false);
var aw = this.grid.getGridEl().getWidth(true)-this.getScrollOffset();
if(tw != aw){
var ci = cm.getIndexById(g.autoExpandColumn);
var currentWidth = cm.getColumnWidth(ci);
var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax);
//hack because of the margin and padding added by our css
cw -= 16;
//end of hack
if(cw != currentWidth){
cm.setColumnWidth(ci, cw, true);
if(preventUpdate !== true){
this.updateColumnWidth(ci, cw);
}
}
}
}
}
}
}