模拟了一个数组，想将其渲染到一个GridPanel上显示，但是到最后的时候居然显示不出来。弄了很久终于找到问题所在。
页面代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ext array grid</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="scripts/extjs/ext-base.js"></script>
<script type="text/javascript" src="scripts/extjs/ext-all.js"></script>
<script type="text/javascript" src="scripts/js/gridpanel.js"></script>
</head>
<div id="gpanel" style="margin: 100,100,100,200;width: 600"></div>
</html>
注意这里的id为gpanel
js代码如下：
Ext.onReady(function(){
//创建表模型
var model = new Ext.grid.ColumnModel(
[
{header:'编号',dataIndex:'id',width:40},//dataIndex : String 要绑定的Store之Record字段名
{header:'名称',dataIndex:'name'},
{header:'性别',dataIndex:'gender'},
{header:'描述',dataIndex:'description'}
]
);
//测试数据
var data =
[
['1','kevin','male','a good boy'],
['2','shower','female','a good boy'],
['3','joey','male','a good boy'],
['4','smith','female','a good boy']
];
//创建store存储数据
var ds = new Ext.data.Store(
{
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},
[
{name:'id'},
{name:'name'},
{name:'gender'},
{name:'description'}
]
)
}
);
//装载数据
ds.load();
//创建gridpanel展现数据
var panel = new Ext.grid.GridPanel({
cm:model,
store:ds,
autoHeight:true,
autoWidth:true
}
);
panel.renderTo("gpanel") //01
});
页面无法渲染，原来问题在01处。有以下几种修改方法：
//创建gridpanel展现数据
var panel = new Ext.grid.GridPanel({
applyTo:gpanel, //02
cm:model,
store:ds,
autoHeight:true,
autoWidth:true
}
);
// panel.render(document.getElementById("gpanel")); //03
panel.render(); //04
//使用panel.renderTo("gpanel")报错
添加02 04，或者注释掉02 04 只是添加03
分享到：
相关推荐
在某些情况下，可能是由于页面刷新或者重定向导致GridPanel的DOM元素被清除，从而使得组件失效。 解决这个问题的一种有效方法是利用全局变量来保存GridPanel的实例。在初次创建GridPanel时，我们可以将其赋值给一个...
这个"EXTJSEXT实例GridPanel"可能是为了演示基本的GridPanel使用方法，包括数据绑定、列定义以及如何在页面上渲染GridPanel。通过学习和实践这个例子，开发者可以快速掌握EXTJS中数据展示的核心技术。配合EXT提供的...
renderTo: Ext.getBody() // 渲染到页面 }); ``` 接下来，我们需要为GridPanel添加双击事件监听器。在ExtJs中，我们可以使用`viewConfig`配置项中的`selType`来定义选择模型，通常是'checkboxmodel'，以便在每行前...
最后，我们将GridPanel渲染到页面上。 对于更复杂的应用场景，可能需要涉及以下知识点： - **Ajax数据加载**: 如果数据不在本地，我们需要设置store的proxy来从服务器拉取数据。 - **分页**: 使用`pagingToolbar`...
4. **View**：View是GridPanel的视图层，负责将Store中的数据渲染到页面上。它使用Ext.XTemplate或Ext.Template进行模板渲染，并使用Scroller或paging toolbar来支持滚动和分页功能。 5. **GridPanel的高级特性**：...
这个页面可以动态生成，将GridPanel的数据导出到一个适合打印的格式，如HTML表格，然后再进行渲染。预览页面可以提供用户查看和确认打印效果的机会。 "paging.html"、"array-grid.html"、"paging.js"和"array-grid....
`store`属性指定了数据源，`cm`设置了列模型，`renderTo`决定GridPanel将在页面的哪个元素内渲染。 EXTJS GridPanel的其他特性还包括： - **可编辑性**：通过`cellEditing`插件，我们可以实现单元格级别的编辑。 ...
-- 在HTML文件中定义GridPanel渲染的位置 --> <div id="grid-container"></div> ``` #### 四、总结 通过上述步骤，我们可以利用Servlet技术和Extjs框架实现在Web前端界面动态展示数据库中的数据。这种方法不仅适用...
然后，调用`makeGrid`函数来实际创建并渲染GridPanel。 `makeGrid`函数是实现动态生成GridPanel的关键。在这里，它会创建一个新的Store对象，用于存储从服务器获取的数据，以及新的ColumnModel对象，包含所有动态...
这种情况下，某些调试工具或者插件（如Firbug）的界面变化可能会引起页面的重新渲染，从而使GridPanel得以正确渲染。 解决方法可以从以下几个方面入手： 1. 确保GridPanel的渲染逻辑正确无误。在添加数据之前，应...
// 渲染到页面 }); ``` 通过以上代码，我们成功地移除了`gridPanel`表头的全选框。需要注意的是，这种方法仅适用于ExtJS 3.x版本，因为`x-grid3-hd-checker`是该版本中的类名。在更现代的版本（如4.x和5.x）中，...
4. **RenderTo**: `'tagModelManager_tagModelDiv'` - 指定`GridPanel`将渲染到哪个DOM元素。 5. **LoadMask**: `{msg: '正在加载数据，请稍候....'}` - 当数据加载时，显示一个遮罩提示用户数据正在加载。 6. **...
接下来，我们可以创建Grid Panel，将其渲染到页面，并与Store绑定： ```javascript Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: userStore, width: 400, height: 200, title: '...
在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上，通常涉及到数据模型（Model）、存储（Store）、列模型（ColumnModel）以及渲染器（Renderer）的配置。以下是一个详细的步骤说明： 1. **创建数据模型...
5. 渲染GridPanel：将GridPanel添加到页面布局中，数据将自动显示。 通过这种方式，表单可以与GridPanel结合，用户可以在表单中输入数据，提交后更新XML文件，或者从XML文件中检索数据填充表单，实现数据的动态展示...
5. **绑定到GridPanel**：将PagingStore与GridPanel关联，GridPanel会根据PagingStore的数据自动渲染表格。 6. **添加PagingToolbar**：在GridPanel下方添加PagingToolbar，设置其store属性为PagingStore实例。 ...
这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据展示。 首先，`Ext.Panel`是一个可配置的容器，它可以包含其他组件，如按钮、表格、表单等。它提供了丰富的布局管理，如`fit`...
- 组件渲染方法：`render`方法用于将组件渲染到页面上。 #### 9. 常用组件 Extjs提供丰富的组件库，包括： - 按钮、日期选择器、ComboBox等，每种组件都有其特定的使用场景和配置方式。 #### 10. 数据管理 Extjs...
HTML文件中会引入ExtJS库和项目相关的脚本，JavaScript文件则包含了GridPanel和TreePanel的配置及功能实现，服务器端代码可能包含ASP.NET页面或控制器来处理Ajax请求。 总结，这个示例展示了如何使用ExtJS的...
8. **样式和布局**：调整GridPanel的样式，使其适应页面布局，可能需要使用CSS或SASS。 9. **测试和调试**：确保所有功能正常工作，使用浏览器的开发者工具进行调试。 总之，"Ext4mvc实现grid"项目涉及到Ext JS 4...