ext js小结3
EXT JS学习1


1 GRIDPANEL中，比如某列的返回值，用图片表示：
  renderer：function(value, metadata, record, rowIndex, colIndex, store){
}

value：原始值
metadata：可能的值为css或attr
record：Ext.data.Record，GridPanal的记录结构定义
rowIndex：行索引
colIndex：列索引
store：Ext.data.Store，数据源

   renderer: function(v){
if(v == "男"){
return "<img src='../imgs/GGgif'>";
}else{
return "<img src='../imgs/MM.gif'>";
}
}

2 //列模型
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"},
{header: "性别", width: 40, dataIndex: "Sex", align: "center",
renderer: function(v){
if(v == "男"){
return "<img src='../imgs/134.gif'>";
}else{
return "<img src='../imgs/133.gif'>";
}
}
},
{header: "生日", width: 100, format: "Y-m-d", dataIndex: "Birthday", renderer: Ext.util.Format.dateRenderer("Y-m-d")},

注意这里new Ext.grid.RowNumberer(),产生了一个序列号，
Ext.util.Format.dateRenderer("Y-m-d")},则产生了日期格式化

3
一个GRIDPANEL的例子：
  buttons: [{
text: "第一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectFirstRow();
}
},{
text: "上一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasPrevious()){
Ext.Msg.alert("警告", "已到达第一行");
}else{
rsm.selectPrevious();
}
}
},{
text: "下一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasNext()){
Ext.Msg.alert("警告", "已到达最后一行");
}else{
rsm.selectNext();
}
}
},{
text: "最后一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectLastRow();
}
},{
text: "全选"
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectAll();
}
},{
text: "全不选",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.deselectRange(0, grid.getView().getRows().length - 1);
}
},{
text: "反选",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
for(var i = grid.getView().getRows().length - 1; i >= 0; i --){
if(rsm.isSelected(i)){
rsm.deselectRow(i);
}else{
rsm.selectRow(i, true);//必须保留原来的，否则效果无法实现
}
}
}
}]
});

4 删除某行：
   {
text: "删除选定行",
icon: "../extjs/resources/images/default/dd/drop-no.gif",
cls: "x-btn-text-icon",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
var view = grid.getView();
var store = grid.getStore();
for(var i = view.getRows().length - 1; i >= 0 ; i --){
if(rsm.isSelected(i)){
store.remove(store.getAt(i));
}
}
view.refresh();
}
}

5 删除所有行：
  var store = grid.getStore();
var view = grid.getView();
store.removeAll();
view.refresh();


6 grid中，在单元格中显示文字，图等
  var cm = new Ext.grid.ColumnModel([
        {header:'产品编号',dataIndex:'product_id'},
        {header:'产品名称',dataIndex:'product_name'},
        {header:'产品价格',dataIndex:'product_price',renderer:renderColor}
    ]);

    function renderColor(value)
    {
if(value >= 1000)
{
return "<span style='color:red;font-weight:bold'>" + value + "</span>";
}
else
{
return "<span style='color:blue'>" + value + "</span>";
}
    }

  如果获得单元格更详细信息：
    var cm