Extjs 4.0 怎样对grid的store多层分组,就是groupField不只是一个,store中数据是多层关系,高手求教,急

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Extjs 4.0 怎样对grid的store多层分组,就是groupField不只是一个,store中数据是多层关系,高手求教,急相关的知识,希望对你有一定的参考价值。

参考技术A

    store中加入属性groupField: '要分组的字段',

    添加groupingFeature:

    var groupingFeature= Ext.create('Ext.grid.feature.Grouping',
            groupHeaderTpl: '要分组的字段: name '

     );

    在Ext.grid.panel中加入features属性

    features:[groupingFeature],

追问

这个我知道,但是这样这能分两层,我想分多层,不知如何

追答

    api中有这么一句groupField:Stores support a single level of grouping

     貌似解释了吧

    所以多层分组这种结构多么适合树形结构啊,用树很方便。

    不确定的话lz可以具体查下api

本回答被提问者采纳

GRID 未在 ExtJS 4 中使用 Store 正确呈现

【中文标题】GRID 未在 ExtJS 4 中使用 Store 正确呈现【英文标题】:GRID is not properly rendered in ExtJS 4 by using Store 【发布时间】:2012-03-29 12:32:00 【问题描述】:

这是 HTML 文件的 Src 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
<title>MVC Architecture</title>
<link rel="stylesheet" type="text/css" href="/bh/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
</body>
</html>

文件路径:/bh/Main.js [主文件]

Ext.require('Ext.container.Viewport');
Ext.application(
name: 'App',
appFolder: 'app',
controllers: ['UserController'],

launch: function() 

Ext.create('Ext.container.Viewport', 
layout: 'border',
items: [
        
            xtype: 'userList'
        
       ]
  );
 
);

文件路径:/app/controller/UserController.js [控制器]

Ext.define('App.controller.UserController',
 extend: 'Ext.app.Controller',
 stores: ['UserStore'],
 models:['UserModel'],
 views:['user.UserList'],
 init: function() 
  this.getUserStoreStore().load();
  
);

文件路径:/app/store/UserStore.js

 Ext.define('App.store.UserStore', 
  extend: 'Ext.data.Store',
  model: 'App.model.UserModel',

  proxy: 
   type: 'ajax',
   url: 'app/data/contact.json'
  
);

文件路径:/app/model/UserModel.js [模型]

Ext.define('App.model.UserModel',
extends:'Ext.data.Model',
fields:[
    name: 'name', type: 'string',
    name: 'age', type: 'string',
    name: 'phone', type: 'string',
    name: 'email', type: 'string'
]
);

文件路径:/app/view/UserList.js [查看]

Ext.define('App.view.user.UserList' ,
extend: 'Ext.grid.Panel',
alias:'widget.userList',
title:'Contacts',
region:'center',
resizable:true,
initComponent: function() 
this.store = 'UserStore';
this.columns = [
          text: 'Name',flex:1,sortable: true,dataIndex: 'name',
          text: 'Age',flex:1,sortable: true,dataIndex: 'age',
          text: 'Phone',flex:1,sortable: true,dataIndex: 'phone',
          text: 'Email',flex:1,sortable: true,dataIndex: 'email'
        ];

this.callParent(arguments);

);

在 fire bug 中,它显示 JSON 响应如下:

[
  "name": "Aswini",
   "age": "32",
   "phone": "555-555-5555",
   "email": "aswininayak@.in"
 ]

虽然我有一个有效的 json 响应,但为什么没有显示数据。请帮忙!!!

【问题讨论】:

哦,这是我在 Store 文件中写的 extends 而不是 extend 它应该是 extend:'Ext.data.Model' 您有有效的 JSON 响应,但您的商店中有记录吗? 如果有,可以分享一下解决方案吗? @Patton 检查我的答案,他只需要配置读取,因为他使用的是通用的Ext.data.Store 【参考方案1】:

我相信您的网格没有加载,因为您没有正确加载商店。你应该使用。

this.getStore('userStore').load();

而不是

this.getUserStoreStore().load();

【讨论】:

当你在定义了 store 的 Controller 中使用时,这两个调用是等价的。【参考方案2】:

您应该在代理中配置您的阅读器,如下所示:

Ext.define('App.store.UserStore', 
    extend: 'Ext.data.Store',
    model: 'App.model.UserModel',
    proxy: 
        type: 'ajax',
        url: 'app/data/contact.json',
        reader: 
            type: 'json'
        
    
);

【讨论】:

以上是关于Extjs 4.0 怎样对grid的store多层分组,就是groupField不只是一个,store中数据是多层关系,高手求教,急的主要内容,如果未能解决你的问题,请参考以下文章

关于ExtJS的grid store加载的问题,grid改变列之后,用grid.reconfigure追加列,只加载新追加列的数据

GRID 未在 ExtJS 4 中使用 Store 正确呈现

Extjs中如何遍历grid的数据(正在显示的数据)

ExtJS 4.0中如何获取Ext.grid.plugin.CellEditing,表格单元中被修改的数据

ExtJs4.x怎么去除grid动态加载数据的提示

extjs grid如何动态增加记录