EditorGridPanel的网格样式以及编辑属性设置

1.添加(设置)单元格样式

    function SetMyColumns(value, cell, record, rowIndex, columnIndex, store) {

                if((columnIndex==9||columnIndex==10)&&gridArray.getStore().getAt(rowIndex).data.ITEMNAME !='总计:')

                {

                    cell.css = 'x-grid-back-Myellow';//类样式

                    return value;                   

                }

                else {

                    return value;

                }

            }   

2.定义列时渲染grid列

            var col = new Ext.grid.ColumnModel([sm,

                { header: '品号', dataIndex: 'ITEMNO', sortable: false, width: 80,renderer:SetMyColumns},

                { header: '英文品名+中文品名+型号', dataIndex: 'ITEMNAME', sortable: false, width: 180,renderer:SetMyColumns},

                { header: '数量', dataIndex: 'QTY', sortable: false, width: 50,renderer:SetMyColumns},

                { header: '币种', dataIndex: 'CURRENCY', sortable: false, width: 50,renderer:SetMyColumns},

                { header: '原币种单价', dataIndex: 'UNITPRICE', sortable: false, width: 80,renderer:SetMyColumns},

                { header: '原币种金额', dataIndex: 'TOTALAMOUNT', sortable: false, width: 80,renderer:SetMyColumns},

                { header: '汇率', dataIndex: 'EXCHANGERATE', sortable: false, width: 50,renderer:SetMyColumns},

                { header: '金额', dataIndex: 'MONEY', sortable: false, width: 80,renderer:SetMyColumns},

                { header: '完税金额', dataIndex: 'RATEMONEY', sortable: false, width: 80,editor: new Ext.grid.GridEditor(new Ext.form.NumberField({})),renderer:SetMyColumns},

                { header: '关税率', dataIndex: 'GUANRATE', sortable: false, width: 50,editor: new Ext.grid.GridEditor(new Ext.form.NumberField({})),renderer:SetMyColumns},

                { header: '关税额', dataIndex: 'GUANMONEY', sortable: false, width: 80,renderer:SetMyColumns},

                { header: 'VAT完税金额', dataIndex: 'VATRATEMONEY', sortable: false, width: 80,renderer:SetMyColumns},

                { header: '增值税率', dataIndex: 'VAT', sortable: false, width: 50,renderer:function(value){

                   return value*100;

                }},

                { header: '增值税金额', dataIndex: 'VATMONEY', sortable: false, width: 80,renderer:SetMyColumns}

            ]); 

3.设置列的编辑属性(在渲染grid列时"完税金额","关税率"是可以编辑的以至于这两列都可以编辑现在目的是这两列的最后一行不可编辑代码如下)


            col.isCellEditable = function(colIndex, rowIndex) {

                if ( gridArray.getStore().getAt(rowIndex).data.ITEMNAME =='总计:') {

                    return false;

                }

                else {

                    return true;

                }

            }; 

4.定义EditorGridPanel

            var gridArray = new Ext.grid.EditorGridPanel({

                title:'',

                height: 350,

                id:'gridArray',

                name:'gridArray',

                sm:sm,

                colModel: col,

                clicksToEdit: 1,

                store: store,

                autoScroll: true,

                viewConfig: {

                    forceFit: true,

                    columnsText: '显示的列',

                    scrollOffset: 20,

                    sortAscText: '升序',

                    sortDescText: '降序'

                }

            });

你可能感兴趣的:(gridPanel)