ExtJs之Ext.grid.GridPanel（部分未完）-白红宇

今天在家休息，年假不用就作费啊。
看了几部香港老电影，陪爸爸看了勇士占奇才，
然后，测试了一下EXTJS未完的内容，
在京东上订了七本历史普及书，近两百块。。：）
搞定。
                         
<!
DOCTYPE
html>
<
html
>
<
head
>
    
<
title
>ExtJs</
title
>
        
<
meta
http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
<
link
rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        
<
script
type="text/javascript" src="ExtJs/ext-all.js"></
script
>
        
<
script
type="text/javascript" src="ExtJs/bootstrap.js"></
script
>
        
<
script
type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></
script
>
    
<
style
type="text/css">
      
#uses the following css:
      
.red-row{ background-color: #F5C0C0 !important; }
      
.yellow-row{ background-color: #FBF8BF !important; }
      
.green-row{ background-color: #99CC99 !important; }
    
</
style
>
    
<
script
type="text/javascript">
    
Ext.onReady(function(){ 
      
function rendererSex(value){ 
        
if (value == 'male') { 
          
return "<
span
style='color:red;font-weight: bold;'>男</
span
>";
        
}else { 
          
return "<
span
style='color:green;font-weight: bold;'>女</
span
>";
        
}
      
};
      
function rendererDescn(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;
      
}
      
function rendererMotif(data, cell, record, rowIndex, columnIndex, store) { 
        
var value = record.get('color');
        
cell.style = "background-color: " + value;
        
return data;
      
}
      
var sm = new Ext.selection.CheckboxModel({stringSelect: true});
      
var columns =[
        
new Ext.grid.RowNumberer(),
        
{header: '编号', dataIndex: 'id', width:80, sortable: false},
        
{header: '名称', dataIndex: 'name', width:180},
        
{header: '性别', dataIndex: 'sex', renderer: rendererSex, width:120},
        
{header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width:400},
        
{header: '描述', dataIndex: 'descn', renderer: rendererDescn, width:200},
        
{header: 'color', dataIndex: 'color', renderer: rendererMotif, width:200}
      
];
      
var data = [
        
['1', 'name1', 'male', '2017-01-15T02:58:04', 'descn1', '#FBF8BF'],
        
['2', 'name2', 'female', '2005-01-15T02:58:04', 'descn2', '#F5C0C0'],
        
['3', 'name3', 'male', '2017-06-15T02:58:04', 'descn3', '#99CC99'],
        
['4', 'name4', 'female', '2017-01-09T02:58:04', 'descn4', '#FBF8BF'],
        
['5', 'name5', 'male', '2017-12-15T02:58:04', 'descn5', '#F5C0C0']
      
];
      
var store = new Ext.data.ArrayStore({ 
        
data: data,
        
fields: [
          
{name: 'name', mapping: 1},
          
{name: 'sex', mapping: 2},
          
{name: 'id', mapping: 0},
          
{name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s', mapping: 3},
          
{name: 'descn', mapping: 4},
          
{name: 'color', mapping: 5}
        
]
      
});
      
/*
      
var store = new Ext.data.Store({ 
        
proxy: new Ext.data.ScriptTagProxy({url: 'source.html'}),
        
reader: new Ext.data.ArrayReader({}, [
          
{name: 'id'},
          
{name: 'name'},
          
{name: 'descn'}
        
]),
        
fields: [
          
{name: 'name', mapping: 1},
          
{name: 'id', mapping: 0},
          
{name: 'descn', mapping: 2}
        
]
      
});
      
*/
      
store.load();
      
var grid = new Ext.grid.GridPanel({ 
        
enableColumnMove: false,
        
enableColumnResize: true,
        
stripeRows: true,
        
autoHeight: true,
        
loadMask:true,
        
forceFit: true,
        
renderTo: 'grid',
        
store: store,
        
columns: columns,
        
selModel: sm,
        
bbar: new Ext.PagingToolbar({ 
          
pageSize: 3,
          
store: store,
          
displayInfo: true,
          
displayMsg: '显示第{0} 条到 {1}条记录， 一共{2}条',
          
emptyMsg: '没有记录'
        
}),
        
viewConfig: { 
          
enableRowBody: true,
          
columnsText:　'显示的列',
          
sortAscText: '升序',
          
getRowClass: function(record, rowIndex, p, ds) { 
            
var cls = 'white-row';
            
switch (record.data.color) { 
              
case '#FBF8BF' :
                
cls = 'yellow-row';
                
break;
              
case '#99CC99' :
                
cls = 'green-row';
                
break;
              
case '#F5C0C0' :
                
cls = 'red-row';
                
break;
            
}
            
return cls;
          
}
        
}
      
});
      
Ext.get('remove').on('click', function(){ 
        
store.remove(store.getAt(1));
        
grid.view.refresh();
      
})
      
var tree = new Ext.tree.TreePanel({ 
        
store: new Ext.data.TreeStore({ 
          
root: { 
            
text: '我是根',
            
children: [{ 
              
text: '我是根的第一个枝子',
              
children: { 
                
text: '我是根的第一个枝子的第一个叶子',
                
leaf: true
              
}
            
},{ 
              
text: '我是根的第一个叶子',
              
leaf: true
            
}]
          
}
        
})
      
});
      
tree.render('tree');
    
});
    
</
script
>
</
head
>
<
body
style="margin: 20px">
  
<
div
id='grid' style="width: 800px"></
div
>
  
<
button
id='remove'>删除第二行</
button
>
  
<
div
id="tree"></
div
>
</
body
>
</
html
>
        
      