/* 创建选择模式对象.多选框*/
var cb = new Ext.grid.CheckboxSelectionModel(
{
width:20,//宽度
singleSelect:true//是否是单选,true为单选。默认false。
});
var colM = new Ext.grid.ColumnModel([
cb,
new Ext.grid.RowNumberer({//创建行号
header : 'NO.',
width : 30,
dataIndex : "id"
}), {
header : "名称",
width : 2,//注意如果girdPanel中设置了viewConfig: {forceFit:true},
// 此时分配列宽时时按着各列的width的比例分配的。如果不写width则平均分配。
//例如三列的比例为:2:4:1
//可以直接将width写为2,4,1.这时候会按着2:4:1的比例自动分配列宽
dataIndex : 'name',
sortable : true//可排序
}, {
header : "备注",
width :4,
dataIndex : 'memo',
sortable : true
}, {
header : "日期",
width : 1,
dataIndex : 'time'
}
]);
/*gird的数据装载器*/
var store = new Ext.data.JsonStore({
url : 'myUrl',//action路径
root : 'items',//要求返回数据json格式为:{results:3,items:[{},{},{}]}
totalProperty : "results",
fields : ['id','name','memo','time']
});
/*分页工具栏*/
var pageBar = new Ext.PagingToolbar({
store : store,
pageSize : pageSize,
displayInfo : true,
displayMsg : '第 {0} 条到 {1} 条, 一共 {2} 条',
emptyMsg : "没有记录",
beforePageText : '页码',
afterPageText : '总页数 {0}',
firstText : '首页',
prevText : '上一页',
nextText : '下一页',
lastText : '末页',
refreshText : '刷新'
});
var grid = new Ext.grid.GridPanel({
id : 'grid',//唯一标示
frame : true,//背景颜色
store : store,//数据装载器
region : "center",//如果父容器用borer布局时,该grid位于中心。
enableHdMenu : false,//设置表头不可用
labelAlign : 'left',//文字居左
viewConfig: {forceFit:true}, //自动分配列宽
loadMask : true,//显示加载提示
cm : colM,//列模型
sm:cb,//多选框
bbar : pageBar//分页工具栏
});
Ext.grid.GridPanel按比例自动分配列宽
最新推荐文章于 2018-06-28 14:31:41 发布