`

使用Ext.grid.column.Column定义列

 
阅读更多

使用Ext.grid.column.Column定义列

正如从前面的示例中看到的,创建Ext.grid.Panel时,必须指定columns选项,该选项要么是Ext.grid.column.Column数组,要么是JavaScript对象,该对象中必须包含一个items属性,该属性值依然是Ext.grid.column.Column数组——总之,定义Ext.grid.Panel时,必须传入Ext.grid.column.Column数组来定义各数据列。

使用Ext.grid.column.Column定义列定义可以指定如下常用选项。

  • Ø text:指定该列的列名。
  • Ø sortable:指定是否可以对该列进行排序。
  • Ø hideable:指定该列是否可以隐藏。
  • Ø menuDisabled:指定是否禁用该列上默认的右键菜单。
  • Ø draggable:指定该列是否可以通过拖动来改变列的排列顺序。
  • Ø groupable:指定是否可以对该列进行分组。
  • Ø dataIndex:指定读取底层Ext.data.Store数据中哪个数据字段。.
  • Ø renderer:指定一个函数对该列数据进行转换后显示在表格中。通过该选项即可对该列数据指定自定义的显示格式。

Ext.grid.column.Column是所有列定义的基类,它包含如图6.72所示的子类。

 

图6.72 列定义的类

Ext.grid.column.Booean列类型用于显示boolean类型的数据,使用该列类型时可指定如下两个选项。

  • Ø trueText:指定当该单元格值为true时显示的文本。
  • Ø falseText:指定当该单元格值为false时显示的文本。

Ext.grid.column.Date列类型用于显示日期类型的值,Ext.grid.column.Number列类型用于显示数值类型的列。使用Ext.grid.column.Date或Ext.grid.column.Number列类型时都可指定format选项,该选项用于指定显示该列数据的格式。

Ext.grid.column.Template列类型允许使用模板来设置该列显示的内容,使用该列类型可指定tpl选项,该选项用于指定一个模板字符串。

Ext.ux.CheckColumn是第三方扩展的列类型,需要额外导入examples\ux目录下的CheckColumn.js文件,它会显示一个允许用户通过单击来改变boolean值的列。

提示:

 

为了使用Ext.ux.CheckColumn列类型,除了需要导入examples\ux目录下的CheckColumn.js之外,还需要导入examples\ux\css下的CheckHeader.css样式单文件,并且要引入examples\ux\css\images目录下的图片。因此需要将它们复制到应用目录下。

 

 

Ext.grid.column.Action列则用于定义包含多个“动作”按钮的列,当开发者单击不同的“动作”按钮时,触发不同的事件处理函数,即可对数据进行相应的操作。

如下示例示范了各种列类型的功能和用法。

程序清单:codes\06\6.8\Ext.grid\Ext.grid.column.Column.html

<body>

<script type="text/javascript">

Ext.onReady(function(){

    // 初始化工具提示

    Ext.tip.QuickTipManager.init();

    // 创建一个Ext.data.Store对象

    var userStore = Ext.create('Ext.data.Store',

    {

         // 直接使用data指定数据

         data : [

               {name: "孙悟空", isMarried: false , birthDate: '0178-12-12',

                    height: 1.65},

               {name: "猪八戒", isMarried: false , birthDate: '0278-12-12',

                    height: 1.65},

               {name: "玉帝", isMarried: true , birthDate: '0168-12-12',

                    height: 1.65},

               {name: "宋江", isMarried: true , birthDate: '1178-12-12',

                    height: 1.65}

         ],

         fields:[

               'name' , 'isMarried',

               {name: 'birthDate', type: 'date', format:'Y-m-d'},

               'height'

         ]

    });

    Ext.create('Ext.grid.Panel', {

         title: '查看图书',

         width: 650, // 指定表单宽度

         renderTo: Ext.getBody(),

         // 定义该表格包含的所有数据列

         columns: [

               // 定义一个列序号列

               { text: '序号' , xtype: 'rownumberer' , width:30},

               // 没指定xtype,默认是普通列类型

               { text: '人名', dataIndex: 'name'},

               // 定义一个Boolean

               { text: '是否已婚', xtype: 'booleancolumn', trueText: '已婚',

                    falseText: '未婚', dataIndex: 'isMarried'},

               // 定义一个CheckBox

               { text: '是否已婚', xtype: 'checkcolumn',

                    dataIndex: 'isMarried', width: 55 , cls:'x-grid-checked'},

               // 定义一个日期列

               { text: '出生时间', xtype: 'datecolumn',

                    dataIndex: 'birthDate', format:'Y年m月d日'},

               // 定义一个数值列

               { text: '身高', xtype: 'numbercolumn',

                    dataIndex: 'height', format:'0.00米' },

               { text: '描述', xtype: 'templatecolumn',

                    tpl: '人名:{name},身高:{height}' , flex:1},

               {

                    text: '操作',

                    xtype:'actioncolumn',

                    width: 50,

                    items: [

                         {

                             icon: 'edit.gif', // 指定图标

                             tooltip: '编辑',

                             handler: function(grid, rowIndex, colIndex)

                             {

                                   var rec = grid.getStore().getAt(rowIndex);

                                   alert("编辑【" + rec.get('name') + "】用户");

                             }

                         },

                         {

                             icon: 'delete.gif', // 指定图标

                             tooltip: '删除',

                             handler: function(grid, rowIndex, colIndex)

                             {

                                   var rec = grid.getStore().getAt(rowIndex);

                                   alert("删除【" + rec.get('name')+ "】用户");

                             }

                         }

                    ]

               }

         ],

         store: userStore

    });

});

</script>

</body>

 

上面的粗体字代码定义了Ext.grid.Panel的各种列类型,一共使用了8种列类型。在浏览器中浏览该页面,可以看到如图6.73所示效果。

 

图6.73 不同列类型

当用户单击最右边的操作列中的编辑、删除图标时,系统将会弹出“编辑”或“删除”指定用户的对话框,如果在这些操作中执行实际的编辑或删除操作,将可以对底层业务数据进行修改。

 

 

 

 

 

本文节选自

《疯狂Ajax讲义(第3版)》

李刚 编著

电子工业出版社出版

分享到:
评论

相关推荐

    Ext.grid.GridPanel属性祥解

    `Ext.grid.Column`代表了表格中的一列,可以通过以下配置项来定义其行为和外观: 1. **id** - 说明:定义了列的唯一标识符。 2. **header** - 说明:定义了列标题的文字内容。 3. **dataIndex** - 说明:将列...

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    Ext grid 简单实例

    3. **配置Column Model**: 创建一个Ext.grid.ColumnModel,定义每列的属性,如text(列标题)、dataIndex(与Model字段关联)和width。 4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例,将Store、Model和...

    Ext.ux.tree.treegrid异步加载

    本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...

    Ext下拉树、下拉表格

    2. 定义表格列:使用Ext.grid.ColumnModel或者Ext.grid.column.Column定义列的配置,包括标题、宽度、数据绑定等。 3. 创建表格:使用Ext.grid.Panel或Ext.view.Table创建表格视图,并将其与数据源关联。 4. 配置...

    Ext.ux.grid.column.ActionButton:一个 Ext JS 5.x, 6.x Widget Column Extension 来处理网格行操作

    Ext.ux.grid.column.ActionButton 一个 ExtJS 5.x, 6.x Widget Column Extension,用于处理单个记录的网格行操作 根据网格行记录构建固定的和动态的下拉项 在 Ext JS 5.x 和 6.x 上测试 用法 将 ActionButton.js ...

    Ext jsGrid 锁列问题

    用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助

    Ext Js权威指南(.zip.001

    10.1.5 列标题的运行流程:ext.grid.column.column / 510 10.1.6 虚拟滚动条的工作原理:ext.grid.pagingscroller / 511 10.1.7 锁定列的运行流程:ext.grid.lockable与ext.grid.lockingview / 516 10.2 使用...

    ext 资源汇总

    EXT.grid.Panel是网格的基础,EXT.grid.column.Column定义了列的属性,EXT.grid.feature.*则包含了各种扩展功能,如行锁定、分组等。 3. **EXT.tree**: EXT.tree主要用于构建层次结构的数据展示,比如目录结构或...

    Extjs Grid 扩展实例

    1. **自定义列**:在Grid中,我们可以定义自己的Column模型,添加额外的字段或调整默认的行为。例如,我们可以通过设置`dataIndex`指定数据源字段,使用`renderer`函数来自定义单元格的显示,甚至为特定列添加自定义...

    ext的grid简易例子

    3. **Column Model**:定义Grid中的列结构,包括列的标题、宽度、对齐方式、数据绑定等。例如,`Ext.grid.ColumnModel`可以用来设置每一列的显示样式和数据源。 4. **Grid Panel**:实际展示Grid的组件,它包含了...

    ExtJS grid过滤操作

    - **Column Filters**:在列头中显示过滤图标,用户可以直接在列上设置过滤条件。 2. **动态操作** - **创建过滤器**:通过`grid.columns[i].filter`属性为特定列创建过滤器,并设置初始过滤条件。 - **应用过滤...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    5. 配置列模型(column model),定义列的宽度、标题、数据绑定等属性。 6. 加载数据并渲染GridPanel。 在提供的压缩包文件"复杂表头+锁定列"中,可能包含了实现这一功能的示例代码,包括HTML、CSS和JavaScript文件...

    ExtJs框架系列之ProgressGrid进度条

    ProgressColumn是Ext.ux.grid的一个扩展,它允许你在ExtJs的GridPanel中添加一列专门用于显示进度条。这对于监控任务进度、数据加载状态或者任何需要实时反馈的情况非常有用。下面,我们将详细介绍如何使用...

    Ext grid filter

    Ext Grid Filter 是一个在Sencha Ext JS框架中用于增强数据网格(Grid)功能的组件,它允许用户通过列过滤器快速查找和定位表格中的特定数据。这个组件极大地提高了数据的可搜索性和用户交互性,尤其在处理大量数据...

    Ext2.0框架的Grid使用介绍

    ### Ext2.0框架的Grid使用介绍 #### 一、Ext2.0框架概述 Ext2.0是一款基于JavaScript的库,它提供了大量的用户界面组件,使得开发人员能够轻松地构建出高度交互式的Web应用程序。相比其他框架如YUI等,Ext2.0拥有...

    ext 多表头和锁定列结合的示例

    在EXT JS这个强大的JavaScript库中,多表头和锁定列的结合使用是创建复杂、功能丰富的数据展示表格的重要手段。EXT JS允许开发者构建高度自定义的用户界面,尤其是在处理大量数据时,锁定列和多表头功能能显著提高...

    extjs动态表头,绝对的好东西啊

    学习和使用`Ext.ux.grid.DynamicGridPanel.js`需要对ExtJS的基本概念和API有一定的理解,包括Store、Model、Column、GridPanel等。同时,熟悉JavaScript和DOM操作也是必要的。在开发过程中,可以借助ExtJS的官方文档...

    ext grid 显示数据

    3. **列模型(Column Model)**: Grid的列模型定义了列的属性,如字段名、宽度、对齐方式、排序和过滤。通过`columns`配置项进行设置,每个列是一个包含这些属性的对象。 4. **分页(Paging)**: 当数据量大时,...

    grid js 例子一个 ext 的

    根据给定的信息,我们可以推断出这是一篇关于如何使用 Ext JS 框架中的 Grid 组件的文章。Ext JS 是一款基于 JavaScript 的前端框架,它提供了丰富的用户界面组件,包括表格(Grid)。以下是对该文章内容的详细解读...

Global site tag (gtag.js) - Google Analytics