你的位置:首页 > Java教程

[Java教程]EXTJS 4.2 资料 Grid嵌套


如图:

 

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='http://www.cnblogs.com//Resources/Images/16x16/blue16_020.gif'></img>" + '<a href="#" onClick="FunctionActionUpdate()">修改</a>';            var Delete = "<img src='http://www.cnblogs.com//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>