想在jsp顶用Extjs写个布局，就是分成左右两个容器

2013-10-11

想在jsp中用Extjs写个布局，就是分成左右两个容器求大大给个完整点代码，谢谢！刚接触Extjs，但是还不会在jsp

想在jsp中用Extjs写个布局，就是分成左右两个容器
求大大给个完整点代码，谢谢！
刚接触Extjs，但是还不会在jsp中写Extjs代码，已经把Extjs封到jsp中，

<g:head useFlash="false" useExt="true"/>

只要写Extjs代码实现border布局，分成左右两个容器就ok了。
多给点注释，谢谢啦！布局 jsp extjs
[解决办法]
jsp

<div id="myGrid" style="padding: 0px; overflow: hidden;"></div>

我用的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');

热点排行

JavaScript

想在jsp顶用Extjs写个布局，就是分成左右两个容器