如图：
var ParentContCateId = 0;
var start = 0;
var limit = 20;
DistributionPointForm = function () {
Ext.define('Warehouse', {
extend: 'Ext.data.Model',
fields: [
{ name: 'StoreId' },
{ name: 'StoreCode' },
{ name: 'StoreName', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'PostCode', type: 'string' },
{ name: 'AreaId', type: 'string' },
{ name: 'ManufacturerId', type: 'string' },
{ name: 'ManagerMethod', type: 'string' },
{ name: 'Contactor', type: 'string' },
{ name: 'ContactInfo', type: 'string' },
{ name: 'City', type: 'string' },
//{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }, ]
});
var mainStore = Ext.create('Ext.data.Store', {
model: 'Warehouse',//这个地方user不是一个对象，而是一个类
pageSize: limit, //页容量20条数据
//是否在服务端排序 （true的话，在客户端就不能排序）
remoteSort: false,
remoteFilter: true,
method: 'POST',
proxy: {//代理
type: 'ajax',
url: '/UI/HttpHandlerData/StoreManagement/DistributionPoint.ashx?operation=SearchInfoWarehouse',
extraParams: {
start: start,
limit: limit
},
reader: {
type: 'json', //返回数据类型为json格式
root: 'Table', //根节点
totalProperty: 'result' //数据总条数
}
},
sorters: [{
//排序字段。
property: 'StoreId',
//排序类型，默认为 ASC
direction: 'desc'
}],
autoLoad: true //即时加载数据
}); function displayInnerGrid(renderId) {
//Model for the inside grid store
Ext.define('DistributionPoint', {
extend: 'Ext.data.Model',
fields: [
{ name: 'DPId' },
{ name: 'CompanyId' },
{ name: 'CompanyName' },
{ name: 'StoreId' },
{ name: 'DPCode' },
{ name: 'DPName' },
{ name: 'LocationId' },
{ name: 'LocationName' },
{ name: 'Leadtime' },
{ name: 'CompanyTypeName' },
{ name: 'CompanyTypeId' }
]
}); var insideGridStore = Ext.create('Ext.data.Store', {
model: 'DistributionPoint',//这个地方DistributionPoint不是一个对象，而是一个类
pageSize: limit, //页容量20条数据
remoteSort: false,
remoteFilter: true,
method: 'POST',
proxy: {//代理
type: 'ajax',
url: '/UI/HttpHandlerData/StoreManagement/DistributionPoint.ashx?operation=SearchInfoDistributionPoint',
extraParams: {
start: start,
limit: limit,
StoreId: renderId //传入StoreId进行过滤
},
reader: {
type: 'json', //返回数据类型为json格式
root: 'Table', //根节点
totalProperty: 'result' //数据总条数
}
},
groupField: 'CompanyTypeName', //确定哪一项分组
sorters: [{
//排序字段。
property: 'DPId',
//排序类型，默认为 ASC
direction: 'ASC'
}],
autoLoad: true //即时加载数据
}); innerGrid = Ext.create('Ext.grid.Panel', {
title: '门店信息列表',
store: insideGridStore,
forceFit: true,//填充grid宽度
selModel: {
selType: 'cellmodel'
},
columns: [
{ header: "DPId", dataIndex: 'DPId', width: 100, hidden: true },
{ header: "StoreId", dataIndex: 'StoreId', width: 200, hidden: true },
{ header: "门店编码", dataIndex: 'DPCode', width: 100 },
{ header: "门店名称", dataIndex: 'DPName', width: 200 },
{ header: "所在地区", dataIndex: 'LocationName', width: 200 },
{ header: "交付周期", dataIndex: 'Leadtime', width: 100 },
{ header: "厂商名称", dataIndex: 'CompanyName', width: 200 },
{ header: "厂商类型", dataIndex: 'CompanyTypeId', width: 100 },
{ header: "门店类型", dataIndex: 'CompanyTypeName', width: 100 },
{
header: '操作', align: 'left', width: 100, renderer:
function (v, nv, v1) {
var Update = "<img src='/Resources/Images/16x16/blue16_020.gif'></img>" + '<a href="#" onClick="FunctionActionUpdate()">修改</a>';
var Delete = "<img src='/Resources/Images/16x16/blue16_013.gif'></img>" + '<a href="#" onClick="FunctionActionDelete()">删除</a>';
return Update + ' ' + Delete;
}
}
],
columnLines: true,
autoWidth: true,
autoHeight: true,
frame: false,
iconCls: 'icon-grid',
features: [{ ftype: 'grouping' }],
renderTo: renderId,
tbar: [
"->", {
xtype: 'button', icon: '/Resources/Images/16x16/blue16_002.gif', text: "添加",
handler: function () {
win.show();
win.setTitle('添加');
}
}]
}); innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]);
}
function destroyInnerGrid(record) {
var parent = document.getElementById(record.get('StoreId'));
var child = parent.firstChild;
while (child) {
child.parentNode.removeChild(child);
child = child.nextSibling;
}
}
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainGrid',
store: mainStore,
forceFit: true,//填充grid宽度
stripeRows: true,
columns: [
{ header: "仓库id", dataIndex: 'StoreId', width: 200, hidden: true },
{ header: '序号', xtype: 'rownumberer', align: 'left', width: 100 },
{ header: "仓库编码", dataIndex: 'StoreCode', width: 200 },
{ header: "仓库名称", dataIndex: 'StoreName', width: 200 },
{ header: "所在城市", dataIndex: 'City', width: 200 },
],
autoWidth: true,
autoHeight: true,
selModel: {
selType: 'cellmodel'
},
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div id="{StoreId}">',
'</div>'
]
}],
collapsible: true,
animCollapse: false,
title: '仓库信息列表',
iconCls: 'icon-grid',
initComponent: function () {
var me = this;
this.callParent(arguments);
}
}); var mainGrid = new Ext.create('MainGrid'); mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
displayInnerGrid(record.get('StoreId'));
}); mainGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
}); mainGrid.setHeight(window.innerHeight);
mainGrid.setWidth(window.innerWidth);
Ext.EventManager.onWindowResize(function () {
mainGrid.setHeight(window.innerHeight);
mainGrid.setWidth(window.innerWidth);
}); //**************页面主体开始*****************
var tabpanel = Ext.createWidget('tabpanel', {
activeTab: 0, //指定默认的活动tab
height: '100%',
width: '100%',
minTabWidth: 115,
tabWidth: 135,
plain: true, //True表示tab候选栏上没有背景图片（默认为false）
enableTabScroll: true, //选项卡过多时，允许滚动
defaults: { autoScroll: true },
items: [{
id: "tab1",
title: '配送点设置',
icon: '/Resources/Images/16x16_Classic/20101204100142490_easyicon_cn_16.png',
items: mainGrid,
closable: true //这个tab可以被关闭
}, {
id: "tab2",
title: '配送点详情',
icon: '/Resources/Images/16x16_Classic/20101204100142490_easyicon_cn_16.png',
html: "这只是一个非常普通的Tab。",
items: [{ xtype: 'button', text: '按钮' }],
closable: true //这个tab可以被关闭
}]
});
//**************页面主体结束*****************
var panel = new Ext.Viewport({
border: false,
layout: 'border',
items: [
{
region: 'center',
border: false,
layout: 'fit',
items: tabpanel
}]
});
}
html：
<body>
<div>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
DistributionPointForm();
});
</script>
</div>
</body>