`
shaohan126448
  • 浏览: 116215 次
  • 来自: 北京
社区版块
存档分类
最新评论

ext-grid常见问题 FAQ: Grid

阅读更多

grid的常见问题:

1,   grid数据为空.
2,   grid不能正确的显示图片
3,   不能正确排序
4,   TabPanels包括grid
5,   grid单元格中的link
6,   合并字段
7,   自定义row或者column的外观,行为
8,   grid cell添加click事件
9,   store调用load后, Store还是空
10, grid大小随window变化
11, 更新grid单元格(实际上是:store)
12, 从不同的url重新加载grid
13, xml问题
14, 当它应该为空的时候,grid保留记录
15, json Reader的调试
16, 拖动,或者重新加载一条记录
17, 水平滚动条
18, 固定或不固定列宽
19, 隐藏某列
20, grid列固定宽度包装单元格中内容
21, 添加一列
22, toolbar中元素居中
23, 删除选中行
24, 分页,总记录数
25, 通过grid行索引(row index)获取record
26, grid从不同的server或者store, 加载数据
27, 列自动大小
28, 禁某行
29, contentEl,applyTo和renderTo之间的区别
30, 错误数据, red flag显示
31, Editor grid - ComboBox显示
32, 显示边框
33, 删除grid右边的滚动条
34, grid使用footer
35, grid复制单元格内容
36, grid中的comboBoxes
37, grid自定义样式



具体解决方案如下:

1.  grid为空

grid不显示数据
Store不加载数据
grid为空
grid不执行
grid没有监听store
    问题引发的可能原因

    (1).是否定义grid的高度, height,autoHeight,或者layout:'fit'的容器 中的一种

Js代码
grid = new Ext.grid.EditorGridPanel{(  
         //其他configs  
         //不要忘记指定height  
         //三种选择,(1) 显示的指定height,(2)使autoHeight(3)把grid放入一个布局为:fit的容器  
         //autoHeight: true   // autoHeight重新定义高度来显示所有的记录  
         // -- 或者--  
         //height: 350  
)} 

grid = new Ext.grid.EditorGridPanel{(
         //其他configs
         //不要忘记指定height
         //三种选择,(1) 显示的指定height,(2)使autoHeight(3)把grid放入一个布局为:fit的容器
         //autoHeight: true   // autoHeight重新定义高度来显示所有的记录
         // -- 或者--
         //height: 350
)}    (2).是否加载store? 调用方法store.load()

    (3). 是否render grid, Render a grid使用下面的一种:

在grid 配置中使用renderTo 或者 el 自动render
显示的调用render()方法, grid.render()
    (4). render的元素是否存在.

    (5). 如果把一个grid放入一个tab panel中, 尝试在tabPanel的配置中添加 layoutOnTabChange: true

    (6). 如果使用JSON,

JSON 的格式是否正确(可以在www.jslint.com验证你的JSON响应)
确保它不是一个string, (JSON = object)
不要在字段名中使用句点(.)  ("filed.c" ext 不会转译)
确保JSON的结构和render的一致(记录数组处于根节点之下, 等等)
    (7).The render是否正确指定了一个正确的root, JSON中使用该root

检查下面的从JSONReader来的示例响应, 如果你设定一个root 来包装JSON 响应中的数组, 可能象下面:
Js代码
{ 'results': 2, 'rows': [{"CodigoProduto":"3009","TipoProduto":"FERT",  
"DescricaoProduto":"7 UP  Reg. 12 GR 1,50 PET",  
"UnidadeMedidaProduto":"TAB","Sabor":"V-REGULAR",  
"CodigoMarca":"35","ProdutoPesoBruto":"19.448",  
"ProdutoPesoLiquido":"18.760","ProdutoPesoUM":"KG",  
"ProdutoVolume":"18.000","ProdutoVolumeUM":"L",  
"ProdutoUM_PAL":"36","Eliminar":""}]  
}  

{ 'results': 2, 'rows': [{"CodigoProduto":"3009","TipoProduto":"FERT",
"DescricaoProduto":"7 UP  Reg. 12 GR 1,50 PET",
"UnidadeMedidaProduto":"TAB","Sabor":"V-REGULAR",
"CodigoMarca":"35","ProdutoPesoBruto":"19.448",
"ProdutoPesoLiquido":"18.760","ProdutoPesoUM":"KG",
"ProdutoVolume":"18.000","ProdutoVolumeUM":"L",
"ProdutoUM_PAL":"36","Eliminar":""}]
}     (8). 确保一条记录的数据是一个数组中的一条

Java代码
var SecurityItemRecord = Ext.data.Record.create([{name: 'type'}, {name: 'itemName'}]);//OK  
var SecurityItemRecord = Ext.data.Record.create({name: 'type'}, {name: 'itemName'});//NO GOOD 

var SecurityItemRecord = Ext.data.Record.create([{name: 'type'}, {name: 'itemName'}]);//OK
var SecurityItemRecord = Ext.data.Record.create({name: 'type'}, {name: 'itemName'});//NO GOOD    尝试使用firebug进行下面操作

    (I)firebug是否有错误显示

    (II)请求是否发出(查看console)

    (III)该请求是否收到一个响应, 如果是, 把结果拷贝到www.jslint.com中验证格式,   该响应是否是你想要的结果, 检查总记录数, 数组的根目录, 等等

    store load?  添加监听器监测store是否被加载或者有异常( 如何添加监听器? )

       Store 'datachanged', 'load', 'loadexception',

       Proxy  'load' / 'loadexception'

       也可以添加ajax监听器



2. grid不能正常的显示图片(checkboxes, 等等)

    (1), Css文件连接是否正确

    (2), css引用是否正确, 检查相对路径.



3. 排序问题

    (1). 检查store配置(sortInfo和sort type)或者使用setDefaultSort();

Java代码
sortInfo:{field: 'fieldname', direction: 'ASC'}   
//或者调用:  
store.setDefaultSort('fieldname', 'ASC');  

sortInfo:{field: 'fieldname', direction: 'ASC'}
//或者调用:
store.setDefaultSort('fieldname', 'ASC');
    (2). 检查sort type 是否设定

    (3). 如果仅仅针对当前页面排序, 同时排列整个DB查询 remoteSort应该设置为: true(remoteSort默认为本地排序)

    (4). 列排序

          列数据

Html代码
//当前排序  
+-+-------+  
|1|First |  
|2|Last |  
|3|Second|  
+-+-------+  
 
//希望的排序  
+-+-------+  
|1|First |  
|3|Second|  
|2|Last | 

//当前排序
+-+-------+
|1|First |
|2|Last |
|3|Second|
+-+-------+

//希望的排序
+-+-------+
|1|First |
|3|Second|
|2|Last |
    在record定义

Js代码
sortType: function(value)  
{  
   switch (value.toLowerCase())  
   {  
      case 'first': return 1;  
      case 'second': return 2;  
      default: return 3;  
   }  


sortType: function(value)
{
   switch (value.toLowerCase())
   {
      case 'first': return 1;
      case 'second': return 2;
      default: return 3;
   }



4.  Tab Panels中的grid

    (1).  象其他Panel一样, 你可以直接添加一个GridPanle作为一个item.

    (2).  确保Grid Panel是一个Tab Panel

    (3).  在Tab Panel 中设置 layoutOnTabChange

Js代码
//grid对象  
var g = new Ext.grid.GridPanel(  
       title: 'I will be the tab label';  
)  
 
var tabs2 = new Ext.TabPanel({  
       renderTo: document.body,  
       activeTab: 0,  
       widht: '100%' 
       height: 150,  
       frame: true,  
       defaults:{autoScroll: true},  
       items: [0]   //grid 对象  
}) 

//grid对象
var g = new Ext.grid.GridPanel(
       title: 'I will be the tab label';
)

var tabs2 = new Ext.TabPanel({
       renderTo: document.body,
       activeTab: 0,
       widht: '100%'
       height: 150,
       frame: true,
       defaults:{autoScroll: true},
       items: [0]   //grid 对象
}) 
    (4).  例子: http://examples.extjs.eu/?ex=gridintab



5.  grid单元格中的链接

    (1). 自定义一个renderer,  或者

    (2). 使用Ext.grid.RowSelectionModel的rowselect事件, 如下:

Js代码
function handleRowSelect(selectionModel, rowIndex, selectedRecord){  
         //假定记录中存在url字段  
         var url = selectedRecord.get('url');  
         //如果你想打开另外一个窗口  
         window.open(url);  
}  
 
grid.getSelectionModel().on('rowselect',handleRowSelect); 

function handleRowSelect(selectionModel, rowIndex, selectedRecord){
         //假定记录中存在url字段
         var url = selectedRecord.get('url');
         //如果你想打开另外一个窗口
         window.open(url);
}

grid.getSelectionModel().on('rowselect',handleRowSelect);

6.  合并字段为一列

    (1). 连接记录中的两个字段(或多个)

Js代码
var reader = new Ext.data.ArrayReader({},[  
       //合二为一  
       {name:'full_name',type:'string',mapping:'first_name+ " " + obj.last_name'},  
       {name: 'age'}  
]);  
 
var grid = new Ext.grid.GridPanel({  
       store: new Ext.data.Store({  
             render: reader,  
             data: Ext.grid.dummyData  
       }),  
       columns:[  
              {header: 'Full Name',dataIndex: 'full_name'},  
              {header: 'Age',dataIndex:'age'}  
       ]  
}) 

var reader = new Ext.data.ArrayReader({},[
       //合二为一
       {name:'full_name',type:'string',mapping:'first_name+ " " + obj.last_name'},
       {name: 'age'}
]);

var grid = new Ext.grid.GridPanel({
       store: new Ext.data.Store({
             render: reader,
             data: Ext.grid.dummyData
       }),
       columns:[
              {header: 'Full Name',dataIndex: 'full_name'},
              {header: 'Age',dataIndex:'age'}
       ]
})    (2). 可以创建任何你需要的字段.

分享到:
评论

相关推荐

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    本篇文章将深入探讨两种流行的JavaScript表格组件——GT-Grid和EXT-Grid,并通过对比分析它们的特点、功能和使用场景,以帮助开发者选择最适合项目需求的组件。 GT-Grid与EXT-Grid都是用于构建高性能、可定制的表格...

    jcifs-ext-0.9.4.jar

    解压即可得到jcifs-ext-0.9.4.jar, java环境资源,jdk1.6及以上

    ext-2.0 ext-2.0 ext-2.0 ext-2.0 ext-2.0

    ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0

    ext-grid+json简单应用

    在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用EXT-JS的Grid组件与JSON数据源进行集成,以创建一个动态的数据表格。 EXT-JS的Grid组件允许开发者通过定义列模型、存储器和视图来展示数据。在JSON方面,它是一种...

    ext3.0-2009-9-14 17:00:20

    【标题】"ext3.0-2009-9-14 17:00:20" 指的是2009年9月14日17点0分0秒发布的ext3文件系统的一个特定版本,即ext3.0。ext3是一种广泛使用的Linux文件系统,其全称为“Third extended file system”。它是在早期的ext2...

    EXT-JS Grid 用法

    EXT-JS Grid是EXT-JS库中的一个核心组件,它被广泛用于展示和操作大量数据。Grid提供了一种高效、可定制的表格视图,允许用户进行数据浏览、排序、筛选、分页以及编辑。EXT Designer是Sencha公司提供的一个可视化...

    php-ext-xlswriter-ide-helper:PHP 扩展 Xlswriter IDE 助手

    安装扩大pecl install xlswriterIDE 助手composer require viest/php-ext-xlswriter-ide-helper:dev-master文档

    ext--grid--demo

    "ext--grid--demo"可能是一个示例项目,展示了如何在Ext JS环境中使用数据网格功能。 在Ext JS中,Grid是用于显示和操作表格数据的核心组件。它支持多种功能,如排序、分页、过滤、编辑等,使得数据管理变得简单。...

    Ext-JS-4.1-Beta-3.zip

    3. **ext-all-dev.js, ext-all-debug-w-comments.js, ext-all-debug.js, ext-all.js, ext-debug.js, ext.js**:这些都是Ext JS的核心库文件,不同文件的用途各有侧重: - `ext-all-dev.js`:包含了所有组件和功能,...

    spketdwcs-ext-2.1.mxp

    spketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-...

    ext-ux-grid-gridviewmenuplugin

    `Ext-UX-Grid-GridViewMenuPlugin`是一个用于Ext JS框架的用户界面扩展插件,主要功能是增强表格(grid)的菜单功能。这个插件允许开发者为表格的菜单添加自定义事件处理和生成视图,从而提升用户体验并提供更丰富的...

    js ext-4.0.7-gpl

    `js ext-4.0.7-gpl` 标题暗示了这是一个关于ExtJS的开源版本,版本号为4.0.7,遵循GPL协议。这个版本的发布对于开发者来说,意味着他们可以利用此框架构建企业级的Web应用,并且可以深入研究源码,对其进行定制以...

    xml-apis-ext-1.3.04.jar

    xml-apis-ext-1.3.04.jar

    Ext.grid.GridPanel属性祥解

    ### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...

    前端开源库-style-ext-html-webpack-plugin

    其中,“style-ext-html-webpack-plugin”是一个特别值得关注的插件,它专门针对HTML文件的内联样式进行了优化,以提高页面加载速度和用户体验。 **一、插件概述** “style-ext-html-webpack-plugin”是针对...

    flarum-ext-chinese-search:flarum-ext-chinese-search

    flarum-ext-chinese-search Flarum 论坛中文搜索插件 - 基于 xunsearch 搜索引擎开发 如何安装 安装 xunsearch 服务端 参照 注意安装 xunsearch 需要以下依赖库 gawk make gcc g++ zlib1g-dev 安装插件 composer ...

    ext-4.0.0jar.src

    "ext-4.0.0jar.src"是一个与Ext JS框架相关的源代码压缩包,源自其4.0.0版本。Ext JS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序,它提供了丰富的用户界面组件和数据绑定功能。这个特定的版本...

    bcprov-ext-jdk15on-1.54.jar,bcprov-jdk15on-1.54.jar

    为了解决这个问题,我们可以引入Bouncy Castle提供的jar包:bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar。 Bouncy Castle是一个开源的Java加密库,它提供了丰富的加密算法和协议实现,包括对称加密、非...

    ext-ms-win-gdi-desktop-l1-1-0.dll

    ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题

    js doc 工具推荐及使用(二):ext-doc

    本文将深入探讨“ext-doc”这一特定的JS文档工具,它是一款用于生成ExtJS框架代码文档的强大工具。 一、ext-doc简介 ext-doc是专为ExtJS框架设计的文档生成工具,它能够解析源代码中的JSDoc注释,并自动生成易于...

Global site tag (gtag.js) - Google Analytics