Ext.onReady(function()
{
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span><img src='../images/user_male.png' />";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span><img src='../images/user_female.png' />";
}
}
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;
}
// PersonRecord
var PersonRecord = new Ext.data.Record.create(
[
{name:'id',type:'int'},
{name:'sex',type: 'string'},
{name:'name'},
{name:'descn'}]
);
// data
var myData = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
// sm
var sm = new Ext.grid.CheckboxSelectionModel();
//cm
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), // row number MODEL
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:renderSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn',renderer:renderDescn}]
);
// store
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({},PersonRecord)
});
store.load();
// gridpanel
var gridPanel = new Ext.grid.GridPanel({
title:'Ext.grid.GridPanel',
autoHeight:true,
renderTo:'grid',
store:store,
cm:cm,
sm:sm,
stripeRows: true // 隔行换色
});
// store add record
store.add(new PersonRecord({
id:6,
sex:'male',
name:'name6',
descn:'descn6'
}));
// onclick
Ext.get('remove').on('click',function(){
store.remove(store.getAt(1));
gridPanel.view.refresh();
});
});
分享到:
相关推荐
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...
ExtJS----HelloWorld程序源码
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
extjs-basex.js extjs-basex.js extjs-basex.js
extjs--创建图表 折线图、饼状图、柱状图
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
通过这个观看视频会让你很快的了解到extjs,并且能够很快的进入ext的使用
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
Extjs4---combobox省市区三级联动+struts2
Extjs4---grid的修改、删除功能---结合struts2、hibernate
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320
Extjs4--Form登录功能,结合struts2
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs4.2-2
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
ExtJS4.0-API Ext4.0-API Ext4 ExtJS4 API 学EXTJS4的好东西...
extjs-theme-bootstrap-master.zip
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读