最近在学习Extjs4.2 ,积累文章,看得不错,再此留年:

//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id',width:}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',width:},
{header:'描述',dataIndex:'descn',width:},
{header:'状态',dataIndex:'status',width:,renderer:function(value){
if(value=='可用'){
return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";
}
}}
];
//定义数据
var data =[
['','小王','描述01','可用'],
['','李四','描述02','禁用'],
['','张三','描述03','可用'],
['','束洋洋','思考者日记网','可用'],
['','高飞','描述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 grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
width:,
height:,
//selModel:sm,
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:true, //斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
viewConfig:{
columnsText:'显示的列',
scrollOffset:, //表格右侧为滚动条预留的宽度,默认为20
sortAscText:'正序',
sortDescText:'倒序',
forceFit:true //表格会自动延展每列的长度,使内容填满整个表格
}
});
});

1.自定义grid的renderer 方法

a.function renderMotif

/改变列颜色自定义renderner方法
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('name');
cell.style="background-color:"+value;
return data;
}

列中引用:

{header:'名称',dataIndex:'name',width:, renderer:renderMotif},  

b.function  renderDescn

{header:'描述',dataIndex:'descn',width:,renderer:renderDescn}  

//自定义renderner方法

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
var str="<input type='button' value='查询详细信息' onclick='alert(""+
"这个单元格的值是:"+value +"n"+
"这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+
"这个单元格对应行的record是:"+record +",一行的数据都在里面n"+
"这是第"+rowIndex+"行n"+
"这是第"+columnIndex +"列n"+
"这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' />";
return str;
}

说明:

我们可以在渲染函数里得到多个参数,如下所示:

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

3.自动显示行号和复选框都是renderer的延伸。先来说自动显示行号,在列模型columns中加入RowNumber对象即可,如下代码

new Ext.grid.RowNumberer(), //自动显示行号

4.获取选中行数据,有点奇怪不知道为什么,在EXTJS3.0和EXTJS4.0里面写法不一样,两者区别:

EXTJS4.0写法:
var selectedData = grid.getSelectionModel().getSelection()[].data;
alert(selectedData.Id);
EXTJS3.0写法:
var selectedData = grid.getSelectionModel().getSelection();
alert(selectedData[].Id);

EXTJS 4.2 资料 控件之Grid 那些事的更多相关文章

  1. EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件

    主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...

  2. EXTJS 4.2 资料 控件之Grid 添加行,编辑行,删除行

    //SiteVariableConfigValue类,创立一个模型类 Ext.define("SiteVariableConfigValue", { extend: "E ...

  3. EXTJS 4.2 资料 控件之Grid Columns 列renderer 绑定事件

    columns: [ { header: '序号', xtype: 'rownumberer', align: 'center', width: 100 }, { header: 'CompanyId ...

  4. EXTJS 4.2 资料 控件之Grid 列鼠标悬停提示

    columns: [ { header: }, { header: }, { header: , renderer: function (v, ctx, record) { ctx.tdAttr = ...

  5. EXTJS 3.0 资料 控件之 html 潜入label用法

    这是在Extjs 中插入html 控件label! html: "<div><label id='howMany'>您共选中了</label><br ...

  6. EXTJS 3.0 资料 控件之 combo 用法

    EXTJS combo 控件: 1.先定义store //年款 var comboData_ReleasYear = [ ['], ['], ['], ['] ]; 2.定义combo控件 { lay ...

  7. EXTJS 4.2 资料 控件之combo 联动

    写两个数据源: 1.IM_ST_Module.js { success:true, data:[ { ModuleId: '1', ModuleName: '资讯' } , { ModuleId: ' ...

  8. EXTJS 4.2 资料 控件textfield中fieldLabel去掉冒号,控件label的长度

    代码: labelSeparator: '', // 去掉laebl中的冒号 labelWidth: 10,//控件label的长度

  9. EXTJS 4.2 资料 控件之radiogroup 的用法

    最近在EXTJS4.2开发项目,radiogroup的用法,主要是和grid之间的编辑功能:看了好多资料都不对,特此在这里备注记录 代码如下, 1.这是一段Win窗体上的两个单选按钮,设置单选按钮都是 ...

随机推荐

  1. python 元类——metaclass

    from stack overflow:http://stackoverflow.com/questions/100003/what-is-a-metaclass-in-python Classes ...

  2. Linux下进程的创建

    这篇文章主要是讲解到Linux进程的控制,包括程序和进程.守护进程.守护进程的出错处理. 1.程序和进程 程序(program)是存放在磁盘文件中的可执行文件,程序的执行实例被称为进程(process ...

  3. ubuntu下安装Sublime Text并支持中文输入

    Sublime Text还是文本编辑器中比较不错的,就是他的文件对比有些差劲吧,还有中文输入需要打补丁,不知道开发者是怎么想的... 当然,这个软件是收费的,但是不买也能一直的使用,在我天朝就这点好处 ...

  4. 【转】测试用例设计——WEB通用测试用例

    现在项目做完了,我觉得还是有必要总结一下,学习到的内容.毕竟有总结才能有提高嘛!总结一下通用的东西,不管什么项目基本都可能会遇到,有写地方也有重复的或者有的是按照个人的习惯来总结的不一定都对,有不对的 ...

  5. es6模板字符串 问题记录

    自古无图无真相,望各位博主在条件允许的情况下,配张图片吧! 界面是用join拼接的,当循环td的时候会产生一个空串,界面就会出现一个逗号, 虽然功能块算实现了,不过始终美中不足,然后想到的办法是替换所 ...

  6. Jedis - hello world

    Maven Dependency: <dependency> <groupId>redis.clients</groupId> <artifactId> ...

  7. spring+mybatis管理多个数据源(非分布式事务)

    本文通过一个demo,介绍如何使用spring+mybatis管理多个数据源,注意,本文的事务管理并非之前博文介绍的分布式事务. 这个demo将使用两个事务管理器分别管理两个数据源.对于每一个独立的事 ...

  8. JS定位PDF页码。

    由于项目中的PDF文章段落标题有些是英文,对其翻译后需要定位到具体的页码. 查询相关资料及进行尝试后发现可以用如下方法可以实现 function gotoPage(page) {            ...

  9. 参数请求post, get , delete中的基本使用(1)

    /// <summary> /// get 数据的时候可以采用此函数大部分功能 /// </summary> /// <param name="args&quo ...

  10. winform中文本框的一些案例

    项目中经常看到在输入金额时,会加逗号,最近在复习正则表达式,就联系下,界面如下: