`
陈修恒
  • 浏览: 205008 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs TreeGrid实例

阅读更多
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'}]}
分享到:
评论

相关推荐

    SSH Extjs treeGrid conboxTree 分页实例

    最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...

    extjs4 treeGrid实例

    总的来说,ExtJS4 TreeGrid实例的创建涉及模型定义、数据存储、列配置和面板创建等多个环节,能够有效地呈现层次结构的报表数据,提供丰富的用户交互体验。在实际应用中,你可能需要根据具体需求调整和扩展这个基础...

    EXTJS 4 树形表格组件使用示例

    3. **创建TreeGrid**:创建TreeGrid实例,配置列信息、Store以及其它特性,如是否启用分页、过滤等。 4. **渲染TreeGrid**:将TreeGrid添加到布局中,并在页面加载时渲染。 5. **监听事件**:根据需要添加事件监听...

    Extjs4 Treegrid 使用心得分享(经验篇)

    最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来。像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料...

    Ext Js权威指南(.zip.001

    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中文教程2 开发笔记 chm

    Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up...

    extjs mask load

    压缩包中的“treegrid.doc”文件名表明,文档可能包含有关ExtJS TreeGrid的详细信息。TreeGrid是ExtJS的一个组件,它结合了树结构和数据网格的功能,允许用户以表格形式展示层次化的数据,并对其进行排序、筛选等...

    treeGrid目录拖动到formPanel

    在本文中,我们将深入探讨如何将`...总结起来,将`treeGrid`目录拖放到`formPanel`涉及了`ExtJS`的拖放API、事件处理、数据同步和UI交互等多个方面。理解并熟练运用这些技术,可以创建出更加动态和用户友好的Web应用。

    Ext.ux.tree.treegrid异步加载

    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分页可编辑

    - `Ext TreeGrid`是基于ExtJS框架的一个组件,能够同时显示树形结构和表格数据。 - 它特别适用于需要同时展现层次结构和详细数据的应用场景。 2. **分页实现**: - 在Ext TreeGrid中实现分页功能通常需要使用到...

    使用OOP的方式扩展ExtJS UI组建 - 更新版

    - **利用ExtJS的最新特性**:随着版本的更新,ExtJS引入了许多新特性,如MVVM模式、DataView动画、TreeGrid等。我们可以利用这些特性来改进原有的组件扩展,提高用户体验。 - **优化性能**:随着组件复杂性的增加,...

    基于ext很不错的TreeGridEditor树表格

    - 创建TreeGrid实例,配置数据源、列模型、编辑器等参数。 - 实现数据加载、编辑事件监听和处理,以及保存修改后的数据。 7. **优化与性能**: - 考虑到性能,通常会采用分页和延迟加载策略,只在需要时加载子...

    当设置lazy=true时,怎样使用extjs和Hibernate

    - 为了优化性能,可以使用ExtJS的树网格(TreeGrid)或嵌套列表(Nested List)等组件,它们支持层次结构数据的懒加载。 - 考虑使用缓存策略,例如在客户端使用ExtJS的本地存储(localStorage)或在服务器端使用二...

    Ext3_TreeGrid:Ext树状表格

    在实际开发中,我们首先需要创建一个TreeGrid实例,指定其配置项,如store、columns、width、height等。然后,我们需要定义store,设置其proxy来连接数据源,并提供reader来解析返回的数据。对于列的定义,我们需要...

    一段经典的JS组织架构图

    组织架构图在EXTJS中通常被实现为一个TreePanel或者TreeGrid,它们都是EXTJS的树形组件,可以显示层次结构的数据。以下是一些关于EXTJS创建组织架构图的关键知识点: 1. **数据模型(Model)**:首先,我们需要定义...

    4.0Ext 树型结构

    这个接口封装了模型实例,提供了额外的方法和属性来适应树控件的特殊状态。例如,你可以改变树的外观,通过设置`useArrows`为`true`来隐藏边线并显示箭头图标来表示展开和折叠。通过设置`rootVisible`为`false`,...

Global site tag (gtag.js) - Google Analytics