function showUrl(url)
{
return "<a href='" + url + "'>"+ url +"</a>";
}
Ext.onReady(function(){
var data = [[1,"easyJF","www.easyjf.com"],[2,"unix","www.chinaunix.com"],[3,"extjs","www.extjs.com"]];
var store = new Ext.data.SimpleStore({data:data,fields:["id","name","url"]});
var cm = new Ext.grid.ColumnModel([{header:"名稱",dataIndex:"name",sortable:true},{header:"網址",dataIndex:"url",sortable:true,renderer
:showUrl
}]);
//--
var grid = new Ext.grid.GridPanel({
title:"數據顯示",
height:150,
width:600,
store:store,
//--
/*
columns:[
{header:"名稱",dataIndex:"name",sortable:true},
{header:"網址",dataIndex:"url",sortable:true}
]*/
cm:cm
//--
});
//--
grid.render("grid");
});
自定義的渲染函數可以顯示各種自己需要的格式，是瀏覽器能處理的html都可以。
json數據格式
function showUrl(url)
{
return "<a href='" + url + "'>"+ url +"</a>";
}
Ext.onReady(function(){
//var data = [[1,"easyJF","www.easyjf.com"],[2,"unix","www.chinaunix.com"],[3,"extjs","www.extjs.com"]];
//var store = new Ext.data.SimpleStore({data:data,fields:["id","name","url"]});
var jsondata = [{id:1,name:"easyJF",url:"www.easyjf.com"},{id:2,name:"unix",url:"www.chinaunix.com"}];
var jsonstore = new Ext.data.JsonStore({data:jsondata,fields:["id","name","url"]});
var cm = new Ext.grid.ColumnModel([{header:"名稱",dataIndex:"name",sortable:true},{header:"網址",dataIndex:"url",sortable:true,renderer:showUrl}]);
//--
var grid = new Ext.grid.GridPanel({
title:"數據顯示",
height:150,
width:600,
store:jsonstore,
//--
/*
columns:[
{header:"名稱",dataIndex:"name",sortable:true},
{header:"網址",dataIndex:"url",sortable:true}
]*/
cm:cm
//--
});
//--
grid.render("grid");
});
Ext.data.XmlReader讀取xml數據
Ext.onReady(function(){
var xmlreader = new Ext.data.XmlReader({record:"row"},["id","name","url"]);
var xmldata = new Ext.data.Store({url:"mydata.xml",reader:xmlreader,});
var colm = new Ext.grid.ColumnModel([{header:"名稱",dataIndex:"name"},{header:"網址",dataIndex:"url"}]);
var grid = new Ext.grid.GridPanel({height:200,width:600,cm:colm,store:xmldata});
grid.render("grid");
xmldata.load();
});
mydata.xml
<?xml version="1.0" encoding="GBK"?>
<data>
<row>
<id>1</id>
<name>easyjf</name>
<url>www.easyjf.com</url>
</row>
<row>
<id>2</id>
<name>job</name>
<url>www.zh-rn.com</url>
</row>
</data>
EditorGridPanel並且產生afteredit事件
Ext.onReady(function(){
var data = [{id:1,name:"子君1",sex:"男",birthdate:"1987-05-23"},{id:2,name:"子君2",sex:"男",birthdate:"1987-05-24"}];
var jsondata = new Ext.data.JsonStore({data:data,fields:["id","name","sex","birthdate"]});;
var colm = new Ext.grid.ColumnModel([
{header:"ID",dataIndex:"id"},
{header:"姓名",dataIndex:"name",editor:new Ext.form.TextField()},
{header:"性別",dataIndex:"sex"},
{header:"出生日期",dataIndex:"birthdate",renderer:Ext.util.Format.dateRenderer("Y年m月d日"),
editor:new Ext.form.DateField({format:"Y年m月d日"})
}]);
var egrid = new Ext.grid.EditorGridPanel({title:"可編輯GridPanel",height:200,width:500,
store:jsondata,cm:colm,clicksToEdit:1
});
egrid.render("egrid");
egrid.on("afteredit",afterEdit);
});
function afterEdit(obj)
{
var record = obj.record;
var id = record.get("id");
var name = record.get("name");
var sex = record.get("sex");
var birthdate = record.get("birthdate");
alert(id + ","+name+","+sex+","+birthdate);
}
