Ext.widgets-grid(2)

Ext.grid.EditorGridPanel
可编辑数据表格
Config {
clicksToEdit : Number    //点几次开始编辑,默认为2
}

方法
EditorGridPanel()
构造,应为 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编辑

事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )

下面我们扩展一下刚才的示例应用一下EditorGridPanel


 

         //定义数组
var arr=[
    [
'Bill''Gardener','2007-01-02',-10,true],
    [ 
'Ben''Horticulturalist','2007-01-03',-20.1,false],
    [
'''Gardener','2007-02-02',0,true],
    [
'''Gardener','2007-01-04',13,false],
    [ 
'''Horticulturalist','2007-01-05',15.2,false]
    ];
var reader = new Ext.data.ArrayReader(

   
{},
//定义数组到record的映射关系
   [
    
{name: 'name'},         
    
{name: 'occupation', mapping: 1},
    
{name:'date',type: 'date',dateFormat: 'Y-m-d'}//用指定的格式转换日期
    {name:'float',type:'float'},
    
{name:'bool',type:'bool'}
   ]
);
//生成元数据
 var store=new Ext.data.Store({
    reader:reader
    }
);
store.loadData(arr);


//自定义可编辑列,从ext的示例抄的,但是却要init郁闷
 Ext.grid.CheckColumn = function(config){
    Ext.apply(
this, config);
    
if(!this.id){
    
this.id = Ext.id();
    }

    
this.renderer = this.renderer.createDelegate(this);
}
;
//重写了三个方法,捕捉mousedown修改数据
Ext.grid.CheckColumn.prototype ={
init : 
function(grid){
    
this.grid = grid;
    
this.grid.on('render'function(){
    
var view = this.grid.getView();
    view.mainBody.on(
'mousedown'this.onMouseDown, this);
    }
this);
}
,

onMouseDown : 
function(e, t){
    
    
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
    e.stopEvent();
    
var index = this.grid.getView().findRowIndex(t);
    
var record = this.grid.store.getAt(index);
    record.set(
this.dataIndex, !record.data[this.dataIndex]);
    }

}
,

renderer : 
function(v, p, record){
    p.css 
+= ' x-grid3-check-col-td';
    
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
}

}


//绑定到bool字段
var checkColumn=new Ext.grid.CheckColumn({
   header: 
"布尔值",
   dataIndex: 
'bool'
}
);


/*
    现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
    在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";
*/

var col=new Ext.grid.ColumnModel([
    
new Ext.grid.RowNumberer({header:'序号',width:30}),
    
{header:'姓名',sortable: true,dataIndex:'name'},
    
{header:'职业',sortable: true,dataIndex:'occupation'},
    
{   
    id:
'datacol',
    header:
'日期',
    sortable:
true,
    dataIndex:
'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示
    editor:new Ext.form.DateField()
     }
,
    
{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()},  //自定义显示方式,右对齐
    checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的
]);



//配置视图信息
var view=new Ext.grid.GridView({forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText
='列显示/隐藏';

//现在我们看看可编辑的数据表格能用了吗        
var grid=new Ext.grid.EditorGridPanel({
    el:Ext.getBody(),
    height:
200,
    width:
400,
    store:store,
    cm:col,
    view:view
    }
);    
//为什么原例不需要init?
checkColumn.init(grid);
grid.render();

function formatFloat(val){
    
var bgcolor;
    
if(val>0){
    bgcolor
='#FF0000';
    }
else if(val<0){
    bgcolor
='#00FF00';
    }

    
else{
    bgcolor
='#000000';
    }

    
return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}



Ext.grid.PropertyGrid
属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格,

config{
     customEditors : Object    //自定义属性编辑器
      source : Object    //数据源
}

方法
PropertyGrid( Object config )
构造

getSource() : Object
setSource( Object source ) : void
得到和设置数据源

事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed

同样用一个简单的示例来完成PropertyGrid的学习
        

var grid=new Ext.grid.PropertyGrid({
    el:Ext.getBody()
    ,height:
200
    ,width:
400
    ,viewConfig : 
{forceFit:true}
    ,customEditors:
{
        
'年龄':new Ext.grid.GridEditor(new Ext.form.NumberField())
    }

    ,source:
{
        
'姓名':'blackant'
        ,
'年龄':100
    }

}
);
       

grid.source[
'性别']='';
grid.customEditors[
'性别']=new Ext.grid.GridEditor(new Ext.form.ComboBox({
        editable:
false
        ,triggerAction: 
'all'
        ,store: 
new Ext.data.SimpleStore({
            fields: [
'gender'],
            data : [[
''],['']]
        }
)
        ,displayField:
'gender'
        ,forceSelection:
true
        ,mode:
'local'
}
));
grid.render();



选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主

posted @ 2008-05-23 21:22 meetrice 阅读(...) 评论(...) 编辑 收藏