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). 可以创建任何你需要的字段.
分享到:
相关推荐
extjs常见问题http://www.jb51.net/list/list_217_1.htm
关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。
设置tabpanel当前活动页签的样式是Extjs开发中的一项常见需求。 在Extjs4.2中,tabpanel控件的样式是由CSS样式表控制的。在tabpanel中,每个面板对应一个标签页签,使用户可以在多个面板之间进行切换。当用户点击...
内容简介 以用户为中心的时代,应用的界面外观正在变得越来越重要。然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易。...附录A EXT常见问题 附录B EXT对AIR的支持 附录C EXT的版本变迁
ExtJS与.NET结合开发实例详解,具体介绍了EXTJS类库常见控件开发说明。
ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...
内容简介 以用户为中心的时代,应用的界面外观正在变得越来越重要。然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易。...附录A EXT常见问题 附录B EXT对AIR的支持 附录C EXT的版本变迁
资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...
Ext.onReady(function() { /** * 1.创建一个window窗体 */ Ext.define('MyApp.MyWindow', { extend : 'Ext.Window', title : 'welcome!', initComponent : function() { this.items = [{ xtype : 'textfield', ...
有关tomcat部署项目常见问题,extjs包说明
3.1.3 ExtJS与常见JavaScript库的介绍与对比 3.2 创建第一个程序 3.2.1 下载ExtJS 3.2.2 部署到开发工具中 3.2.3 编写HelloWorld.html 3.2.4 运行调试ExtJS 3.3 辅助开发 3.3.1 调试工具Firebug 3.3.2 开发...
SpringMVCHibernate+Extjs项目实例是j2ee比较常见的企业级网站开发框架,里面代码需要配置一定环境在Myeclipse下,要下载extjs自己的库,保证可以运行
第8章 常见Web框架的ExtJS改造 第9章 ExtJS对Ajax的支持 第10章 增强型模板 第11章 数据模型 第12章 Grid组件 第13章 Tree组件 第14章 ExtJS与服务端框架的整合 第15章 主题 第16章 Ext.Direct 第17章 Draw...
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
ExtJS开发资料 公司内部培训使用 ExtJS的常用对象的介绍及其使用技巧 以及 在开放中常见问题及其解决方案
主要内容:ExtJS4.0的基本功能、最常用的表单、面板及布局类、常用工具类与函数、让ExtJS开始响应事件、常见Web框架的ExtJS改造、ExtJs对Ajax69支持、增强型模板、数据模型、Grid组件、Tree组件、ExtJs与服务端框架...
这个项目实现了开发中常见的所有功能,物有所值看了就知道有多好。
本书从ExtJS实现的基本功能开始讲解RIA Web开发,详细讲解ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数,以及ExtJS对事件的响应。本书结合现今流行的Web框架,融合相关技术应用。本书增强型模板...
本书从ExtJS实现的基本功能开始讲解RIA Web开发,详细讲解ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数,以及ExtJS对事件的响应。本书结合现今流行的Web框架,融合相关技术应用。本书增强型模板...