扩展grid------RowExpander.js

最新推荐文章于 2018-05-26 11:59:18 发布

最新推荐文章于 2018-05-26 11:59:18 发布 · 213 阅读

文章标签：

#EXT #J# #HTML

ExtJs 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用ExtJS库实现网格数据行的展开功能，通过RowExpander组件展示额外的数据详情，如公司信息和简介。代码示例展示了如何配置Store、ColumnModel以及RowExpander模板。

首先引入JS：RowExpander.js 这个文件可以在ext提供的example/grid找到

Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{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'},
{name: 'desc'}
]);

[color=red] var expander = new xg.RowExpander({
tpl : new Ext.Template(
'Company: {company} ',
'Summary: {desc}'
)
});[/color]

var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
[color=red] expander,[/color]
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
[color=red] plugins: expander,[/color]
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});
});

example/grid/grid3.html看到效果