grid.常规使用

最新推荐文章于 2019-04-24 11:09:33 发布
长江
最新推荐文章于 2019-04-24 11:09:33 发布
阅读量934
点赞数
分类专栏： VS2010.net MVC+EXTJS4 文章标签： header function flex autoload plugins features
VS2010.net MVC+EXTJS4 专栏收录该内容
29 篇文章 0 订阅
订阅专栏
//配置表格列   
{header: "姓名", width: 50, dataIndex: 'name'},   
{header: "组长", width: 50, dataIndex: 'leader',    
    xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列   
    trueText: '是',   
    falseText: '否'  
},   
{header: "生日", width: 100, dataIndex: 'birthday',    
    xtype : 'datecolumn',//Ext.grid.column.Date日期列   
    format : 'Y年m月d日'//日期格式化字符串   
},   
{header: "薪资", width: 50, dataIndex: 'salary',    
    xtype: 'numbercolumn',//Ext.grid.column.Number数字列   
    format:'0,000'//数字格式化字符串   
}  



//grid.column.Action动作列
{ xtype: 'actioncolumn', //Ext.grid.column.Action动作列   
                   items: [{
                       icon: 'images/edit.gif', //指定编辑图标资源的URL    
                       handler: function (grid, rowIndex, colIndex) {
                           //获取被操作的数据记录   
                           var rec = grid.getStore().getAt(rowIndex);
                           alert("编辑 " + rec.get('name'));
                       }
                   }, {
                       icon: 'images/del.gif', //指定编辑图标资源的URL    
                       handler: function (grid, rowIndex, colIndex) {
                           var rec = grid.getStore().getAt(rowIndex);
                           alert("删除 " + rec.get('name'));
                       }
                   }, {
                       icon: 'images/save.gif', //指定编辑图标资源的URL    
                       handler: function (grid, rowIndex, colIndex) {
                           var rec = grid.getStore().getAt(rowIndex);
                           alert("保存 " + rec.get('name'));
                       }
                   }]
               }
 
 
//定义渲染函数，格式化性别显示   
function formatSex(value){         
    return value=='man'?'男':'<font color=red>女</font>';   
}   
//定义渲染函数，格式化年龄显示   
function formatAge(value,metadata){            
    if(value < 30){  //年龄小于30的设置背景颜色为#CCFFFF   
        metadata.style = 'background-color:#CCFFFF;';   
    }   
    return value;   
}  
columns: [//配置表格列   
                {header: "id", width: 30, dataIndex: 'id'},   
                {header: "姓名", width: 50, dataIndex: 'name'},   
                {header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},   
                {header: "生日", width: 100, dataIndex: 'birthday',    
                    //格式化生日显示   
renderer:Ext.util.Format.dateRenderer('Y年m月d日')             },   
                {header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}   
            ]  



 
{   
    header: "描述", width: 100,   
    xtype: 'templatecolumn',//Ext.grid.column.Template数字列   
    tpl : '{name}<tpl if="leader == false">不</tpl>是组长'  
}  



 
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}) 


Ext.selection.CellModel（单元格选择模式）示例
//创建表格数据   
var datas = [   
    [100,'张三',24], [200,'李四',30], [300,'王五',29]   
];   
//创建Grid表格组件   
var grid = Ext.create('Ext.grid.Panel',{   
    title : '单元格选择模式示例',   
    renderTo: Ext.getBody(),   
    width:200,   
    height:170,   
    frame:true,   
    selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel   
    tbar : [{   
        text : '取得所选单元格',   
        handler : function(){   
            var cell = grid.getSelectionModel().getCurrentPosition();   
            alert(Ext.JSON.encode(cell));   
        }   
    }],   
    store: {//配置数据源   
        fields: ['id','name','age'],//定义字段   
        proxy: {   
            type: 'memory',//Ext.data.proxy.Memory内存代理   
            data : datas,//读取内嵌数据   
            reader : 'array'//Ext.data.reader.Array解析器   
        },   
        autoLoad: true//自动加载   
    },   
    columns: [//配置表格列   
        {header: "id", width: 30, dataIndex: 'id', sortable: true},   
        {header: "姓名", width: 80, dataIndex: 'name', sortable: true},   
        {header: "年龄", width: 80, dataIndex: 'age', sortable: true}   
    ]   
});  



Ext.selection.RowModel（行选择模式）
simpleSelect : true,//启用简单选择功能    
multiSelect : true,//支持多选   
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel   
tbar : [{   
    text : '取得所选行',   
    handler : function(){   
        var msg = '';   
        var rows = grid.getSelectionModel().getSelection();   
        for(var i = 0; i < rows.length; i++){   
            msg = msg + rows[i].get('name') + '\n';   
        }   
        alert(msg);   
    }   
}]  



Ext.selection.CheckboxModel（复选框选择模式）
//注册复选框选择模式别名为selection.checkboxmodel   
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');  

multiSelect : true,//支持多选   
            selModel: {   
                selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel   
            },   
            tbar : [{   
                text : '取得所选行',   
                handler : function(){   
                    var msg = '';   
                    var rows = grid.getSelectionModel().getSelection();   
                    for(var i = 0; i < rows.length; i++){   
                        msg = msg + rows[i].get('name') + '\n';   
                    }   
                    alert(msg);   
                }   
            }]  



grid中的features使用 Ext.grid.feature.RowBody
features: [Ext.create('Ext.grid.feature.RowBody',{   
    getAdditionalData: function(data, idx, record, orig) {   
        var headerCt = this.view.headerCt,   
            colspan  = headerCt.getColumnCount();//获取表格的列数   
       
        return {   
            rowBody: record.get('introduce'),//指定行体内容   
            rowBodyCls: 'rowbodyColor',//指定行体样式   
            rowBodyColspan: colspan//指定行体跨列的列数   
            };   
        }   
    })]  



Ext.grid.feature.Summary
features: [{   
    ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性   
}],   
columns: [//配置表格列   
    {header: "姓名", flex: 1, dataIndex: 'name',    
        summaryType: 'count',//求数量   
        summaryRenderer: function(value){   
            return '员工总数：'+value   
        }   
    },   
    {header: "薪资", flex: 1, dataIndex: 'salary',    
        summaryType: 'average',//求平均值   
        summaryRenderer: function(value){   
            return '平均薪资：'+value   
        }   
    }   
]  



Ext.grid.feature.Grouping
features: [Ext.create('Ext.grid.feature.Grouping', {   
    groupByText : '用本字段分组',   
    showGroupsText : '显示分组',   
    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版   
    startCollapsed: true //设置初始分组是否收起    
})],   
columns: [//配置表格列   
    {header: "姓名", flex: 1, dataIndex: 'name'},   
    {header: "性别", flex: 1, dataIndex: 'sex'},   
    {header: "年龄", flex: 1, dataIndex: 'age'}   
]  



Ext.grid.feature.GroupingSummary
features: [Ext.create('Ext.grid.feature.GroupingSummary', {   
    groupByText : '用本字段分组',   
    showGroupsText : '显示分组',   
    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版   
    startCollapsed: true //设置初始分组是否收起    
})],   
columns: [//配置表格列   
    {header: "姓名", width: 100, dataIndex: 'name',    
        summaryType: 'count',//求数量   
        summaryRenderer: function(value){   
            return '员工总数：'+value   
        }   
    },   
    {header: "性别", width: 50, dataIndex: 'sex'},   
    {header: "年龄", width: 110, dataIndex: 'age',    
        summaryType: 'average',//求数量   
        summaryRenderer: function(value){   
            return '平均年龄：'+value   
        }   
    }   
]  



Ext.grid.plugin.CellEditing
plugins: [   
    Ext.create('Ext.grid.plugin.CellEditing', {   
        clicksToEdit: 1//设置鼠标单击1次进入编辑状态   
    })   
],   
selType: 'cellmodel',//设置为单元格选择模式   
columns: [//配置表格列   
  Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),   
  {header: "姓名", width: 50, dataIndex: 'name',   
        editor: {//文本字段   
            xtype:'textfield',   
            allowBlank:false  
        }   
    },   
    {header: "生日", width: 100, dataIndex: 'birthday',    
        xtype : 'datecolumn',//Ext.grid.column.Date日期列   
        format : 'Y年m月d日',//日期格式化字符串   
        editor: {//日期字段   
            xtype:'datefield',   
            allowBlank:false  
        }   
    },   
    {header: "薪资", width: 50, dataIndex: 'salary',    
        xtype: 'numbercolumn',//Ext.grid.column.Number数字列   
        format:'0,000',//数字格式化字符串   
        editor: {//数字字段   
            xtype:'numberfield',   
            allowBlank:false  
        }   
    }   
]  



Ext.grid.plugin.RowEditing
plugins: [   
    //行编辑模式   
    Ext.create('Ext.grid.plugin.RowEditing', {   
        clicksToEdit: 1   
    })   
],   
selType: 'rowmodel',//设置为单元格选择模式   
columns: [//配置表格列   
    Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),   
    {header: "姓名", width: 50, dataIndex: 'name',   
        editor: {//文本字段   
            xtype:'textfield',   
            allowBlank:false  
        }   
    },   
    {header: "生日", width: 100, dataIndex: 'birthday',    
        xtype : 'datecolumn',//Ext.grid.column.Date日期列   
        format : 'Y年m月d日',//日期格式化字符串   
        editor: {//日期字段   
            xtype:'datefield',   
            allowBlank:false  
        }   
    },   
    {header: "薪资", width: 50, dataIndex: 'salary',    
        xtype: 'numbercolumn',//Ext.grid.column.Number数字列   
        format:'0,000',//数字格式化字符串   
        editor: {//数字字段   
            xtype:'numberfield',   
            allowBlank:false  
        }   
    }   
]  



Ext.grid.plugin.DragDrop
viewConfig: {   
    plugins: [   
        //行编辑模式   
        Ext.create('Ext.grid.plugin.DragDrop',{   
            dragGroup: 'grid1',//拖拽组名称   
            dropGroup: 'grid2'//拖放组名称   
        })   
    ]   
}  



Ext.grid.property.Grid
//创建属性表格   
var grid = new Ext.grid.property.Grid({   
    title: 'Ext.grid.property.Grid示例',   
    width: 300,   
    height: 200,   
    renderTo: Ext.getBody(),   
    //自定义属性编辑器   
    customEditors : {   
        "性别" : new Ext.form.ComboBox({   
            editable : false,   
            displayField:'sex',   
            mode: 'local',   
            triggerAction: 'all',   
            store:new Ext.data.SimpleStore({   
                fields: ['sex'],   
                data : [['男'],['女']]   
            })   
        }),   
        "出生日期": new Ext.form.DateField({   
            format : 'Y年m月d日',   
            selectOnFocus:true,   
            allowBlank : false  
        })   
    },   
    //自定义渲染函数   
    customRenderers: {   
        //格式化布尔值显示   
        "是否已婚": function(v){   
            return v?'是':'否';   
        },   
        //格式化日期显示   
        "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')   
    },   
    source: {   
        "员工名称" : "张三",   
        "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),   
        "性别" : '男',   
        "是否已婚" : false,   
        "年龄" : 29   
    }   
});