extjs学习（关于grid）
1.想要調整某一列在表格中的順序，可以使用mapping(索引是從0開始的)
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id',mapping:1},
{name:'name',mapping:0},
{name:'descn',mapping:2}
]}
);
2、想讓表格擁有斑馬線的效果：加上stripeRows:true（默認為false）
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
??stripeRows:true,
store : store,
columns : columns
});
3、想讓 grid擁有和表格一樣的border：加上?columnLines : true
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
??stripeRows:true,
? columnLines : true,
store : store,
columns : columns
});
4.讀取數據時，使用遮罩效果，加上：loadMask:true(默認為false)
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
??stripeRows:true,
? columnLines : true,
loadMask:true,
store : store,
columns : columns
});
5.禁止拖放列和改變列的寬度，把enableColumnMove和 enableResize設置為false
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
??stripeRows:true,
? columnLines : true,
loadMask:true,
? ? ?enableColumnMove:false,
? ??enableResize : false,
store : store,
columns : columns
});
6.允許按列進行排序，只需加上sortable:true
var columns = [
{header:'編號',dataIndex:'id',sortable:true},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
?7.extjs中grid的中文排序
? ? 為了讓表格實現中文排序的功能，我們需要重寫Ext.data.Store的createComparator()函數，代碼如下：
? ? ? Ext.data.Store.prototype.createComparator = function(sorters){
? ? ? ? ? return ?function(r1,r2){
?var s = sorters[0], f=s.property;
var v1 = r1.data[f], v2 = r2.data[f];
? ? ? ? ?var result = 0;
? ? ? ? if(typeof(v1)=="string"){
? ? ? ? ? ? result = v1.localeCompare(v2);
? ? ? if(s.direction=='DESC'){
result *=-1;
}
?
? ? ? }else{
result = sorters[0].sort(r1,r2);
}
? ? ?var length = sorters.length;
for(var i = 1; i<length ; i++){
? ? ? ? ?s= sorters[i];
f = s.property;
? v1= r1.data[f];
v2 = r2.data[f];
if(typeof(v1)=="string"){
result = result || v1.localeCompare(v2);
if(s.direction == 'DESC'){
result *=-1;
}
}else{
result = result||s.sort.call(this,r1,r2);
}
}
return result;
};
};
?以上代碼重寫了Ext.data.Store的comparator()函數，使其支持中文排序。可以將這段代碼加到ext-all.js文件最后，或者放到HTML頁面的做上面，總之是要在Ext初始化之后，實際代碼調用之前執行。
8.表格的渲染
? 加入一個表格中有性別那一列，如果性別是女則顯示綠色的，是男則顯示紅色的，該怎么實現呢？下面給出解決方案：
?var columns = [{header:'編號'，dataIndex:'id'},
? ? ?{header:'性別'，dataIndex:'sex',renderer:function(value){
if(value=='male'){
return "<span style='color:red';font-weight:bold;'>紅男</span>";
} else{
return "<span style='color:green';font-weight:bold;'>綠女</span>";
}
}},
{header:'名稱'，dataIndex:'name'},
{header:'描述'，dataIndex:'descn'}
];
可以看出在columns里增加了renderer屬性，renderer的值是一個自定義函數，不過這樣代碼看起來顯得很亂，所以做了一下修改：
function renderSex(value){
if(value=='male'){
return "<span style='color:red';font-weight:bold;'>紅男</span><img src='user_male.png'/>";
} else{
return "<span style='color:green';font-weight:bold;'>綠女</span><img src='user_female.png'/>";
}
}
var columns =[{header:'編號'，dataIndex:'id'},
? ? ?{header:'性別'，dataIndex:'sex',renderer:renderSex}},
{header:'名稱'，dataIndex:'name'},
{header:'描述'，dataIndex:'descn'}
];
9.表格中加復選框
（1）首先創建一個sm,也就是CheckboxModel(),代碼如下：
? ? ? var sm = new Ext.selection.CheckboxModel({checkOnly:true});?
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
store : store,
columns : columns,
selModel:sm
});
10.如何得到表格選中的數據
var selected = Ext.getCmp("IdeifGrid").getSelectionModel().selected; ?//其中IdeifGrid是gridPanel的id
var selected = grid.getSelectionModel().selected;//其中grid是var的一個參數
for(var i=0;i<selected.getCount();i++){
?var record = selected.get(i);
?Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
};
?11.從數據庫讀取數據store定義：
var?URL_Path=?"ideIf/queryAll";
var store = Ext.create('Ext.data.Store', {
fields : [ 'ideNm', 'ideNo','opt' ],
proxy : {
type : 'ajax',
url : URL_Path,
reader : {
root : 'items',// JSON數組對象名
totalProperty : 'totalCount'// 數據集記錄總數
}
},
pageSize : 15, // 設置每個頁面有十條數據
autoLoad : false
});
12.數據較多，實現表格的分頁：(如果想讓分頁工具條顯示在頂部，可以講bbar換成tbar)
var toolbarPaging=Ext.create('Ext.PagingToolbar',
{
autoDestroy : false,
store : store,
displayInfo : true,
beforePageText : '第',
afterPageText : '頁',
displayMsg : '顯示 {0} - {1} 條，共計 {2} 條',
emptyMsg : "沒有數據顯示",
plugins : [
new Ext.ux.plugin.PagingToolbarResizer({
options : [ 15, 30, 45, 60, 75 ],
prependCombo : false
}),
new Ext.ux.ProgressBarPager({ progBarWidth : 198 })
]
}) ;
在grid中加入bbar屬性：
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
store : store,
columns : columns,
selModel:sm,
? ? ? ? ? ?bbar:toolbarPaging
});
13.表格分頁之后有可能第二頁的序號錯亂，解決方案如下：
1.寫一個渲染表格的方法，如下：
function renderNum(value,metadata,record,rowIndex){
var record_start = 0;
var store = store;
//store當前頁數
var currentPage = store.currentPage;
//store每頁顯示數
var pageSize = store.pageSize;
if(pageSize>1){
record_start = (currentPage-1)*pageSize;
}
return record_start + 1 + rowIndex;
}
2.在column中的序號列加上：renderer：renderNum
var columns = [
{text:'編號',dataIndex:'id',xtype : 'rownumberer',renderer：renderNum},
{header:'名稱',dataIndex:'ideNm'},
{header:'描述',dataIndex:'ideNo'},
{text:'操作',dataIndex:'opt',renderer:function(){
return "<a>操作</a>";
}}
];
?14.可編輯表格控件
1.加入可編輯控
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
store : store,
columns : columns,
selModel:sm,
? ? ? ? ? ?bbar:toolbarPaging,
plugins:[
Ext.create('Ext.grid.plugin.CellEditing',{
clickToEdit:1
})
]
});
2.在columns中加入editor:{allowBlank:false},如下：
var columns = [
{
text:'編號',
dataIndex:'id',
xtype : 'rownumberer',
renderer：renderNum,
editor:{allowBlank:false}
},
{header:'名稱',dataIndex:'ideNm'},
{header:'描述',dataIndex:'ideNo'},
{text:'操作',dataIndex:'opt',renderer:function(){
return "<a>操作</a>";
}}
];
?15.添加一行/刪除一行
1.先在grid中加上tbar
tbar:['-',{
text:'添加一行',
handler:function(){
var p = {
id:'',
ideNo:'',
ideNm:'',
opt:''
};
store.insert(0,p);
}
},'-',{
text:'刪除一行',
?
handler:function(){
Ext.Msg.confirm('信息'，‘確定要刪除嗎？’,function(btn){
if(btn=='yes'){
var sm = grid.getSelectionModel();
var record = sm.getSelection()[0];
store.remove(record);
}
})
}
}]
16.既然15已經進行了添加和刪除表格數據，這時我們需要對表格的數據進行保存，怎么保存呢，下面給出方法：
{
text:'保存',
handler:function(){
var m = store.getModifiedRecords().slice(0);//slice(start,(end));遍歷數組
var jsonArray = [];
Ext.each(m,function(item){
jsonArray.push(item.data);
});
Ext.Ajax.request({
method : 'POST',
url:'11_03.jsp',
success:function(response){
Ext.Msg.alert('信息'，response.responseText,function(){
store.reload();
})
},
failure:function(){
Ext.Msg.alert("錯誤","與后臺交互的時候出現了問題")；
},
params:'data='+encodeURIComponent(Ext.encode(jsonArray))
})
}
}
17.可編輯表格怎么控制輸入數據的類型：下面給出方法：
eg:表格有四列，第一列只能填寫數字，第二列是下拉框，第三列是日期，第四列是單選框(下面的store是寫死的數據)
var?comboData = [['0','新版ext教程'],['1','ext在線支持'],[2','ext擴展']];
var columns = [{
header:'數字列',
dataIndex:'number',
editor : ?new Ext.form.NumberField({
allowBlank : false,//不允許為空
allowNegative : false,//不允許輸入負號
maxVlue : 10 //最大值
},
{
?
header:'選擇列',
?
dataIndex:'combo',
?
editor : ?new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ['value','text'],
data : comboData
}),
emptyText : '請選擇',
mode : 'local' ,?
triggerAction : 'all' ,?
valueField : 'value',
displayField : 'text',
editable : false
?
})? ,
renderer : function(value){
return comboData[value][1];
}
)?
},{
header : '日期列',
dataIndex : 'data',
editor : new Ext.form.DateField({
format : 'Y-m-d',
minValue : '2007-12-14',
disabledDays:[0,6],//周六周日不能選擇
disabledDaysText : '只能選擇工作日'
}),
renderer : function(value){
return Ext.Data.format(value,"Y-m-d");
}
},{
header : '判斷列',
dataIndex : 'check',
editor : new form.Checkbox({
allowBlank : false
}),
renderer : function(value){
return value ? '是' : '否'；
}?
}]
store中的數據從數據庫中獲取
?
var store = new Ext.data.ArrayStore({
fields : [ 'cdNm', 'cdVl' ],
proxy : {
type : 'ajax',
url : "code/query/typ/IDE_STS",
params : {
_method : 'get'
},
reader : {
root : 'items'
}
},
autoLoad : false
});
設置默認值：
store.load({
callback : function(records, options, success) {
//ideStore.insert(0,[{cdNm : '全部',cdVl : ''}])
ideStore.each(function(record) { //加載完畢執行的回調函數
if (record.get('cdNm') == "啟用") { //機構狀態默認值為凍結
Ext.getCmp('IDESts').setValue(record);
}
});
},
scope : store, //指定回調函數執行時的作用域
add : false //為true時，load()得到的數據會添加在原來的store數據末尾，否則會先清除之前的數據再將得到的數據添加到store中
});
?
轉載于:https://www.cnblogs.com/aajava/p/3958150.html
總結
以上是生活随笔為你收集整理的extjs学习（关于grid）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tomcat 域名的配置
- 下一篇： Leetcode: Binary Tre