鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html

----------------------------------------------------------------------------------------

本博客介绍了如何对表格的列进行渲染及在行号前加入复选框。

以下是效果图:

代码:

/**
* Grid
* 此js演示了如何对列的样式进行渲染以及如何为表格添加复选框
*/
Ext.onReady(function(){
//js获取项目根路径
function getRootPath(){
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
var localhostPaht=curWwwPath.substring(0,pos);
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
} //自定义renderner方法
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
if(value=='可用'){
return "<span style='color:green;font-weight:bold';>可用&nbsp;</span><img src='"+getRootPath()+"/js/component/images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用&nbsp;</span><img src='"+getRootPath()+"/js/component/images/wrong.gif' />";
}
} //定义列
var columns = [
{header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:112},
{header:'状态',dataIndex:'status',width:80,renderer:renderDescn}
];
//定义数据
var data =[
['1','小王','描述01','可用'],
['2','李四','描述02','禁用'],
['3','张三','描述03','可用'],
['4','束洋洋','思考者日记网','可用'],
['5','高飞','描述05','禁用']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
{name:'name'},
{name:'descn'},
{name:'status'}
]
});
//加载数据
store.load(); /**
* 经测试以下有些选项没有任何效果
*/
//表格控件默认使用RowModel,按住shift或者ctrl键单击鼠标就可以选择多行,如果希望只选择一行,可以使用singleSelect:true
//我发现我在写的时候,不用的情况下,我试了发现默认就是不可多选的
//var sm = new Ext.grid.RowModel({singleSelect:true});
var sm = new Ext.selection.CheckboxModel({checkOnly:true});
//创建表格
var grid = new Ext.grid.Panel({
renderTo:'grid', //渲染位置
width:450,
height:150,
// singleSelect:true,//--在同一时间只能单选一条记录(没什么用)
// multiSelect:true, //--允许在同一时间选择多项目记录,(没什么用)
selModel:sm, //复选框
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:false, //斑马线效果
enableColumnMove: false, //禁止拖放列
// enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
forceFit:true, //自动填满表格
viewConfig:{
// columnsText:'显示的列', //--目前没找到这个属性
// scrollOffset:30, //--表格右侧为滚动条预留的宽度,默认为20(没什么用)
// sortAscText:'正序',//--没什么用
// sortDescText:'倒序',//-- 没什么用
forceFit:true //表格会自动延展每列的长度,使内容填满整个表格
}
});
});

说明:1.对于当前的表格效果,上面js中的viewConfig可全部注释掉。2.在本博客的鸣谢地址中new 的是GridPanel(new Ext.grid.GridPanel),但在Extjs4.2版本中却未发现此类,因此new的是Panel(new Ext.grid.Panel),但两者效果一致。

1.对表格的列样式进行渲染,这点和easyui很像,本篇博客采用了引用自定义函数的方式:

在自定义renderner方法的renderDescn中有很多参数,在API中基本上没有找到,不过在本博客的鸣谢网址中有介绍(不知是从哪里找到的),下面复制过来:

  1. value:将要显示到单元格里的值;
  2. cellmeta:单元格的相关属性,主要有id和CSS;
  3. record:这行的数据对象,如果需要获取其他列的值,可以通过record.data["id"]的方式得到,这个属性很重要,我们经常会用到;
  4. rowIndex:行号,这里的行号指的是当前页中所有记录的顺序;
  5. columnIndex:当前列的列号;
  6. store:构造表格时传递的ds。表格里的所有数据都可以通过store获得。

2.在表格前加复选框也很简单,需要说明的是new了一个Ext.selection.CheckboxModel实例,CheckboxModel是一个选中的复选框的选择模式(具体参见API),然后将这个组件作为selModel的值。其中关于selModel,在API中的Ext.grid.Panel中说明此属性是一个selection model实例或配置对象,即表示表格采用怎样的选择模式。

后记:如有其他问题参见本文鸣谢的博客。

ExtJS4.2学习(五)表格渲染与复选框的更多相关文章

  1. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  2. 通过编写串口助手工具学习MFC过程——(五)添加CheckBox复选框

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  3. 关于QT Graphics View开启OpenGL渲染后复选框、微调框等无法正常显示的问题

    之前学习QT Graphics View框架,除了基本的图元外,还可以通过QGraphicsProxyWidget类添加QT的基本Widget(如按钮.复选框.单选框等),常使用的场景类接口如下: Q ...

  4. 关于表格前面checkbox复选框不打勾的问题

    当点击左边的树节点的时候,让右边的表格自动选中相应的行,但是选中的行前面如果有checkbox,可能复选框虽然选中了但是不打上勾,解决方案,将遍历表格数据那段代码用延时器包裹一下.

  5. 转:jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  6. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  7. java swing 添加 jcheckbox复选框

    总体上而言,Java Swing编程有两大特点:麻烦.效果差. 麻烦是说由于设计器的使用不方便(如果您希望使用窗体设计器通过快速拖拽控件建立您的Java Swing GUI程序,请您使用MyEclip ...

  8. Java获取后台数据,动态生成多行多列复选框

    本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...

  9. Selenium2学习(十五)-- 单选框和复选框(radiobox、checkbox)

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

随机推荐

  1. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  2. Git CMD - clone: Clone a repository into a new directory

    命令格式 git clone [--template=<template_directory>]  [-l] [-s] [--no-hardlinks] [-q] [-n] [--bare ...

  3. unity3d鼠标经过物体时变颜色,离开时恢复

    using UnityEngine; using System.Collections; public class MouseEvent_Color : MonoBehaviour { //物体初始颜 ...

  4. React-Native错误笔记-EPERM

    运行react-native run-android时出现错误 EPERM:operation not permitted,lstat .............. 解决办法:用Android Stu ...

  5. Java之绘制艺术图案

    前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.Color; import java.awt.Graphics; import j ...

  6. Android虚拟机运行问题之小结

    首先说一下关于虚拟机的技巧,以前我也总是感觉电脑运行虚拟机的时候老是卡,后来在看课堂直播时看到老师用的是Total Control,在网上搜“Total Control”就能能找到,比系统自带SDK运 ...

  7. Visual Studio下SQLite数据库开发环境设置

    由于我们介绍的内容都是基于微软的Visual Studio下开发的Win32平台,所以下边我们介绍Visual Studio下SQLite数据库开发环境设置.具体而言我们有两种方式可以在Visual ...

  8. 20141016--for 兔子

    Console.Write("请输入月数:"); int m =int.Parse(Console.ReadLine()); ;//成兔对数ct ;//小兔对数xt ;//幼兔对数 ...

  9. ASP.NET MVC 过滤器开发与使用

    ASP.NET MVC 中给我们提供了内置的过滤器,通过过滤器,我们可以在控制器内的方法前后,添加必须的业务逻辑,如权限验证,身份验证,错误处理等. 今天,我们主要介绍3个过滤器:OutputCach ...

  10. javascrip笔记——图片加载

    var t_img; // 定时器 var isLoad = true; // 控制变量 // 判断图片加载状况,加载完成后回调 isImgLoad(function(){ // 加载完成 }); / ...