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

extJs 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代码 复制代码
  1. grid = new Ext.grid.EditorGridPanel{(   
  2.          //其他configs   
  3.          //不要忘记指定height   
  4.          //三种选择,(1) 显示的指定height,(2)使autoHeight(3)把grid放入一个布局为:fit的容器   
  5.          //autoHeight: true   // autoHeight重新定义高度来显示所有的记录   
  6.          // -- 或者--   
  7.          //height: 350   
  8. )}  
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代码 复制代码
    1. 'results': 2, 'rows': [{"CodigoProduto":"3009","TipoProduto":"FERT",   
    2. "DescricaoProduto":"7 UP  Reg. 12 GR 1,50 PET",   
    3. "UnidadeMedidaProduto":"TAB","Sabor":"V-REGULAR",   
    4. "CodigoMarca":"35","ProdutoPesoBruto":"19.448",   
    5. "ProdutoPesoLiquido":"18.760","ProdutoPesoUM":"KG",   
    6. "ProdutoVolume":"18.000","ProdutoVolumeUM":"L",   
    7. "ProdutoUM_PAL":"36","Eliminar":""}]   
    8. }   
    { '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代码 复制代码
  1. var SecurityItemRecord = Ext.data.Record.create([{name: 'type'}, {name: 'itemName'}]);//OK   
  2. 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代码 复制代码
  1. sortInfo:{field: 'fieldname', direction: 'ASC'}    
  2. //或者调用:   
  3. store.setDefaultSort('fieldname''ASC');   
sortInfo:{field: 'fieldname', direction: 'ASC'} 
//或者调用:
store.setDefaultSort('fieldname', 'ASC'); 

    (2). 检查sort type 是否设定

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

    (4). 列排序

          列数据

Html代码 复制代码
  1. //当前排序   
  2. +-+-------+   
  3. |1|First |   
  4. |2|Last |   
  5. |3|Second|   
  6. +-+-------+   
  7.   
  8. //希望的排序   
  9. +-+-------+   
  10. |1|First |   
  11. |3|Second|   
  12. |2|Last |  
//当前排序
+-+-------+
|1|First |
|2|Last |
|3|Second|
+-+-------+

//希望的排序
+-+-------+
|1|First |
|3|Second|
|2|Last |

    在record定义

Js代码 复制代码
  1. sortType: function(value)   
  2. {   
  3.    switch (value.toLowerCase())   
  4.    {   
  5.       case 'first'return 1;   
  6.       case 'second'return 2;   
  7.       defaultreturn 3;   
  8.    }   
  9. }  
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代码 复制代码
  1. //grid对象   
  2. var g = new Ext.grid.GridPanel(   
  3.        title: 'I will be the tab label';   
  4. )   
  5.   
  6. var tabs2 = new Ext.TabPanel({   
  7.        renderTo: document.body,   
  8.        activeTab: 0,   
  9.        widht: '100%'  
  10.        height: 150,   
  11.        frame: true,   
  12.        defaults:{autoScroll: true},   
  13.        items: [0]   //grid 对象   
  14. })  
//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代码 复制代码
  1. function handleRowSelect(selectionModel, rowIndex, selectedRecord){   
  2.          //假定记录中存在url字段   
  3.          var url = selectedRecord.get('url');   
  4.          //如果你想打开另外一个窗口   
  5.          window.open(url);   
  6. }   
  7.   
  8. 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代码 复制代码
  1. var reader = new Ext.data.ArrayReader({},[   
  2.        //合二为一   
  3.        {name:'full_name',type:'string',mapping:'first_name+ " " + obj.last_name'},   
  4.        {name: 'age'}   
  5. ]);   
  6.   
  7. var grid = new Ext.grid.GridPanel({   
  8.        store: new Ext.data.Store({   
  9.              render: reader,   
  10.              data: Ext.grid.dummyData   
  11.        }),   
  12.        columns:[   
  13.               {header: 'Full Name',dataIndex: 'full_name'},   
  14.               {header: 'Age',dataIndex:'age'}   
  15.        ]   
  16. })  
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). 可以创建任何你需要的字段.

 

分享到:
评论

相关推荐

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    ExtJs grid多选时获取选中的所有值

    ### ExtJs Grid 多选及获取选中值详解 #### 一、背景介绍 在Web应用开发中,ExtJs 是一款非常强大的JavaScript框架,它能够帮助开发者快速构建复杂的用户界面。其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个...

    ExtJS笔记---Grid实现后台分页

    后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的页面响应慢或浏览器内存压力过大的问题。在ExtJS中,Grid组件通过与服务器端交互来实现这一功能。 ...

    ExtJS4.0 分享GridHeaderFilters插件

    在开发过程中,遇到问题时,利用ExtJS的调试模式和浏览器的开发者工具可以帮助定位和解决问题。 以上内容只是基于通常使用GridHeaderFilters插件时会遇到的常见知识点,实际博客可能涉及更多细节,如插件的具体...

    EXTJS Grid导出Excel

    在EXTJS Grid中导出数据到Excel是一种常见的需求,它允许用户方便地处理和分析大量数据。EXTJS是一个强大的JavaScript库,专门用于构建富客户端Web应用程序,而Grid组件是其核心部分,用于展示和管理表格数据。在...

    ExtJs6.5Grid列表导出(包含样式)

    在ExtJs 6.5版本中,开发人员经常需要实现数据导出功能,特别是对于Grid组件,这是一项常见的需求。Grid列表通常用于展示大量结构化的数据,而导出功能可以帮助用户将这些数据保存到本地,方便进一步分析或共享。...

    php+extjs+grid实时显示更新数据

    EXTJS的Grid组件是一种强大的数据展示工具,可以轻松地处理大量数据,并提供灵活的排序、筛选和分页功能。 首先,我们需要理解PHP在其中的角色。PHP是一种广泛使用的服务器端脚本语言,特别适合于处理动态内容和与...

    ExtJs分页

    ExtJS 分页是一种在Web应用中管理大量数据的常见技术,尤其在与Spring MVC框架集成时,能够提供高效的数据展示和交互。在ExtJS中,分页通常与数据网格(Grid)组件一起使用,用于显示从后端服务(如SQL Server 2008...

    php extjs grid 装载数据

    在PHP和ExtJS框架下,实现数据加载到Grid控件是一项常见的任务,特别是在构建Web应用程序时,用于展示和管理大量的结构化数据。ExtJS Grid是一个强大的数据网格组件,它可以高效地展示和操作表格数据,而PHP则作为...

    ExtJS Filter 实现表格过滤

    对于大数据量的Grid,直接过滤所有数据可能会导致性能问题。为了避免这种情况,可以采用分页加载和服务器端过滤,只加载当前页面所需的数据,并在服务器端执行过滤操作。 ### 示例代码 ```javascript Ext.create('...

    EX江湖 电子工业出版社

    "EX江湖 电子工业出版社"这本书籍,很可能是EXTJS开发者的宝贵资源,它可能涵盖了EXTJS的原理、最佳实践、常见问题解决以及EXTJS在实际项目中的应用案例。通过阅读这本书,开发者不仅可以提升EXTJS技能,还能了解到...

    ssh+extjs4.0grid增删改查

    在"ssh+extjs4.0grid增删改查"这个主题中,我们将深入探讨如何将SSH框架与Ext JS 4.0 Grid集成,实现数据的CRUD(Create, Read, Update, Delete)功能。 1. **Struts2整合Hibernate**: - 配置Struts2-Hibernate...

    ExtJs grid行 右键菜单的两种方法

    在ExtJs中,创建一个Grid并为其添加右键菜单是常见的需求,特别是在开发富客户端应用时。本篇文章将介绍两种实现ExtJs grid行右键菜单的方法。这两种方法都是基于ExtJs框架的功能,允许用户在点击网格行时显示自定义...

    ssh框架+extjs4.0grid实例

    SSH框架,全称为Struts2、Spring和Hibernate的组合,是一种常见的Java Web开发框架,用于构建高效、可扩展的企业级应用程序。在这个实例中,SSH框架与ExtJS 4.0结合,提供了强大的前端展示和后端数据处理能力。 ...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    本篇文章将深入探讨ExtJS中的Tree和Grid,特别是Buffer Grid与Progress Grid的实现。 **一、ExtJS Tree组件** 1. **Tree组件基本概念**:Tree组件用于展示层次结构的数据,类似于操作系统中的文件系统,具有可折叠/...

    使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能!

    在IT行业中,Web开发是一项核心任务,而ExtJS和Servlet是两种常见的技术工具,用于构建交互性强、功能丰富的用户界面和后端数据处理。本文将详细介绍如何利用ExtJS4和Servlet来实现Grid组件的数据填充,并集成增删改...

    extjs grid设置某列背景颜色和字体颜色的方法

    以上就是EXTJS Grid中设置某列背景颜色和字体颜色的常见方法。通过灵活运用`renderer`和`getRowClass`,我们可以根据业务需求自定义Grid的显示效果,增强用户体验。记得在实际项目中根据实际需求调整颜色和条件判断...

    extjs 学习笔记(三) 最基本的grid

    在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。EXTJS的Grid具有丰富的特性和灵活性,是其UI框架的一大亮点。在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 ...

    ExtJS静态使用示例

    4. **树的使用**:ExtJS的树形组件(Tree)用于展示层次结构的数据,常见于目录结构或组织结构的展示。树形组件支持节点的展开、折叠、拖放操作,也可以与其他组件如Grid结合使用。示例中可能演示了如何构建一个基本...

Global site tag (gtag.js) - Google Analytics