请求EXTJS根据get返回的json数据动态生成tabspanel的demo

网上有生成树的，没有tabs的，搞了好久没搞定，最好是EXTJS 2的。
不胜感激！

解决方案 »

  1.   

    给你一个多功能的。我懒得改了。你看下吧。extjs3.0的
    Ext.onReady(function(){

    var ds=new Ext.data.Store({
    proxy:new Ext.data.HttpProxy(
    {url:location.href.substr(0,location.href.lastIndexOf("/"))+'/testServlet?qq=ttt2'}),
    reader: new Ext.data.JsonReader({
    totalProperty:'totalCount',
    root:'result'
    },[
    {name:'OrderID',mapping:'OrderID'},
    {name:'CustomerID',mapping:'CustomerID'},
    {name:'OrderDate',mapping:'OrderDate',type:'date',dateFormat:'Y-m-d'},
    {name:'Freight',mapping:'Freight'},
    {name:'ShipRegion',mapping:'ShipRegion'}
    ]),
    remoteSort:true
    }); var colModel=new Ext.grid.ColumnModel([
    {id:'OrderID',header:'OrderID',sortable:true,dataIndex:'OrderID'},
    {header:'CustomerID',sortable:true,dataIndex:'CustomerID'},
    {header:'OrderDate',sortable:true,renderer:Ext.util.Format.dateRenderer('Y-m-d'),dataIndex:'OrderDate'},
    {header:'Freight',sortable:true,dataIndex:'Freight'},
    {header:'ShipRegion',sortable:true,dataIndex:'ShipRegion'}
    ]);

    var grid=new Ext.grid.GridPanel({
    el:'MyPageGrid',
    store:ds,
    cm:colModel,
    autoExpandColumn:'OrderID',
    renderTo:document.body,
    height:350,
    width:600,
    title:'Array Grid',
    viewConfig:{
    forceFit:true,//当行大小变化时始终填充满  
                enableRowBody:true,//可以用两行tr来表示一行数据  
                showPreview:true,//初始显示预览效果,这个是自定义的属性  
                getRowClass : function(record,rowIndex,store)
                {
                 if(record.data.OrderID=='a5'){
                 // return '<div class="x-grid3-row-expanded">'+rowIndex+'</div>'+'<div>'+val+'</div>'
                 return 'x-grid-record-red'; 
                 }
                 if(record.data.OrderID=='a2'){
                 return 'x-grid-record-red';
                 }
                 else{
                 return 'x-grid-record-common'; 
                 }
                }

    },
    loadMask:{msg:'正在加载数据,请稍候...'},
    bbar:new Ext.PagingToolbar({
    pageSize:2,//一页中显示多少条记录，指出每页显示的记录数 store:ds,
    displayInfo:true,
    displayMsg:'当前显示{0}-{1}条记录/共有{2}记录',
    emptyMsg:'无显示数据'
    }),
    tbar:[
    {xtype:'tbfill' },
    {
    iconCls: 'icon-file-excel',
            text: '&nbsp;导出表&nbsp;',
            handler:function(){
             var head=new Array();
             head=[];
             for(var i=1;i<colModel.getColumnCount(true);i++){
             var header=colModel.getColumnHeader(i);
             head=head.concat(header);
             }
             // var address1 = "D:/per_loan_detailwrite" + name + ".txt"; 
              var address1 = "D:/per_loan_detailwrite"  + ".txt"; 
            
              if(head.length == 0 || address1 == ""){   
                      Ext.Msg.alert('数据传送出错','请先查找数据');   
                      return false;   
                  } 
                 else{
                  //var appWindow = window.open("DeposRelaExcel&address1=" + address1 + "&head=" + head + "&page=1" );    
                  var appWindow = window.open("DeposRelaExcel");        
                  appWindow.focus();
                 }
            
            
            }
    }
    ]
    });

    grid.render();
    ds.load({params:{start:0,limit:2,good:'very good312',aa:'92'}});
    //start:每页从第几条数据开始查询
    //limit:表示每页之间的数据分割条数，例如第一页3条,limit:2，那么第二页就是5页
    //limit:表示每页显示的记录数，也就是说，如果显示记录后，用户点击了下一页时，将自动向服务器提交参数：start:5,limit:5,再点击下一页时，则向服务器提交参数：start:10,limit:5。服务器端就可以根据这些参数来向客户端返回相应的记录了。
    Ext.get('btn').on('click',function(){
      grid.getView().getRow(0).style.background='red';

    });
    });
      

  2.   

    这是前台paging.jsp
    <%@ page language="java" contentType="text/html; charset=gb2312"
        pageEncoding="gb2312"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="js/paging.js"></script>
    <style type="text/css">
    .x-grid-record-red{
    background: red;
    }
    </style>
    </head>
    <body>
    123312
    <div id="MyPageGrid">123</div>
    <input type="button"  value="btn" id="btn"/>
    </body>
    </html>