标签：style blog http color java os io for
GridPanel row spanning (well, sort of...)
The current GridPanel implementation doesn‘t support row spanning, because the rows aren‘t part of the same table.
The only thing you can do is make the grid look like it has row spanning by changing the css.
Example:
Code:
<style type="text/css">
.grid-row-span .x-grid3-row {
border-bottom: 0;
}
.grid-row-span .x-grid3-col {
border-bottom: 1px solid #ededed;
}
.grid-row-span .row-span {
border-bottom: 1px solid #fff;
}
.grid-row-span .row-span-first {
position: relative;
}
.grid-row-span .row-span-first .x-grid3-cell-inner {
position: absolute;
}
.grid-row-span .row-span-last {
border-bottom: 1px solid #ededed;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout: ‘fit‘,
items: {
xtype: ‘grid‘,
store: new Ext.data.ArrayStore({
fields: [
{name: ‘company‘},
{name: ‘price‘, type: ‘float‘},
{name: ‘change‘, type: ‘float‘},
{name: ‘pctChange‘, type: ‘float‘},
{name: ‘lastChange‘, type: ‘date‘, dateFormat: ‘n/j h:ia‘},
{name: ‘industry‘}
],
data: [
[‘3m Co‘,71.72,0.02,0.03,‘4/2 12:00am‘, ‘Manufacturing‘],
[‘Alcoa Inc‘,29.01,0.42,1.47,‘4/1 12:00am‘, ‘Manufacturing‘],
[‘Altria Group Inc‘,83.81,0.28,0.34,‘4/3 12:00am‘, ‘Manufacturing‘],
[‘American Express Company‘,52.55,0.01,0.02,‘4/8 12:00am‘, ‘Finance‘],
[‘American International Group, Inc.‘,64.13,0.31,0.49,‘4/1 12:00am‘, ‘Services‘],
[‘AT&T Inc.‘,31.61,-0.48,-1.54,‘4/8 12:00am‘, ‘Services‘],
[‘Boeing Co.‘,75.43,0.53,0.71,‘4/8 12:00am‘, ‘Manufacturing‘],
[‘Caterpillar Inc.‘,67.27,0.92,1.39,‘4/1 12:00am‘, ‘Services‘],
[‘Citigroup, Inc.‘,49.37,0.02,0.04,‘4/4 12:00am‘, ‘Finance‘],
[‘E.I. du Pont de Nemours and Company‘,40.48,0.51,1.28,‘4/1 12:00am‘, ‘Manufacturing‘],
[‘Exxon Mobil Corp‘,68.1,-0.43,-0.64,‘4/3 12:00am‘, ‘Manufacturing‘],
[‘General Electric Company‘,34.14,-0.08,-0.23,‘4/3 12:00am‘, ‘Manufacturing‘],
[‘General Motors Corporation‘,30.27,1.09,3.74,‘4/3 12:00am‘, ‘Automotive‘],
[‘Hewlett-Packard Co.‘,36.53,-0.03,-0.08,‘4/3 12:00am‘, ‘Computer‘],
[‘Honeywell Intl Inc‘,38.77,0.05,0.13,‘4/3 12:00am‘, ‘Manufacturing‘],
[‘Intel Corporation‘,19.88,0.31,1.58,‘4/2 12:00am‘, ‘Computer‘],
[‘International Business Machines‘,81.41,0.44,0.54,‘4/1 12:00am‘, ‘Computer‘],
[‘Johnson & Johnson‘,64.72,0.06,0.09,‘4/2 12:00am‘, ‘Medical‘],
[‘JP Morgan & Chase & Co‘,45.73,0.07,0.15,‘4/2 12:00am‘, ‘Finance‘],
[‘McDonald\‘s Corporation‘,36.76,0.86,2.40,‘4/2 12:00am‘, ‘Food‘],
[‘Merck & Co., Inc.‘,40.96,0.41,1.01,‘4/2 12:00am‘, ‘Medical‘],
[‘Microsoft Corporation‘,25.84,0.14,0.54,‘4/2 12:00am‘, ‘Computer‘],
[‘Pfizer Inc‘,27.96,0.4,1.45,‘4/8 12:00am‘, ‘Services‘, ‘Medical‘],
[‘The Coca-Cola Company‘,45.07,0.26,0.58,‘4/1 12:00am‘, ‘Food‘],
[‘The Home Depot, Inc.‘,34.64,0.35,1.02,‘4/8 12:00am‘, ‘Retail‘],
[‘The Procter & Gamble Company‘,61.91,0.01,0.02,‘4/1 12:00am‘, ‘Manufacturing‘],
[‘United Technologies Corporation‘,63.26,0.55,0.88,‘4/1 12:00am‘, ‘Computer‘],
[‘Verizon Communications‘,35.57,0.39,1.11,‘4/3 12:00am‘, ‘Services‘],
[‘Wal-Mart Stores, Inc.‘,45.45,0.73,1.63,‘4/3 12:00am‘, ‘Retail‘],
[‘Walt Disney Company (The) (Holding Company)‘,29.89,0.24,0.81,‘4/1 12:00am‘, ‘Services‘]
],
sortInfo: {
field: ‘industry‘,
direction: ‘ASC‘
}
}),
cls: ‘grid-row-span‘,
columns: [
{header: "Industry", width: 200, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {
var first = !rowIndex || value !== store.getAt(rowIndex - 1).get(‘industry‘),
last = rowIndex >= store.getCount() - 1 || value !== store.getAt(rowIndex + 1).get(‘industry‘);
meta.css += ‘row-span‘ + (first ? ‘ row-span-first‘ : ‘‘) + (last ? ‘ row-span-last‘ : ‘‘);
if (first) {
var i = rowIndex + 1;
while (i < store.getCount() && value === store.getAt(i).get(‘industry‘)) {
i++;
}
var rowHeight = 20, padding = 6,
height = (rowHeight * (i - rowIndex) - padding) + ‘px‘;
meta.attr = ‘style="height:‘ + height + ‘;line-height:‘ + height + ‘;"‘;
}
return first ? value : ‘‘;
}, dataIndex: ‘industry‘},
{header: "Company", width: 300, sortable: true, dataIndex: ‘company‘},
{header: "Price", width: 100, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: ‘price‘},
{header: "Change", width: 100, sortable: true, dataIndex: ‘change‘, renderer: Ext.util.Format.usMoney},
{header: "Last Updated", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer(‘m/d/Y‘), dataIndex: ‘lastChange‘}
],
columnLines: true
}
});
});
</script>
{header: "日期", width: 100, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {
if(rowIndex>0){
return store.getAt(rowIndex - 1).get(‘key‘)!=store.getAt(rowIndex).get(‘key‘) ? value : ‘‘;
}else{
return value;
}
}, dataIndex: ‘publishdate‘
/////////////////////////////
标签：style blog http color java os io for
原文地址：http://my.oschina.net/u/1398304/blog/303811
