ext 实用控件

复选框

var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'编号',dataIndex:"id"},
    ....
  
]);
var grid=new Ext.grid.GridPanel({

     renderTo:'grid',
     store:store,
     cm:cm
     sm:sm

});
虽然CheckboxSelection允许我们使用复选框选择grid多行,但如果在操作中不小心选中一行,就会变成选中一行的情况,,解决方法为:重新设定该行选择事件的处理函数:
var sm=new Ext.grid.CheckboxSelectModel({handleMouseDown: Ext.emptyFn});

表格分页
var grid=new Ext.grid.GridPanel({
  renderTo:
  autoHeight:true,
  store:store
  cm:cm
  bbar: new Ext.PagingToolbar({
        pageSize:10,
        store:store,
        displayInfo:true,
        displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
        emptyMsg:'没有记录'

})

});
store.load();
如果配置了分页工具条,store.load()就必须在Grid以后执行,否则分页工具条不起效果
通过后台获得分页数据
String json="{totalProperty:100,root:{}";
for(int i=0;i<pageSize+index;i++){
json+="{id:}"+i+",name:'name'"+i+"',descn:'descn"+i+"'}";
if(i!=pageSize+index-1){
     json+=",";
}
}
json+="]}";
response.getWriter().write(json);

proxy: new Ext.data.HttpProxy({url:'xxxx.jsp'}),
read:  new Ext.data.JsonReader({
     totalProperty:'totalProperty',
     root:root
},[
    {name:'id'}
    {name:'name'}
    {name:'descn'}
]
   

)

store.load({params:{start:0,limit:10}});
不过按照一般设置,,grid无法显示,因为store.load()无法再grid.render()前准备好所有数组,所以它不知道该显示多高,所以我们需要为grid指定一个固定高度,如<div id="grid" style="height:256pz;"></div>或者为它添加一个autoHeight:true参数,让它自己计算高度

bbar (bottom bar)
tbar (top bar)
将bbar改为tbar即可将分页工具条放在表单上面


排序功能就是将以前的MemoryProxy换成PagingMemoryProxy
var store=new Ext.data.store({
  proxy:new Ext.data.PagingMemoryProxy(data);
  reader: new Ext.data.ArrayReader({
    {name:'id'},
    {name:'name'},
    {name:'descn'}
})
});

ds.load(params:{start:0,limit:3});


你可能感兴趣的:(json,ext)