博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

EXtJs_Grid:二基本属性

Posted on 2012-11-15 10:35  linFen  阅读(3896)  评论(0编辑  收藏  举报

. 常用的属性:

 

1.sortable:true,//sortable设为排序

 

2.enableColumnMove:false,//设置是否拖放

 

3.enableColumnResize:false,//设置是否改变列大小

 

4.stripeRows:true, //每列是否是斑马线分开

 

5.loadMask:true,  //加载时有加载的图标

 

6.autoExpandColumn:'要自定义宽度的id' //可以制定列的宽度自动伸展。只能制定一列的id,所以要在前面指定的列先写好id

 

7.viewConfig:{
                      forceFit:true   //每列自动充满Grid
                  }

 

8.sortInfo: {field: "name", direction: "ASC"}//在原来的前提下,加此行:field代表排序列名,direction代表排序方式(ASC是升序,DESC是降序)

 

9.renderer: Ext.util.Format.dateRenderer('Y-m-d')

//这里需要添加的renderer属性的值设置为Ext.util.Format.dateRenderer。这是为我们提供的格式

 

10.type:'date',dateFormat: 'Y-m-dTH:i:s'//type是reader解析时把这一列作为日期类型处理,dateFormat是把得到的字符串转换成相应的日期格式

 

10-2.在写数据的时候要:'1970-01-15T02:58:04',//添加一列时间的数据,格式要和下面设置的dateFormat一样

 

11.new Ext.grid.RowNumberer(), //自动显示行号

 

 

12.<input type="button" id="remove" value="删除第二行" />//新建按钮,id="remove"

 

Ext.get('remove').on('click', function() {//获得id,执行点击事件

             store.remove(store.getAt(1));//store.getAt(a)是找到要找的那行的内容,a从0开始(及第一行就是0),该代码表示删除改行的信息

grid.view.refresh();//清除一行信息,最左边显示的行的id重新编号

    });

 

13.var sm = newExt.grid.CheckboxSelectionModel();//新建复选框的对象,使用的时候直接写  'sm'

 

14.Ext.grid.RowSelectionModel({singleSelect:true})//设置行是否可以按shift多选(true为不可以)

 

15.只选一行执行

grid.on('click', function() {

        var selections = grid.getSelectionModel().getSelections();

        for (var i = 0; i < selections.length; i++) {

            var record = selections[i];

            Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));

        }

    }); //点击一行,就输出该行的信息

 

16.表格视图

var grid = new Ext.grid.GridPanel({

//设置各种监听器可看做控制器

        height: 80,

        width: 450,

        renderTo: 'grid',

        store: new Ext.data.Store({

            autoLoad: true,

            proxy: new Ext.data.MemoryProxy(data),

            reader: new Ext.data.ArrayReader({}, meta)

        }),

        columns: meta

    });//表格定义太小的话,自己默认产生滚动条

 

grid.getView().scrollToTop();//滚动条滚动到最上面

grid.getView().focusCell(0, 0);//焦点定位在第一行的第一列

 

17.自己定义,改变GridView的初始参数

  viewConfig: {

            columnsText: '显示的列',

            scrollOffset: 30,//表示表格右侧为滚动条预留的宽度

            sortAscText: '升序',

            sortDescText: '升序',

            forceFit: true //表格自动延展每列的长度,使内容充满整个表格

        }

 

18.Grid添加分页工具条

  var grid = new Ext.grid.GridPanel({

        renderTo: 'grid',

        autoHeight: true,

        store: store,

        cm: cm,

           bbar: new Ext.PagingToolbar({

            pageSize: 10,    //每页显示信息的条数

            store: store,

            displayInfo: true,    //是否显示数据信息

            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',     //在displayInfo有效的前提上,{0}{1}{2}中的数据会自己替换掉

            emptyMsg: "没有记录"    //没有数据时显示的信息

        })

    });

store.load();

 

19.通过后台获取分页数据

var store = new Ext.data.Store({

        proxy: new Ext.data.HttpProxy({url:'09_02_01.jsp'}), //直接通过Http访问数据

        reader: new Ext.data.JsonReader({  

            totalProperty: 'totalProperty',  //对应JSP代码中返回的totalProperty,就是数据的总数

            root: 'root' //root对应的JSP代码中的返回的root,也就是一个包含返回数据的数组

        }, [

            {name: 'id'},

            {name: 'name'},

            {name: 'descn'}

        ])

    });

以及要改变store.load();为:

 store.load({params:{start:0,limit:10}}); //初始化时通过传参数去获得希望得到的那部分数据,start指示从第几条数据开始显示,limit指从start开始一共几条数据