转载别人 /** 创建普通的Grid表格 */ function createGridPanel(){ var myData = [//以数组的形式定义数据 ['3m Co',71.72,0.02,0.03,'9/1 12:00am','www.baidu.com'], ['Alcoa Inc',29.01,0.42,1.47,'10/1 12:00am','www.163.com'], ['Boeing Co.',75.43,0.53,0.71,'9/2 12:00am','www.sina.com.cn'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am','www.iteye.com'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'8/30 12:00am','www.oracle.com'] ]; var myStore = new Ext.data.ArrayStore({//定义用于存放数据的store,并且为每个字段取名 data: myData,//把数据绑定到store fields: [//为每列取名,并且设置数据类型 {name: 'name'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}, 'url' ] }) ; var myGrid = new Ext.grid.GridPanel({//定义列表 store: myStore,//把定义好的store绑定到此列表 columns: [//根据在store中定义的列名,把列数据绑定到相应的列表头 {header: '姓名', width: 200, sortable: true, dataIndex: 'name'},//dataIndex:store中定义的fieldname. {header: '价格', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//renderer: Ext.util.Format.usMoney,显示美元的货币符号 {header: '改变', renderer:function(v){ if(v<=0){ return "<font color='red'>"+v+"</font>" ; }else{ return v ; } }, dataIndex: 'change'}, {header: '改变百分比', dataIndex: 'pctChange'}, { header: '最后改变时间', width: 135, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'Y-m-d'//显示日期型变量的格式 }, {header: '网址', renderer: function(v){ return v.link(v) ;//渲染成超链接形式 }, dataIndex: 'url'}] }) ; new Ext.Viewport({layout:'fit',items:myGrid}) ;//充满整个body显示列表 } /** 创建可编辑的Grid表格 注意:EditorGrid与Grid的区别在于,在要想设置成可编辑的列中定义如下属性editor: Ext.form.TextField(DateField) */ function createEditorGridPanel(){ var myData = [//以数组的形式定义数据 ['3m Co',71.72,0.02,0.03,new Date(),'www.baidu.com'], ['Alcoa Inc',29.01,0.42,1.47,new Date(),'www.163.com'], ['Boeing Co.',75.43,0.53,0.71,new Date(),'www.sina.com.cn'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,new Date(),'www.iteye.com'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,new Date(),'www.oracle.com'] ]; var myStore = new Ext.data.ArrayStore({//定义用于存放数据的store,并且为每个字段取名 data: myData,//把数据绑定到store fields: [//为每列取名,并且设置数据类型 {name: 'name'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date'}, 'url' ] }) ; var myGrid = new Ext.grid.EditorGridPanel({//定义列表 store: myStore,//把定义好的store绑定到此列表 columns: [//根据在store中定义的列名,把列数据绑定到相应的列表头 {header: '姓名', width: 200, sortable: true,editor: Ext.form.TextField, dataIndex: 'name'},//dataIndex:store中定义的fieldname. {header: '价格', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//renderer: Ext.util.Format.usMoney,显示美元的货币符号 {header: '改变', renderer:function(v){ if(v<=0){ return "<font color='red'>"+v+"</font>" ; }else{ return v ; } }, dataIndex: 'change'}, {header: '改变百分比', dataIndex: 'pctChange'}, { header: '最后改变时间', width: 135, dataIndex: 'lastChange',editor: Ext.form.DateField,//此字段可以编辑 xtype: 'datecolumn', format: 'Y-m-d H:i:s'//显示日期型变量的格式 }, {header: '网址', renderer: function(v){ return v.link(v) ;//渲染成超链接形式 }, dataIndex: 'url'}] }) ; new Ext.Viewport({layout:'fit',items:myGrid}) ;//充满整个body显示列表 } 3.创建Property(Key-value)的Grid表格 /** 创建Property(Key-value)的Grid表格 下在source中定义的是name及对应的value(默认值),在页面的列表中可以对value进行编辑修改 */ function createPropertyGridPanel(){ var grid = new Ext.grid.PropertyGrid({ title: 'Properties Grid', autoHeight: true, width: 300, source: { "(name)": "My Object", "Created": new Date(), "Available": false, "Version": .01, "Description": "A test object" } }); new Ext.Viewport({layout:'fit',items:grid}) ;//充满整个body显示列表 }
相关推荐
EXTJS 是一款强大的...掌握EXTJS的控件使用和Table Layout,可以帮助开发者高效地创建出专业且用户友好的前端应用。在实际开发过程中,应根据具体需求灵活运用EXTJS的组件和布局,以达到最佳的界面设计和交互效果。
ExtJS UI控件是用于构建丰富、交互性强的Web应用程序的JavaScript库,它与ASP.NET 3.5结合使用,可以为开发人员提供强大的前端开发工具。在ASP.NET 3.5框架下,ExtJS控件能帮助开发出具有桌面应用般体验的网页应用。...
首先,我们需要理解ExtJS表格的基本结构。表格由多个部分组成,包括Store(数据存储)、Model(数据模型)、Column Model(列模型)和View(视图)。Store负责管理表格的数据,Model定义数据字段,Column Model定义...
这个示例集合为开发者提供了丰富的控件使用方法,展示了如何在C#环境中有效地利用ExtJS进行前端界面的构建。 【描述】中的"封装的extjs2.0"表明该示例集是将ExtJS 2.0的功能与C#编程语言相结合,创建了一个易于理解...
很好很全,易懂易学!关于extjs表格控件的使用,适用于初学者,有需要的可以下。
本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...
ExtJS 5 Combogrid 控件是Sencha公司开发的ExtJS框架中的一款高级组件,主要用于在表单中实现下拉列表与表格的结合,提供更丰富的数据展示和选择功能。Combogrid控件结合了combobox(下拉框)和grid(数据网格)的...
**二、ExtJS表格控件(Grid)的使用** 1. **创建列信息**: 使用`Ext.grid.ColumnModel`定义表格的列,例如: ```javascript var cm = new Ext.grid.ColumnModel([ { header: '编号', dataIndex: 'id' }, { ...
在实际开发中,你可能需要将DateTime控件与其他ExtJS组件(如表格、表单)结合使用,以创建复杂的用户界面。例如,在一个日程管理应用中,DateTime控件可以用于添加或编辑事件的时间。通过阅读和理解DateTime控件的...
### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...
在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...
本篇文章将深入探讨ExtJs日期时间选择控件的使用、功能以及优化后的特性。 1. **ExtJs日期时间选择控件的基本使用** 在ExtJs中,日期时间选择控件通常通过`Ext.picker.DateTimePicker`类来创建。这个控件结合了...
通过深入学习和实践这些知识点,开发者可以熟练掌握ExtJS日期时间控件的使用,从而提升Web应用的用户体验和功能完善度。无论是在表单中选择单一的日期、时间,还是需要一个综合的日期时间选择器,这些技能都将派上...
本文将对初学者介绍一些常见的ExtJS控件,特别是弹框和表格(Grid)的使用方法。 首先,我们来关注弹框(MessageBox)。Ext.MessageBox是ExtJS提供的一种用于显示消息、警告、确认或获取用户输入的弹出对话框。以下...
总的来说,"ASP.NET仿FLASH批量上传效果 使用控件ExtJS 和上传控件的例子.zip" 提供了一个实用的示例,展示了如何结合ASP.NET、ExtJS和SwfUpload实现高效且用户体验良好的批量上传功能。这个例子不仅对于初学者理解...
只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我添加了一些功能,比如可以添加 复选框 , 行按钮 等操作, 对...
目录: 一 Extjs 基础 ...EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面控件(表格的插件) EXTJS4自学手册——页面控件(树形控件) EXTJS4自学手册——页面控件(表单控件)
与下拉树类似,下拉表格控件也是继承了***boBox,并且同样重写了createPicker方法。在这个方法中,我们创建了一个网格面板(Ext.grid.Panel)来展示下拉的内容。这个网格面板具有标题栏(title),框架(frame),可...