Ext.grid.GridPanel按比例自动分配列宽

	/* 创建选择模式对象.多选框*/
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//分页工具栏
});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值