第十八講：ExtJS組件之GridPanel(下)

1.表格視圖。

<?xml version="1.0" encoding="UTF-8"?>

<dataset>

<row>

<id>1</id>

<name>張三</name>

<age>43</age>

<homePage>www.ibeifeng.com</homePage>

<jianli>

本人來自**大學，。。。。。。。

</jianli>

</row>

<row>

<id>2</id>

<name>李四</name>

<age>24</age>

<homePage>www.ibeifeng.com</homePage>

<jianli>

本人來自**大學，。。。。。。。

</jianli>

</row>

<row>

<id>3</id>

<name>王五</name>

<age>45</age>

<homePage>www.ibeifeng.com</homePage>

<jianli>

本人來自**大學，。。。。。。。

</jianli>

</row>

<row>

<id>4</id>

<name>趙六</name>

<age>12</age>

<homePage>www.ibeifeng.com</homePage>

<jianli>

本人來自**大學，。。。。。。。

</jianli>

</row>

</dataset>

 

function showUrl(value){

return "<a href=http://"+value+" target='_blank'>"+value+"</a>";

}

 

function formatAge(value,metadata){

if(value > 30) {

metadata.attr = 'style="color:red"';

}

return value;

}

 

function formateID(value,metadata){

if(value % 2 == 0) {

metadata.attr = 'style="background-color:red"';

}

return value;

}

 

 

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";

 

//記錄類型

var Person = new Ext.data.Record.create([

{name:"id",mapping:"id"},

{name:"name",mapping:"name"},

{name:"age",mapping:"age"},

{name:"homePage",mapping:"homePage"},

{name:"jianli",mapping:"jianli"}

]);

 

//存儲器

var store = new Ext.data.Store({

url:"data.xml",

reader:new Ext.data.XmlReader(

{record: "row",id:"id"},

Person)

});

 

store.load();

var sm = new Ext.grid.CheckboxSelectionModel();

 

//表格面板

var gridPanel = new Ext.grid.GridPanel({

id:"gridPanel",

renderTo:"hello",

title:"人員信息",

width:700,

height:300,

store:store,

columns:[

sm,

{header:"id",dataIndex:"id",sortable:true,renderer:formateID},

{header:"姓名",dataIndex:"name",sortable:true},

{header:"年齡",dataIndex:"age",sortable:true,renderer:formatAge},

{header:"個人主頁",dataIndex:"homePage",sortable:true,renderer:showUrl}

],

autoExpandColumn:4,

sm:sm,

bbar:[

{text:"獲得所選行",handler:function(){

var msg = "";

var row = gridPanel.getSelectionModel().each(function(rec){

msg = msg + rec.get("id") + "," + rec.get("name") + "," +

rec.get("age") + "," + rec.get("homePage") + "\n";

  });

  alert(msg);

}}

],

viewConfig:{

enableRowBody : true,//使用行體

getRowClass : function(record,index,rowParams,store){

rowParams.body = "<div style='padding:10px,10px,10px,10px'>" + record.get("jianli") + "</div>";

rowParams.cols=5;

rowParams.bodyStyle="background-color:#FFFFCC"

}

}

})

});

 

2.可編輯的表格。

function showUrl(value){

return "<a href=http://"+value+" target='_blank'>"+value+"</a>";

}

 

function formatAge(value,metadata){

if(value > 30) {

metadata.attr = 'style="color:red"';

}

return value;

}

 

function formateID(value,metadata){

if(value % 2 == 0) {

metadata.attr = 'style="background-color:red"';

}

return value;

}

 

 

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";

 

//記錄類型

var Person = new Ext.data.Record.create([

{name:"id",mapping:"id"},

{name:"name",mapping:"name"},

{name:"age",mapping:"age"},

{name:"homePage",mapping:"homePage"},

{name:"jianli",mapping:"jianli"}

]);

 

//存儲器

var store = new Ext.data.Store({

url:"data.xml",

reader:new Ext.data.XmlReader(

{record: "row",id:"id"},

Person)

});

 

store.load();

var sm = new Ext.grid.CheckboxSelectionModel();

 

//表格面板

var gridPanel = new Ext.grid.EditorGridPanel({

id:"gridPanel",

renderTo:"hello",

title:"人員信息",

width:700,

height:300,

store:store,

columns:[

sm,

{header:"id",dataIndex:"id",sortable:true,renderer:formateID},

{header:"姓名",dataIndex:"name",sortable:true,

    editor:new Ext.form.TextField({

allowBlank:false     

    })

 },

{header:"年齡",dataIndex:"age",sortable:true,renderer:formatAge},

{header:"個人主頁",dataIndex:"homePage",sortable:true,renderer:showUrl}

],

autoExpandColumn:4,

sm:sm,

bbar:[

{text:"獲得所選行",handler:function(){

var msg = "";

var row = gridPanel.getSelectionModel().each(function(rec){

msg = msg + rec.get("id") + "," + rec.get("name") + "," +

rec.get("age") + "," + rec.get("homePage") + "\n";

  });

  alert(msg);

}}

],

viewConfig:{

enableRowBody : true,//使用行體

getRowClass : function(record,index,rowParams,store){

rowParams.body = "<div style='padding:10px,10px,10px,10px'>" + record.get("jianli") + "</div>";

rowParams.cols=5;

rowParams.bodyStyle="background-color:#FFFFCC"

}

}

})

});

 

3.屬性表格面板。

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget="qtip";

 

var propertyGrid = new Ext.grid.PropertyGrid({

id:"propertyPanel",

title:"propertyPanel",

width:300,

height:300,

renderTo:"hello",

source: {

"員工名稱" : "張三",

"出生日期" : new Date(2008,5,23),

"性別" : '男',

"是否已婚" : false,

"年齡" : 29

}

})

});

設置時間格式。

propertyGrid.getColumnModel().dateFormat = "Y年m月d日";

自定義編輯框。

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget="qtip";

 

var propertyGrid = new Ext.grid.PropertyGrid({

id:"propertyPanel",

title:"propertyPanel",

width:300,

height:300,

renderTo:"hello",

source: {

"員工名稱" : "張三",

"出生日期" : new Date(2008,4,23),

"性別" : '男',

"是否已婚" : false,

"年齡" : 29

},

customEditors:{

"性別":new Ext.grid.GridEditor(new Ext.form.ComboBox({

mode: 'local',

displayField:"sex",

triggerAction:"all",

store:new Ext.data.SimpleStore({

fields:["sex"],

data:[["男"],["女"]]

})

})),

"年齡":new Ext.grid.GridEditor(new Ext.form.NumberField({

allowBlank:false,

allowDecimals:false,

allowNegative:false,

maxValue:100,

maxText:"年齡不能大於100",

minValue:1,

minText:"年齡不能小於1",

selectOnFocus:true,

blankText:"必須填寫年齡信息"

}))

}

});

 

propertyGrid.getColumnModel().dateFormat = "Y年m月d日";

});

4.創建分組。

function showUrl(value){

return "<a href=http://"+value+" target='_blank'>"+value+"</a>";

}

 

function formatAge(value,metadata){

if(value > 30) {

metadata.attr = 'style="color:red"';

}

return value;

}

 

function formateID(value,metadata){

if(value % 2 == 0) {

metadata.attr = 'style="background-color:red"';

}

return value;

}

 

 

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";

 

//記錄類型

var Person = new Ext.data.Record.create([

{name:"id",mapping:"id"},

{name:"name",mapping:"name"},

{name:"age",mapping:"age"},

{name:"homePage",mapping:"homePage"},

{name:"jianli",mapping:"jianli"}

]);

 

//存儲器

var store = new Ext.data.GroupingStore({

url:"data.xml",

reader:new Ext.data.XmlReader(

{record: "row",id:"id"},

Person),

groupField:"homePage"

});

 

store.load();

var sm = new Ext.grid.CheckboxSelectionModel();

 

//表格面板

var gridPanel = new Ext.grid.GridPanel({

id:"gridPanel",

renderTo:"hello",

title:"人員信息",

width:700,

height:300,

store:store,

columns:[

sm,

{header:"id",dataIndex:"id",sortable:true,renderer:formateID},

{header:"姓名",dataIndex:"name",sortable:true},

{header:"年齡",dataIndex:"age",sortable:true,renderer:formatAge},

{header:"個人主頁",dataIndex:"homePage",sortable:true,renderer:showUrl}

],

autoExpandColumn:4,

sm:sm,

bbar:[

{text:"獲得所選行",handler:function(){

var msg = "";

var row = gridPanel.getSelectionModel().each(function(rec){

msg = msg + rec.get("id") + "," + rec.get("name") + "," +

rec.get("age") + "," + rec.get("homePage") + "\n";

  });

  alert(msg);

}}

],

view:new Ext.grid.GroupingView({

groupTextTpl : '{text}(共{[values.rs.length]}條)',//定義分組行模板

groupByText : '使用當前字段進行分組',//表頭菜單提示信息

showGroupsText : '表格分組',//表頭菜單提示信息

showGroupName : true,//顯示分組字段名稱

startCollapsed : false,//展開分組

hideGroupedColumn : true//隱藏分組列

 

})

})

});