var searchRstGridPanel = new Ext.grid.GridPanel ({
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: searchNodeFromLuceneDataUrl
}), // 必须是 HttpProxy
reader:new Ext.data.JsonReader({
totalProperty: 'totalCount',
idProperty:'nodeId',
root:'data',
remoteSort: true,
fields: [
'nodeId','nodeName', 'nodeType', 'path'
]
})
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'nodeId', header: '序号', width: 200, sortable: true, dataIndex: 'nodeId'},
{header: '节点类型', dataIndex: 'nodeType'},
{header: '节点名称', dataIndex: 'nodeName'},
{header: '路径', dataIndex: 'path'}
]
}),
viewConfig: {
forceFit: true,
// Return CSS class to apply to rows depending upon data values
getRowClass: function(record, index) {
}
},
anchor:'100% 300',
frame: true,
border:false,
iconCls: 'icon-grid'
});
json字符串:
{success:true,'totalCount':'2',data:[{'nodeId':'2c9090652fb50c67012fb51609720002','nodeType':'nd:base','nodeName':'电视剧','path':'mas'},{'nodeId':'2c9090652fb50c67012fb51a64070005','nodeType':'nd:vod','nodeName':'come','path':'mas/mas'}]}
分享到:
相关推荐
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
总的来说,ExtJS4 TreeGrid实例的创建涉及模型定义、数据存储、列配置和面板创建等多个环节,能够有效地呈现层次结构的报表数据,提供丰富的用户交互体验。在实际应用中,你可能需要根据具体需求调整和扩展这个基础...
3. **创建TreeGrid**:创建TreeGrid实例,配置列信息、Store以及其它特性,如是否启用分页、过滤等。 4. **渲染TreeGrid**:将TreeGrid添加到布局中,并在页面加载时渲染。 5. **监听事件**:根据需要添加事件监听...
最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来。像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料...
5.6 综合实例:股票数据的实时更新 / 205 5.7 本章小结 / 214 第6章 选择器与dom操作 / 215 6.1 ext js的选择器:ext.domquery / 215 6.1.1 选择器的作用 / 215 6.1.2 使用ext.query选择页面元素 / 215 6.1.3...
Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up...
压缩包中的“treegrid.doc”文件名表明,文档可能包含有关ExtJS TreeGrid的详细信息。TreeGrid是ExtJS的一个组件,它结合了树结构和数据网格的功能,允许用户以表格形式展示层次化的数据,并对其进行排序、筛选等...
在本文中,我们将深入探讨如何将`...总结起来,将`treeGrid`目录拖放到`formPanel`涉及了`ExtJS`的拖放API、事件处理、数据同步和UI交互等多个方面。理解并熟练运用这些技术,可以创建出更加动态和用户友好的Web应用。
1. **创建TreeGrid实例:** ```javascript var grid = new Ext.ux.tree.TreeGrid({ title: '', width: 500, height: 300, enableDD: true, enableSort: false, rootVisible: false, columns: [ { header:...
- `Ext TreeGrid`是基于ExtJS框架的一个组件,能够同时显示树形结构和表格数据。 - 它特别适用于需要同时展现层次结构和详细数据的应用场景。 2. **分页实现**: - 在Ext TreeGrid中实现分页功能通常需要使用到...
- **利用ExtJS的最新特性**:随着版本的更新,ExtJS引入了许多新特性,如MVVM模式、DataView动画、TreeGrid等。我们可以利用这些特性来改进原有的组件扩展,提高用户体验。 - **优化性能**:随着组件复杂性的增加,...
- 创建TreeGrid实例,配置数据源、列模型、编辑器等参数。 - 实现数据加载、编辑事件监听和处理,以及保存修改后的数据。 7. **优化与性能**: - 考虑到性能,通常会采用分页和延迟加载策略,只在需要时加载子...
- 为了优化性能,可以使用ExtJS的树网格(TreeGrid)或嵌套列表(Nested List)等组件,它们支持层次结构数据的懒加载。 - 考虑使用缓存策略,例如在客户端使用ExtJS的本地存储(localStorage)或在服务器端使用二...
在实际开发中,我们首先需要创建一个TreeGrid实例,指定其配置项,如store、columns、width、height等。然后,我们需要定义store,设置其proxy来连接数据源,并提供reader来解析返回的数据。对于列的定义,我们需要...
组织架构图在EXTJS中通常被实现为一个TreePanel或者TreeGrid,它们都是EXTJS的树形组件,可以显示层次结构的数据。以下是一些关于EXTJS创建组织架构图的关键知识点: 1. **数据模型(Model)**:首先,我们需要定义...
这个接口封装了模型实例,提供了额外的方法和属性来适应树控件的特殊状态。例如,你可以改变树的外观,通过设置`useArrows`为`true`来隐藏边线并显示箭头图标来表示展开和折叠。通过设置`rootVisible`为`false`,...