鸣人不说暗话，来张图： 代码开始：（使用Ext，ajax加载数据，如果你们有好的方法也可以多多交流）

var tabxsk = new Object();//初始化tabxsk.init = function () {    test.pageSize = Math.floor((d_right_height() - 106 - 27) / 23);    tabxsk.markpageSize = Math.floor((d_right_height() - 106 - 27) / 23);    tabxsk.mappageSize = tabxsk.pageSize;    // tabxsk.createstore();    /* tabxsk.panel = new Ext.Panel({         id: 'tabxskpane4',         renderTo: 'panel16',         width: 369,         height: d_right_height(),         html: '
      
 '     });     tabxsk.BuildingPanel('tabxskpanel');*/    // test.ScreenList();    tabxsk.createTab();    test.store.load({ params: { start: 0, limit: test.pageSize } });};tabxsk.createTab = function (check) {        var tab = new Ext.TabPanel({        id: 'mainTab',        renderTo: 'panel16',        width: 369,        height: d_right_height(),        enableTabScroll: true,        //页签名称        items: [{            id: 'tab1',            title: 'A',//标题            items: [test.createuser()]        }, {            id: 'tab2',            title: 'B',            html: ''        },        {            id: 'tab3',            title: 'C',            // layout: 'form',            html: ''        }        ],    });    //默认打开第一个tab    tab.items.get(0).show();    //获取items的id    var i = tab.items.items;    for (var j = 0; j < i.length; j++) {        //var k = i[j].id;        //alert(i);        //alert(i[j].id);    }    //alert(tab.getActiveTab().tabConfig.id);    //this.tab.activate(0);    return this.tab;};//tab选项卡内容var test = new Object();//type = null;test.createuser = function () {    test.store = new Ext.data.JsonStore({        totalProperty: 'totalCount',        root: 'result',        proxy: new Ext.data.HttpProxy({ url: "handler/tab.ashx?funcName=GetList" }),        fields: [              { name: 'id' },            { name: 'name' },            { name: 'type' },            { name: 'opt' },            { name: 'the_geom' }        ],        remoteSort: true    });    test.store.setDefaultSort('name', 'ASC');    var tbar = ['关键字搜索：　', {        xtype: 'textfield',        id: 'tabxsk_keyword',        width: 180    }, '-', {        text: '查询',        xtype: "button",        handler: test.gridSearch    }, ];       });      var listeners = {        'render': function () {                      //tbar1.render(this.tbar);            tbar2.render(this.tbar);            tbar3.render(this.tbar);        }    };    var colM = new Ext.grid.ColumnModel([        new Ext.grid.RowNumberer(),          //{ header: " 名称 ", dataIndex: "name", width: 150, align: 'left', sortable: true, renderer: test.listicon },         { header: " 名称 ", dataIndex: "name", width: 150, align: 'left', sortable: true, renderer: test.listCss1 },        { header: " 操作 ", dataIndex: "id", width: 170, align: 'center', sortable: false, renderer: test.listAction }         ]);//grid填充数据    test.grid = new Ext.grid.GridPanel({        id: 'testGrid',        //renderTo: 'yhgl_user',        height: d_right_height() - 30,        //autoHeight: true,        autoScroll: true,        width: 368,        cm: colM,        viewConfig: {            forceFit: true   //每列自动充满Grid        },        emptyText: '暂无数据!',        store: test.store,        stripeRows: true,        loadMask: true,        tbar: tbar,        listeners: listeners,        bbar: new Ext.PagingToolbar({            pageSize: test.pageSize,            store: test.store,            displayInfo: true,            displayMsg: '共{2}条',            emptyMsg: '暂无记录'        })    });    return test.grid;};//获取数据列表test.getList = function (args) {    var keyword = $('test_keyword').get('value');    if (args == null) args = new Object();    if (args.all) {        test.store.baseParams = null;    } else {        test.store.baseParams = {            wkt: args.wkt ? args.wkt : null,            keyword: keyword ? escape(keyword) : null,            center: args.center ? args.center : null,            border: args.border ? args.border : null,            distance: args.distance ? args.distance : 0        };    }    test.store.proxy = new Ext.data.HttpProxy({ url: "handler/tab.ashx?funcName=GetList" });    /*test.store.load({        params: { start: 0, limit: test.pageSize }    });*/};//列表数据test.listCss1 = function (value, cellmeta, record, rowIndex, columnIndex, store) {    return ' '    + ' ' + value + '';};//列表按钮样式test.listAction = function (value, cellmeta, record, rowIndex, columnIndex, store) {    return '查看 ' +    '保存 '        + '编辑';};test.marklistCss1 = function (value, cellmeta, record, rowIndex, columnIndex, store) {    return ' ' + value + '';};

 

//每个人的代码方式都不一样，希望对您有用！