文档章节

EXTJS表格列xtype详解

微尘鉴
 微尘鉴
发布于 2016/01/07 12:21
字数 831
阅读 883
收藏 0

概述:列类型,就是在grid组件创建的时候,指定的列xtype,我们可以将数据更好的展示和列的功能按钮扩展等。

雨泽漫画的后台为例,需要在列末尾增加几个按钮,完结状态推荐编辑预览等按钮。

如下图所示:

代码实现:(主要在view层中来指定列类型,其他的事件等model改动的代码暂不显示了)

Ext.define("AM.view.List",{
       extend:"Ext.grid.Panel",
                     title:"GridDemo", //标题
                     frame:true,  //面板渲染
                     alias:"widget.userlist",  //设置别名
                     //forceFit:true,//设置是否自动填充
                     width:1000,
                     height:280,
                     columns:[  //列类型  并设置前台编辑
                            Ext.create("Ext.grid.RowNumberer",{}),
                            {text:"Name",dataIndex:"name",width:100},
                            {text:"Age",dataIndex:"age",width:100},
                            {  //个性化显示数据
                                   text:"性别",
                                   dataIndex:"sex",
                                   renderer:function(value){
                                          if(value=="女"){
                                                 return"<font color='green'>女</font>";
                                          }elseif(value=="男"){
                                                 return"<font color='red'>男</font>";
                                          }
                                   }
                            },
                            {text:"Email",dataIndex:"email",width:200,
                                   field:{
                                          xtype:"textfield",
                                          allowBlank:false
                                   }
                            },{//显示boolean类型
                                   text:"isIt",
                                   xtype:"booleancolumn",
                                   dataIndex:"isIt",
                                   trueText:"是",
                                   falseText:"不是"
                            },{
                                   text:"生日",
                                   xtype:"datecolumn",
                                   dataIndex:"birthday",
                                   format:"Y年m月d日",
                                   width:150
                            },{//显示number类型
                                   text:"收入",
                                   xtype:"numbercolumn",
                                   dataIndex:"deposit",
                                   format:"0,000",
                                   width:150
                            },{//templatecolumn列类型的使用
                                   text:"描述",
                                   xtype:"templatecolumn",
                                   tpl:"名字是{name},年龄是{age}",
                                   width:150
                            },{//Action模式的使用,增加事件机制,在controller层用别名查找方式来指定事件,也可以用handler字段
                                   text:"Action",
                                   xtype:"actioncolumn",
                                   id:'del',
                                   icon:"app/view/image/delete.jpg",
                                   width:50
                            }                  
                            ],
                     tbar:[   //上方工具栏
                            {xtype:"button",text:"添加",iconCls:"table_add"},
                            {xtype:"button",id:'delete',text:"删除",iconCls:"table_delete"},
                            {xtype:"button",text:"修改",iconCls:"table_edit"},
                            {xtype:"button",text:"查看",iconCls:"table_comm"}
                            ],
                     dockedItems:[{
                            xtype:"pagingtoolbar",
                            store:"Users",
                            dock:"bottom",//指定在那个位置
                            displayInfo:true  //设置显示

                     }],
                     //设置前台编辑,首先在列类型中指定,然后使用插件机制来添加插件
                     plugins:[
                            Ext.create("Ext.grid.plugin.CellEditing",{
                            clicksToEdit:2
                            })
                     ],
                     selType:"checkboxmodel",  //设置选择模式,设置成多选框的模式
                     multiSelect:true,   //设置成多选
//                   renderTo:"griddemo",
                     store:"Users",//指定数据集
                     initComponent:function(){
                            this.callParent(arguments);
                     }    
});

一、列类型的主类  Ext.grid.column.Column  xtype:gridcolumn

1.Ext.grid.column.Actionxtype:actioncolumn

在表格中渲染一组图片按钮,并且为它赋予功能

alertText:String设置应用image元素上的alt

handler:function(view,rowindex,colIndex,item,e);触发的点击事件

icon:图标的资源地址(图片资源)

iconCls:图片样式, 指定的一个css的类名

items:多个图片的数组,在使用MVC的时候建议不要用

stopSelection设置是否单机选中不选中

2.Ext.grid.column.Booleanxtype:booleancolumn boolean类型的列类型

falseText当值为false的时候显示什么信息

trueText  当值为true的时候显示什么信息

3.Ext.grid.column.Datextype: datacolumn 日期的列类型

format指定的是格式如  Ymd

4.Ext.grid.column.Numbernumbercolumn number的列类型

format指定的显示数值的格式0,000

5.Ext.grid.column.Templatextype:templatecolumn 模版类型的列类型  常用于显示model的其他属性,比如描述等。

tpl指定显示信息, 当使用到model的属性时候 可以用{属性名}来,则可以显示出数据

二、不在column包下面的列模式指定

Ext.grid.RowNumber xtype rownumber

直接创建这个类,当作列类型指定的对象

简单了解:

我们可以将一些固定的数据做成缓存,直接在前台中调用,如果没有就去请求后台来加入

数据字典

业务数据字典:风险等级,城市

不变的数据字典:男,女  是,否人的血型

本文转载自:http://www.yuuzle.com/extjs4-grid-column-xtype.html

微尘鉴
粉丝 8
博文 80
码字总数 30075
作品 0
海淀
高级程序员
私信 提问
Extjs GridPanel用法详解

创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义ModelExt.define("MyApp.model.User", { }); 然后创建Store: //...

鱼煎
2017/11/02
114
0
ExtJs自学教程(1):一切从API开始

该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论,学的人则能够自立更生。l 学习的人只要有一些CSS的javascript的基础知识并且对于英文...

77970290
2013/05/07
276
0
Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成...

鱼煎
2017/11/02
48
0
extjs如何实现表格某一列的定时刷新

前台显示: //创建一个表格 Ext.create('Ext.grid.Panel', { title: 'Ipsec配置信息', renderTo:Ext.getBody(), tbar:[ {xtype:'button', text:'新建配置信息', border:1, handler:newFn}, {x......

唯一inode
2013/08/22
1K
5
extjs在移动端显示问题

现在对extjs了解不深入,现在遇到了两个问题, 我现在想在移动端以key和value的形式显示 Home和10(即他两个是一个整体) , 这种形式在PC端是可以显示的,只要 xtype: 'displayfield',就可以实现了...

唯君依吾兮
2017/10/20
331
3

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
11
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部