问题:使用Grid时,如果出现列标题与复选框错位

使用定义样式

.ext-ie7 .x-menu-item-icon,

.ext-ie6 .x-menu-item-icon {left: -24px;}

.ext-ie8 .x-menu-item-icon,

.ext-ie7 .x-menu-item-icon,

.ext-ie6 .x-menu-item-icon {left: -24px;}

解决

 

 

使用grid的遮罩提示时,一定要设表格的height和width。

enableColumnMove和enableColumnResize为false表示禁用拖放列和改变列宽度功能。
默认情况下一次可以选一行或多行。

 

stripeRows:true显示为斑马线。

 

问题:自主决定每列的宽度

1.手动指定

cm(columnmudule)支持给每列设置宽度,如果不指定则默认的宽度为100px.

var cm=new Ext.grid.columnModel({

{header:'列头',dataIndex:'数据源索',width:宽度},....});

 

2.自动填充

var gird=new Ext.grid.GridPanel({

renderTo:'grid',

store:store,

cm:cm,

viewConfig:{forceFit:true}});

会按照设置的宽度之间的比例进行显示,而不是按照设置的宽度。

 

3.指定自动填充剩余空间的列

也可以指定一列来完成该操作,但该操作要求该列必须定义时指定id值。

var cm=new Ext.grid.columnModel({

{header:'列头',dataIndex:'数据源索',width:宽度,id:'id标识属性'},....});

接下来设定

Ext.grid.GridPanel({

renderTo:'grid',

store:store,

cm:cm,

autoExpandColumn:'id列标识'});

问题:让列支持排序在建立列模型时指定storable:true

 

问题:中文排序

1.为Ext.data.Store设置一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性。

2.重写Ext.data.Store的applySort函数

Ext.data.Store.prototype.applySort = function() {

    if (this.sortInfo && !this.remoteSort) {

        var s = this.sortInfo, f = s.field;

        var st = this.fields.get(f).sortType;

        var fn = function(r1, r2) {

            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);

            if (typeof(v1) == "string") {

                return v1.localeCompare(v2);

            }

            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

        };

        this.data.sort(s.direction, fn);

        if(this.snapshot && this.snapshot != this.data) {

            this.snapshot.sort(s.direction, fn);

        }

    }

};

该函数可以加在ext-all.js文件的未尾。或者放在html页面的最上面,保证在EXT初始化之后,实际代码调用之前执行。

 

问题:显示日期类型数据列

1.在store的reader属性中增加type和dataFormat两个属性

{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}

注意格式化字符串必须要与实际日期的内容相对应。

如日期为2009-5-2 12:30:58 则格式化字符串为'Y-j-n H:i:s'

如日期为2009-05-02 12:30:58 则格式化字符串为'Y-m-d H:i:s'

详细字符串的含义见ext api doc之Date类

以保证能够读取到正确的日期值。

 

2.在ColumnModel中新加配置

{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}

其中renderer的格式字符串表示显示的格式是什么。

 

问题:如何在单元格时显示红色的字或图片,按钮等

在ColumnModule的相应列的属性中添加renderer:渲染函数

如:

var cm=new Ext.grid.ColumnModel([

{head:'列头',dataIndex:'数据源索',renderer:渲染函数}]);

渲染函数:

function 函数名(value){

 if(value==值){

  return html+css代码;

 }

 else

 {

  return 其它的html+css;

 }

}

 

问题:如何设置表格的表头右键提示为汉字内容

Ext.grid.GridPanel可以看作控制器,Ext.data.Store可以看作模型,Ext.grid.GridView可以看作视图.在构建Ext.grid.GridPanel实例时添加viewConfig属性

var gid=new Ext.grid.GridPanel(

 {renderTo:'grid',

  store:store,

  cm:cm,

  viewConfig:{

  columnsText:'显示的列',

  scrollOffset:30,

  sortAscText:'升序',

  sortDescText:'降序'

  //forceFit:true

 }

 });

 

 问题:用grid实现分页显示

1.为Grid添加分页工具条

在GridPanel中进行设置

                                var grid = new Ext.grid.GridPanel({

                                    renderTo: 'grid',

                                    autoHeight: true,

                                    store: store,

                                    cm: cm,

                                    bbar: new Ext.PagingToolbar({

                                        pageSize:3,

                                        store: store,

                                        displayInfo: true,

                                        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',

                                        emptyMsg: "没有记录"

                                    })

                                });

                                store.load();

在使用分页工具条之后,store.load()必须发生在构造GridPanel之后.而且数据源不能使用Ext.data.SimpleStore.Grid每次都会显示数据源中所有的数据.因此数据一定要先在后台分好.

 

 

如果要在Grid的头部显示分页工具条,可以将bbar改为tbar。

 

2.后台分页

后台jsp的做法:

 

①取得开始页号与页大小

String start = request.getParameter("start");

String limit = request.getParameter("limit");

 

②访问数据库取得数据

 

③将数据输出为json字符串

格式为:{totalProperty:总记录数,root:[{.....},{.....},....]),其中root数组存放当前页的数据.

 

前台页面的做法:

①修改Store

 var store = new Ext.data.Store({

        proxy: new Ext.data.HttpProxy({url:jsp的url'}),

        reader: new Ext.data.JsonReader({

            totalProperty: 'totalProperty',

            root: 'root'

        }, [

            {name: 'id'},

            {name: 'name'},

            {name: 'descn'}

        ])

    }); 

②向服务器传参

store.load({params:{start:0,limit:10}});

 Grid每次都会显示全部在root中的数据,而不论totalProperty的值是多少,所以分页时root数组中的数据由后台jsp控制。

 

 

3.前台分页

EXT中的Grid是把得到的数据一次性显示在表格里,并没有直接为我们提供内存分页的功能,但是在Ext的examples/locale/PapingMemoryProxy.js,它可以从本地数据读取数据同,并实现内存分页。

步骤如下:

①将PagingMemoryProxy.js导入html

②把以前的MemroryProxy换成PagingMemoryProxy

③调用store.load({params:{start:0,limit:3}});显示最开始的3条记录。

 

 4.后台排序

在默认的情况下,Grid只能对当前页的数据进行排序,如果对所有的数据排序,则需要将排序信息提交到后台,由后台将信息组装到SQL里,然后再由后台将处理好的数据返回给前台。

    var store = new Ext.data.Store({

        proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),

        reader: new Ext.data.JsonReader({

            totalProperty: 'totalProperty',

            root: 'root'

        }, [

            {name: 'id'},

            {name: 'name'},

            {name: 'descn'}

        ]),

        remoteSort: true

    });

其中remoteSort: true表示允许后台排序,这样在排序时就会有变化,不会立即显示出排序的结果,而是向后台提交两个参数,分别是sort和dir,表示要排序的字段与升序或降序。

jsp则进行相应的处理

String start = request.getParameter("start");

String limit = request.getParameter("limit");

String sort = request.getParameter("sort");

String dir = request.getParameter("dir");

再进行数据库分页,并返回json格式的分页数据。