`

ExtJs表格控件表格控件的使用

阅读更多
转载别人
/**
   创建普通的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 常用控件的使用 table layout

    EXTJS 是一款强大的...掌握EXTJS的控件使用和Table Layout,可以帮助开发者高效地创建出专业且用户友好的前端应用。在实际开发过程中,应根据具体需求灵活运用EXTJS的组件和布局,以达到最佳的界面设计和交互效果。

    Extjs UI控件 for Asp.net3.5

    ExtJS UI控件是用于构建丰富、交互性强的Web应用程序的JavaScript库,它与ASP.NET 3.5结合使用,可以为开发人员提供强大的前端开发工具。在ASP.NET 3.5框架下,ExtJS控件能帮助开发出具有桌面应用般体验的网页应用。...

    extjs 简单表格

    首先,我们需要理解ExtJS表格的基本结构。表格由多个部分组成,包括Store(数据存储)、Model(数据模型)、Column Model(列模型)和View(视图)。Store负责管理表格的数据,Model定义数据字段,Column Model定义...

    extjs C#控件全示例

    这个示例集合为开发者提供了丰富的控件使用方法,展示了如何在C#环境中有效地利用ExtJS进行前端界面的构建。 【描述】中的"封装的extjs2.0"表明该示例集是将ExtJS 2.0的功能与C#编程语言相结合,创建了一个易于理解...

    Ext表格控件

    很好很全,易懂易学!关于extjs表格控件的使用,适用于初学者,有需要的可以下。

    ExtJs:收集基于ExtJs扩展的一些控件

    本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...

    extjs 5 combogrid控件

    ExtJS 5 Combogrid 控件是Sencha公司开发的ExtJS框架中的一款高级组件,主要用于在表单中实现下拉列表与表格的结合,提供更丰富的数据展示和选择功能。Combogrid控件结合了combobox(下拉框)和grid(数据网格)的...

    ExtJS 配置和表格控件使用第1/2页

    **二、ExtJS表格控件(Grid)的使用** 1. **创建列信息**: 使用`Ext.grid.ColumnModel`定义表格的列,例如: ```javascript var cm = new Ext.grid.ColumnModel([ { header: '编号', dataIndex: 'id' }, { ...

    extjs4.2 datetime控件

    在实际开发中,你可能需要将DateTime控件与其他ExtJS组件(如表格、表单)结合使用,以创建复杂的用户界面。例如,在一个日程管理应用中,DateTime控件可以用于添加或编辑事件的时间。通过阅读和理解DateTime控件的...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

    ExtJS4学习笔记十一 树控件的使用

    在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...

    ExtJs日期时间选择控件

    本篇文章将深入探讨ExtJs日期时间选择控件的使用、功能以及优化后的特性。 1. **ExtJs日期时间选择控件的基本使用** 在ExtJs中,日期时间选择控件通常通过`Ext.picker.DateTimePicker`类来创建。这个控件结合了...

    ExtJS日期时间控件

    通过深入学习和实践这些知识点,开发者可以熟练掌握ExtJS日期时间控件的使用,从而提升Web应用的用户体验和功能完善度。无论是在表单中选择单一的日期、时间,还是需要一个综合的日期时间选择器,这些技能都将派上...

    extjs初学控件

    本文将对初学者介绍一些常见的ExtJS控件,特别是弹框和表格(Grid)的使用方法。 首先,我们来关注弹框(MessageBox)。Ext.MessageBox是ExtJS提供的一种用于显示消息、警告、确认或获取用户输入的弹出对话框。以下...

    ASP.NET仿FLASH批量上传效果 使用控件ExtJS 和上传控件的例子.zip

    总的来说,"ASP.NET仿FLASH批量上传效果 使用控件ExtJS 和上传控件的例子.zip" 提供了一个实用的示例,展示了如何结合ASP.NET、ExtJS和SwfUpload实现高效且用户体验良好的批量上传功能。这个例子不仅对于初学者理解...

    jQuery flexigrid 表格控件

    只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我添加了一些功能,比如可以添加 复选框 , 行按钮 等操作, 对...

    EXTJS4自学手册

    目录: 一 Extjs 基础 ...EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面控件(表格的插件) EXTJS4自学手册——页面控件(树形控件) EXTJS4自学手册——页面控件(表单控件)

    自定义ExtJS控件之下拉树和下拉表格附

    与下拉树类似,下拉表格控件也是继承了***boBox,并且同样重写了createPicker方法。在这个方法中,我们创建了一个网格面板(Ext.grid.Panel)来展示下拉的内容。这个网格面板具有标题栏(title),框架(frame),可...

Global site tag (gtag.js) - Google Analytics