ext grid ColumnModel 外部css

sling2007 2010-01-21 09:19:52

这个页面包含了一个ext.grid，有3行记录，中间列都有一个checkbox
我的问题是：当只有checkbox的时候，行的高度较小，记为X，
而有字符和checkbox的时候行的高度较大，记为Y，
那么在这里怎么定义外部的css来控制checkbox的属性，或者别的属性，
使得3行的行高都是X？？？？？？？？？？？？？？？？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css" />
</head>
<style>
#qq{
height:200px;
width:100px;
border:1px solid red
}
.tt{
color:red
}
</style>
<script>
Ext.onReady(function(){

var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{id:'tt',header:'名称',dataIndex:'name',renderer:renderSex,css:'tt'},
{header:'描述',dataIndex:'descn'}
]);

function renderSex(value) {
if (value == 'name2') {
return "<input type='checkbox' />";
} else {
return "ss <input type='checkbox' style='margin:0px;padding:0 px' />";
}
}

//定义表格数据
var data = [
['1','name s ','descn1'],
['2','name2','descn2'],
['3','name3','descn3']
];
//定主数据存储装配器
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),//来自内存
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},//数据列与表头通过mapping相关联
{name: 'name'},
{name: 'descn'}
])
});
ds.load();//按设定装配数据
//定义表格
var grid = new Ext.grid.GridPanel({
renderTo:"grid",
store:ds,
colModel:cm,
width:500,
height:300
});

});
</script>
<body>
<div id="grid">
</div>
<div id="qq" class=tt>tttttttttt<input type=checkbox /></div>
</body>
</html>

...全文

445 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

sling2007 2010-01-21

打赏
举报

上面写错了单词应该是.x-grid3-col-checkbox

sling2007 2010-01-21

打赏
举报

这只可以定义被ext解释后的html框架的内部的属性，可以解决一些问题

通过查找api找到的正确做法是
把“{id:'tt',header:'名称',dataIndex:'name',renderer:renderSex,css:'tt'}, ”
改为{id:'tt',header:'名称',dataIndex:'name',renderer:renderSex},
然后再css中定义x-grid3-tt，比如
.x-grid3-tt{
color:blue;
height:200px
}