求大大给个完整点代码,谢谢!
刚接触Extjs,但是还不会在jsp中写Extjs代码,已经把Extjs封到jsp中,
<g:head useFlash="false" useExt="true"/>
只要写Extjs代码实现border布局,分成左右两个容器就ok了。
多给点注释,谢谢啦!布局jspextjs
刚接触Extjs,但是还不会在jsp中写Extjs代码,已经把Extjs封到jsp中,
<g:head useFlash="false" useExt="true"/>
只要写Extjs代码实现border布局,分成左右两个容器就ok了。
多给点注释,谢谢啦!布局jspextjs
我用的div来套,给定ID,js里面定义好ext的控件,然后放入div中
grid_user = new Ext.grid.GridPanel({
stripeRows: true, // 斑马线效果
width:'100%',
region:'center',
loadMask: true,
enableColumnMove:false,
store: ds,
loadMask: true,
viewConfig:{
forceFit:true
},
columns:[
new Ext.grid.RowNumberer({
width: 40,sortable: true
}),
{
header: "警号",
dataIndex: 'USERID',
sortable: true
},{
header: "姓名",
dataIndex: 'USERNAME',
sortable: true
},{
header: "部门编号",
dataIndex: 'UNITID',
align: 'left',
sortable: true
},{
header: "部门名称",
dataIndex: 'UNITNAME',
width: 200,
align: 'left',
sortable: true
},{
id: 'last',
header: "操作",
dataIndex: 'STATUS',
width:100,
renderer: function (value, meta, record) {
//在这里定义了3个操作,分别赋予不同的css class以便区分
var formatStr
if(value == '1'){
formatStr = "<a href='javascript:void({0});' onclick='javascript:return false;' class='alarm_update' style='color:blue'>修改</a> | " +
"<a href='javascript:void({1});' onclick='javascript:return false;' class='alarm_stop' style='color:red'>停用</a>";
}else{
formatStr = "<a href='javascript:void({0});' onclick='javascript:return false;' class='alarm_update' style='color:blue'>修改</a> | " +
"<a href='javascript:void({1});' onclick='javascript:return false;' class='alarm_open' style='color:red'>启用</a>";
}
var resultStr = String.format(formatStr, record.get('id'), record.get('id'), record.get('id'));
return "<div class='controlBtn'>" + resultStr + "</div>";
}.createDelegate(this),
sortable: true
}],
bbar: PT
});
var PT = new Ext.PagingToolbar({
pageSize: 20,
store: ds,
autoWidth:true,
displayInfo: true,
displayMsg: '显示第{0} 条到 {1} 条记录 一共 {2} 条',
//emptyMsg: "No topics to display",
renderTo: 'pager',
listeners : {
'afterrender' : function(){
//alert(130);
var child_=document.getElementById("pager").firstChild;
var elments = Ext.get(child_);
elments.setStyle("border", '0');
elments.setStyle("background", '#eee');
elments.setStyle("width", '100%');
}
},
items:[
'-', {
pressed: false,
enableToggle:true,
cls: 'details',
text: 'GO',
pressed: true,
toggleHandler: function(btn, pressed){
var one = (tablePageIndex-1)*20;
var two = (tablePageIndex-1)*20+20;
ds.load({"params":{start:one,limit:20}});
}
}]
}); grid_user.render('myGrid');
<g:head useFlash="false" useExt="true"/>
</head>
<script type="text/javascript">
Ext.onReady(function(){
})
</script>
<body>
<div id="myGrid" style="padding: 0px; overflow: hidden;"></div>
<body onload="refresh()">
<s:form name="form1" theme="simple" method="post">
</s:form>