码迷,mamicode.com
首页 > 其他好文 > 详细

Ext选项卡tabpanel切换动态加载数据

时间:2018-10-15 14:43:34      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:data   hand   proxy   default   mat   too   action   gridpanel   记录   

鸣人不说暗话,来张图:
技术分享图片


代码开始:(使用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: ‘
<div id="tabxskpanel"></div> ‘ }); 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: ‘<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=‘ + "ManageIconPage.aspx" + ‘></iframe>‘ }, { id: ‘tab3‘, title: ‘C‘, // layout: ‘form‘, html: ‘<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=‘ + "tabxsk.aspx" + ‘></iframe>‘ } ], }); //默认打开第一个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 ‘<input type="checkbox" name="checkbtn_tabxsk" value="" style="width:13px;height:13px" id=‘ + record.data.id + ‘> ‘ + ‘ <a href="javascript:void(0);" title="查看信息" class="lzhe" onclick="test.showContent(‘ + rowIndex + ‘)" >‘ + value + ‘</a>‘; }; //列表按钮样式 test.listAction = function (value, cellmeta, record, rowIndex, columnIndex, store) { return ‘<a href="javascript:void(0);" title="点击查看" class="lblue" onclick="test.showTuYa(‘ + rowIndex + ‘);">查看</a>&nbsp‘ + ‘<a href="javascript:void(0);" title="保存" class="lblue" onclick="test.saveTuYa(‘ + rowIndex + ‘);">保存</a>&nbsp‘ + ‘<a href="javascript:void(0);" class="lblue" title="点击编辑信息" style="cursor:pointer " onclick="test.editBuilding( ‘ + rowIndex + ‘);">编辑</a>‘; }; test.marklistCss1 = function (value, cellmeta, record, rowIndex, columnIndex, store) { return ‘<input type="checkbox" name="checkbtn1" value="" style="width:13px;height:13px" id=‘ + record.data.id + ‘> <a href="javascript:void(0);" title="‘ + value + ‘" class="lzhe" >‘ + value + ‘</a>‘; };


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

 

Ext选项卡tabpanel切换动态加载数据

标签:data   hand   proxy   default   mat   too   action   gridpanel   记录   

原文地址:https://www.cnblogs.com/maoye520/p/9790151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!