1)解决之道:

1.修改tabPanel

  1. var tabs= new Ext.TabPanel({
  2. border: false,
  3. region:'center',
  4. id:'center',
  5. activeTab:0,
  6. items: [{

2.将tabPanel的每个子项设置为border布局,然后每个grid设置region为center

  1. var tabs= new Ext.TabPanel({
  2. border: false,
  3. region:'center',
  4. id:'center',
  5. activeTab:0,
  6. items: [{
  7. title: 'First tab',
  8. //layout: 'fit',
  9. layout:'border',
  10. items: [grid]
  11. },{
  12. title: 'Second tab'
  13. }]
  14. });

2)效果:

3)代码:

1.js

  1. Ext.require('Ext.tab.*');
  2. var tabs;
  3. var tab1store;
  4. var tab2mainStore;
  5. var tab3mainStore;
  6.  
  7. Ext.onReady(function () {
  8. //tabl1
  9. Ext.tip.QuickTipManager.init();
  10. Ext.QuickTips.init();
  11. Ext.define('tab1Model', {
  12. extend: 'Ext.data.Model',
  13. fields: [
  14. //'title', 'forumtitle', 'forumid', 'username',
  15. //{ name: 'replycount', type: 'int' },
  16. //{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
  17. //'lastposter', 'excerpt', 'threadid'
  18. 'ObjectID', 'Content', 'type', 'creator', 'createtime'
  19. ],
  20. idProperty: 'ObjectID'
  21. });
  22.  
  23. // create the Data Store
  24. tab1store = Ext.create('Ext.data.Store', {
  25. pageSize: 2,
  26. model: 'tab1Model',
  27. remoteSort: true,
  28. proxy: {
  29. // load using script tags for cross domain, if the data in on the same domain as
  30. // this page, an HttpProxy would be better
  31. type: 'ajax',
  32. extraParams: { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val(), State: "Tempsave" },
  33. //type: 'json',
  34. url: '../../Ashx/GetCachetApplyWorkHighSpeed.ashx',
  35. reader: {
  36. //type: 'json' //返回数据类型为json格式
  37. root: 'data',
  38. totalProperty: 'totalCount'
  39. },
  40. // sends single sort as multi parameter
  41. simpleSortMode: true
  42. }
  43. //,
  44. //sorters: [{
  45. // property: 'lastpost',
  46. // direction: 'DESC'
  47. //}]
  48. });
  49.  
  50. var pluginExpanded = true;
  51. var grid = Ext.create('Ext.grid.Panel', {
  52. //width: "100%",
  53. //height: 470,
  54. //autoHeight: false,
  55. region: 'center',
  56. title: 'tab1',
  57. header: false,
  58. store: tab1store,
  59. disableSelection: true,
  60. loadMask: true,
  61. viewConfig: {
  62. id: 'gv',
  63. trackOver: false,
  64. stripeRows: false,
  65. plugins: [{
  66. ptype: 'preview',
  67. bodyField: 'excerpt',
  68. expanded: true,
  69. pluginId: 'preview'
  70. }]
  71. },
  72. // grid columns
  73. columns: [{
  74. id: 'ObjectID',
  75. text: "用章事由",
  76. dataIndex: 'Content',
  77. flex: 1,
  78. renderer: function (value, metaData, record, rowIndex, colIndex, store) {
  79. return '<a href="cachetapply.html?CachetApplyID=' + record.data.ObjectID + '">' + value + '</a>';
  80. },
  81. sortable: false
  82. }, {
  83. text: "类型",
  84. dataIndex: 'type',
  85. width: 100,
  86. hidden: true,
  87. sortable: true
  88. }, {
  89. text: "时间",
  90. dataIndex: 'createtime',
  91. width: 250,
  92. align: 'right',
  93. sortable: true
  94. }, {
  95. text: "删除",
  96. xtype: 'actioncolumn',
  97. width: 100,
  98. sortable: false,
  99. menuDisabled: true,
  100. items: [{
  101. icon: '../../App_Themes/Glass/Images/Icon/delete.GIF',
  102. tooltip: '删除',
  103. scope: this,
  104. handler: function (grid, rowIndex) {
  105. var objectid = tab1store.getAt(rowIndex).data.ObjectID;
  106. Ext.MessageBox.confirm('提示', '确定删除吗?', function (btn) {
  107. if (btn == "yes") {
  108. Ext.Ajax.request({
  109. method: 'get',
  110. url: '../../Ashx/DeleteCachetApplyByObjeID.ashx',
  111. params: { ObjectID: objectid },//jsonData: Ext.encode(list),
  112. success: function (response) {
  113. Ext.Msg.alert("提示", "删除成功!");
  114. tab1store.reload();
  115.  
  116. },
  117. failure: function () {
  118. Ext.Msg.alert("错误", "与后台联系的时候出了问题。");
  119. }
  120. })
  121. }
  122. });
  123. //insideGridStore.removeAt(rowIndex);
  124. }
  125. }]
  126. }],
  127. // paging bar on the bottom
  128. bbar: Ext.create('Ext.PagingToolbar', {
  129. store: tab1store,
  130. displayInfo: true,
  131. displayMsg: 'Displaying data {0} - {1} of {2}',
  132. emptyMsg: "No data to display"
  133. })
  134. });
  135.  
  136. // trigger the data store load
  137. tab1store.loadPage(1);
  138.  
  139. //tab1结束
  140.  
  141. //tab2开始
  142.  
  143. Ext.define('tab2Model', {
  144. extend: 'Ext.data.Model',
  145. fields: [
  146. { name: 'ObjectID' },
  147. { name: 'Content' },
  148. { name: 'type' },
  149. { name: 'creator' },
  150. { name: 'createdate' },
  151. { name: 'CategoryID' },
  152. { name: 'actor' },
  153. { name: 'url' },
  154. { name: 'dispatchid' }
  155.  
  156. ]
  157. });
  158.  
  159. tab2mainStore = Ext.create('Ext.data.ArrayStore', {
  160. model: 'tab2Model',
  161. autoLoad: true,
  162. proxy: {
  163. // load using script tags for cross domain, if the data in on the same domain as
  164. // this page, an HttpProxy would be better
  165. type: 'ajax',
  166. extraParams: { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val(), State: "Running" },
  167. //type: 'json',
  168. url: '../../Ashx/GetCachetApplyWorkHighSpeed.ashx',
  169. reader: {
  170. //type: 'json' //返回数据类型为json格式
  171. root: 'data',
  172. totalProperty: 'totalCount'
  173. },
  174. // sends single sort as multi parameter
  175. simpleSortMode: true
  176. }
  177. });
  178.  
  179. function displayInnerGrid(renderId) {
  180. Ext.define('TestModel', {
  181. extend: 'Ext.data.Model',
  182. fields: [
  183. { name: 'OpinionID' },
  184. { name: 'objectid' },
  185. { name: 'ApproveUserID' },
  186. { name: 'ApproveUserName' },
  187. { name: 'ApproveTime' },
  188. { name: 'Content' },
  189. { name: 'ConfirmType' }
  190. ]
  191. });
  192. var insideGridStore = Ext.create('Ext.data.ArrayStore', {
  193. model: 'TestModel',
  194. //data: dummyDataForInsideGrid,
  195. autoLoad: true,
  196. proxy: {
  197. type: 'ajax',
  198. //filterParam: 'sysid',
  199. //simpleSortMode: true,
  200. //// The PHP script just use query=<whatever>
  201. //encodeFilters: function(renderId) {
  202. // return renderId;
  203. //},
  204. //autoSync:true,
  205. extraParams: {
  206. PrimaryId: renderId
  207. },
  208. writer: { type: "json" },
  209. // url: ApiUrl + "ZbbInfo/GetZbbInfoList?sysid=" + renderId,
  210. url: "../../Ashx/GetOpinionHistoryByPrimaryId.ashx",
  211. reader: {
  212. type: 'json'
  213. }
  214. }
  215. });
  216.  
  217. innerGrid = Ext.create('Ext.grid.Panel', {
  218. store: insideGridStore,
  219. selModel: {
  220. selType: 'cellmodel'
  221. },
  222.  
  223. title: '假期值班人员',
  224. header: false,
  225. columns: [
  226. {
  227. text: "审批人", dataIndex: 'ApproveUserName', flex: 1, width: 250
  228. },
  229. {
  230. text: "意见", dataIndex: 'Content', width: 250
  231. },
  232. {
  233. text: "审批时间", dataIndex: 'ApproveTime', width: 250
  234. },
  235. {
  236. text: "流程角色", dataIndex: 'ConfirmType', width: 250
  237. }
  238. ],
  239. columnLines: true,
  240. //autoWidth: true,
  241. //autoHeight: true,
  242. autoHeight: true,
  243. width: "99%",
  244. //height: 500,
  245. frame: false,
  246. iconCls: 'icon-grid',
  247. renderTo: renderId
  248. });
  249. innerGrid.getEl().swallowEvent([
  250. 'mousedown', 'mouseup', 'click',
  251. 'contextmenu', 'mouseover', 'mouseout',
  252. 'dblclick', 'mousemove'
  253. ]);
  254. }
  255.  
  256. function destroyInnerGrid(record) {
  257.  
  258. var parent = document.getElementById(record.get('ObjectID'));
  259. var child = parent.firstChild;
  260.  
  261. while (child) {
  262. child.parentNode.removeChild(child);
  263. child = child.nextSibling;
  264. }
  265.  
  266. }
  267.  
  268. Ext.define('MainGrid', {
  269. extend: 'Ext.grid.Panel',
  270. alias: 'widget.MainGrid',
  271. region: 'center',
  272. store: tab2mainStore,
  273. autoScroll: true,
  274. viewConfig: {
  275. style: { overflow: 'auto', overflowX: 'hidden' }
  276. },
  277. columns: [
  278. {
  279. id: 'ObjectID',
  280. text: "用章事由",
  281. dataIndex: 'Content',
  282. flex: 1,
  283. width: 100,
  284. renderer: function (value, metaData, record, rowIndex, colIndex, store) {
  285.  
  286. //(string.IsNullOrEmpty(Eval("DispatchId").ToString()) && string.IsNullOrEmpty(Eval("url").ToString())) ?
  287.  
  288. //(Eval("CategoryID").ToString() == "2" ? "CachetApplyInfo.aspx?CachetApplyID=" + Eval("ObjectID").ToString() : "../ReviceDoc/RevDocShow.aspx?RevDocID=" + Eval("ObjectID").ToString() + "&type=6") : Request.ApplicationPath + "/" + Eval("url").ToString() + "?DispatchID=" + Eval("DispatchID").ToString() + "&mode=Edit"
  289.  
  290. //(string.IsNullOrEmpty(Eval("DispatchId").ToString()) && string.IsNullOrEmpty(Eval("url").ToString())) ?
  291.  
  292. // CachetApplyInfo.aspx?CachetApplyID=" + Eval("ObjectID").ToString()
  293. //Request.ApplicationPath + "/" + Eval("url").ToString() + "?DispatchID=" + Eval("DispatchID").ToString() + "&mode=Edit"
  294. if (record.data.url || record.data.dispatchid) {
  295. //Request.ApplicationPath + "/" + Eval("url").ToString() + "?DispatchID=" + Eval("DispatchID").ToString() + "&mode=Edit"
  296. return '<a href="../../' + record.data.url + '?DispatchId=' + record.data.dispatchid + '&mode=Edit">' + value + '</a>';
  297. } else {
  298. //CachetApplyInfo.aspx?CachetApplyID=" + Eval("ObjectID").ToString()
  299. return '<a href="../../Cachet/CachetApplyInfo.aspx?CachetApplyID=' + record.data.ObjectID + '">' + value + '</a>';
  300. }
  301.  
  302. },
  303. sortable: false
  304. }, {
  305. text: "类型",
  306. dataIndex: 'type',
  307. width: 100,
  308. //hidden: true,
  309. sortable: true
  310. }, {
  311. text: "时间",
  312. dataIndex: 'createdate',
  313. width: 250,
  314. align: 'right',
  315. sortable: true
  316. }, {
  317. text: "当前审批人",
  318. dataIndex: 'actor',
  319. width: 250,
  320. align: 'right',
  321. sortable: true
  322. }
  323. ],
  324. selModel: {
  325. selType: 'cellmodel'
  326. },
  327. plugins: [{
  328. ptype: 'rowexpander',
  329. rowBodyTpl: [
  330. '<div id="{ObjectID}">',
  331. '</div>'
  332. ]
  333. }],
  334. //width: "99%",
  335. //height: 300,
  336. //autoHeight: true,
  337. //autoHeight: true,
  338. collapsible: true,
  339. animCollapse: false,
  340. title: '假期项目值班安排',
  341. header: false,
  342. iconCls: 'icon-grid',
  343. initComponent: function () {
  344. var me = this;
  345. this.callParent(arguments);
  346. },// paging bar on the bottom
  347. bbar: Ext.create('Ext.PagingToolbar', {
  348. store: tab2mainStore,
  349. displayInfo: true,
  350. displayMsg: 'Displaying data {0} - {1} of {2}',
  351. emptyMsg: "No data to display"
  352. })
  353. });
  354. var mainGrid = new Ext.create('MainGrid');
  355.  
  356. mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
  357. displayInnerGrid(record.get('ObjectID'));
  358. setTimeout(function () {
  359. //heighinit();
  360.  
  361. }, 1000);
  362.  
  363. });
  364.  
  365. mainGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
  366. destroyInnerGrid(record);
  367. setTimeout(function () {
  368. //heighinit();
  369.  
  370. }, 1000);
  371.  
  372. });
  373.  
  374. //mainGrid.render('bb');
  375.  
  376. //tab2结束
  377. //tab3开始
  378.  
  379. tab3mainStore = Ext.create('Ext.data.ArrayStore', {
  380. model: 'tab2Model',
  381. autoLoad: true,
  382. proxy: {
  383. // load using script tags for cross domain, if the data in on the same domain as
  384. // this page, an HttpProxy would be better
  385. type: 'ajax',
  386. extraParams: { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val(), State: "Completed" },
  387. //type: 'json',
  388. url: '../../Ashx/GetCachetApplyWorkHighSpeed.ashx',
  389. reader: {
  390. //type: 'json' //返回数据类型为json格式
  391. root: 'data',
  392. totalProperty: 'totalCount'
  393. },
  394. // sends single sort as multi parameter
  395. simpleSortMode: true
  396. }
  397. });
  398. Ext.define('MainGrid2', {
  399. extend: 'Ext.grid.Panel',
  400. alias: 'widget.MainGrid',
  401. region: 'center',
  402. store: tab3mainStore,
  403. //autoHeight: true,
  404. columns: [
  405. {
  406. id: 'ObjectID',
  407. text: "用章事由",
  408. dataIndex: 'Content',
  409. flex: 1,
  410. width: 100,
  411. renderer: function (value, metaData, record, rowIndex, colIndex, store) {
  412. return '<a href="../../Cachet/CachetApplyInfo.aspx?CachetApplyID=' + record.data.ObjectID + '">' + value + '</a>';
  413. },
  414. sortable: false
  415. }, {
  416. text: "类型",
  417. dataIndex: 'type',
  418. width: 100,
  419. //hidden: true,
  420. sortable: true
  421. }, {
  422. text: "时间",
  423. dataIndex: 'createdate',
  424. width: 250,
  425. align: 'right',
  426. sortable: true
  427. }, {
  428. text: "当前审批人",
  429. dataIndex: 'actor',
  430. width: 250,
  431. align: 'right',
  432. sortable: true
  433. }
  434. ],
  435. selModel: {
  436. selType: 'cellmodel'
  437. },
  438. plugins: [{
  439. ptype: 'rowexpander',
  440. rowBodyTpl: [
  441. '<div id="{ObjectID}">',
  442. '</div>'
  443. ]
  444. }],
  445. //width: "99%",
  446. autoScroll: true,
  447. viewConfig: {
  448. style: { overflow: 'auto', overflowX: 'hidden' }
  449. },
  450. //height: 300,
  451. //autoHeight: true,
  452. collapsible: true,
  453. animCollapse: false,
  454. title: '假期项目值班安排',
  455. header: false,
  456. iconCls: 'icon-grid',
  457. initComponent: function () {
  458. var me = this;
  459. this.callParent(arguments);
  460. },// paging bar on the bottom
  461. bbar: Ext.create('Ext.PagingToolbar', {
  462. store: tab3mainStore,
  463. displayInfo: true,
  464. displayMsg: 'Displaying data {0} - {1} of {2}',
  465. emptyMsg: "No data to display"
  466. })
  467. ,
  468. });
  469. var mainGrid2 = new Ext.create('MainGrid2');
  470.  
  471. mainGrid2.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
  472. displayInnerGrid(record.get('ObjectID'));
  473. setTimeout(function () {
  474. //heighinit();
  475.  
  476. }, 1000);
  477.  
  478. });
  479.  
  480. mainGrid2.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
  481. destroyInnerGrid(record);
  482. setTimeout(function () {
  483. //heighinit();
  484.  
  485. }, 1000);
  486.  
  487. });
  488.  
  489. //mainGrid2.render('cc');
  490. //tab3结束
  491. var height = document.documentElement.clientHeight-70;
  492. //alert(height);
  493. tabs = Ext.widget('tabpanel', {
  494. renderTo: 'tabs1',
  495. width: "100%",
  496. height: height,
  497. activeTab: 0,
  498. autoHeight: false,
  499. //layout : 'border',
  500. border: false,
  501. region: 'center',
  502. defaults: {
  503. bodyPadding: 0
  504. },
  505. items: [{
  506. contentEl: 'aatab',
  507. title: '拟稿',
  508. items: grid,
  509. layout: 'border'
  510. }, {
  511. contentEl: 'bbtab',
  512. title: '正在审批',
  513. items: mainGrid,
  514. layout: 'border'
  515. }, {
  516. contentEl: 'cctab',
  517. title: '完成审批',
  518. items: mainGrid2,
  519. layout: 'border'
  520. }]
  521. });
  522.  
  523. });
  524. function qingkong() {
  525. $("#txtDraftDes").val("");
  526. $("#ddlDraftType").val("-1");
  527. }
  528.  
  529. function displaysearch(which) {
  530. if ($("#search").css("display") == "none") {
  531. $("#search").css("display","block");
  532. $(which).attr("src", "../../MenuCust/TelDemo/bottom.png");
  533. } else {
  534. $("#search").css("display", "none");
  535. $("#txtDraftDes").val("");
  536. $("#ddlDraftType").val("-1");
  537. $(which).attr("src", "../../MenuCust/TelDemo/top.png");
  538. }
  539.  
  540. }
  541. function search() {
  542. if (tabs.getActiveTab().title == "拟稿") {
  543. //tab1store.loadPage(1); txtDraftDes: type: -1
  544.  
  545. tab1store.on('beforeload', function () {
  546. Ext.apply(tab1store.proxy.extraParams, { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val() });
  547. });
  548. tab1store.loadPage(1);
  549. } else if (tabs.getActiveTab().title == "正在审批") {
  550. tab2mainStore.on('beforeload', function () {
  551. Ext.apply(tab2mainStore.proxy.extraParams, { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val() });
  552. });
  553. tab2mainStore.load();
  554. } else if (tabs.getActiveTab().title == "完成审批") {
  555. tab3mainStore.on('beforeload', function () {
  556. Ext.apply(tab3mainStore.proxy.extraParams, { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val() });
  557. });
  558. tab3mainStore.load();
  559. }
  560. //mainStore.on('beforeload', function () {
  561. // Ext.apply(mainStore.proxy.extraParams, { sysName: sysName });
  562. //});
  563. //mainStore.load();
  564. }

2.html:

  1. <!DOCTYPE html>
  2.  
  3. <html lang="zh-CN">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  8. <meta charset="UTF-8" />
  9. <title>节假日值班安排</title>
  10. <script src="../Js/jquery.js"></script>
  11. <script src="../../Ext/ext-all.js"></script>
  12. <link href="../../Ext/resources/css/ext-all.css" rel="stylesheet" />
  13. <script src="../Js/tabs.js"></script>
  14. <script src="../Js/tab1.js"></script>
  15. <script src="../Js/PreviewPlugin.js"></script>
  16. <script src="../Js/tab2.js"></script>
  17.  
  18. <style type="text/css">
  19. .btnHover {
  20. background-image: url(../../App_Themes/Glass/Images/backcolorImage.jpg);
  21. background-repeat: no-repeat;
  22. }
  23.  
  24. .btnOut {
  25. background-image: none;
  26. text-decoration: none;
  27. text-align: center;
  28. padding-top: 2px;
  29. }
  30.  
  31. .LinkbuttonCss {
  32. background: transparent url('../../App_Themes/Glass/Images/WebResource.png') no-repeat scroll top right;
  33. background-repeat: no-repeat;
  34. background-attachment: scroll;
  35. background-position: 100% -98px;
  36. border-collapse: separate;
  37. display: block;
  38. float: left;
  39. padding-bottom: 3px;
  40. padding-top: 1px;
  41. white-space: nowrap;
  42. text-decoration: none;
  43. cursor: pointer;
  44. }
  45.  
  46. .LinkbuttonCss2 {
  47. border-collapse: separate;
  48. display: block;
  49. float: left;
  50. padding-bottom: 3px;
  51. padding-top: 1px;
  52. white-space: nowrap;
  53. text-decoration: none;
  54. cursor: pointer;
  55. }
  56.  
  57. .spanCss {
  58. background: transparent url('../../App_Themes/Glass/Images/WebResource.png') no-repeat scroll top right;
  59. background-repeat: no-repeat;
  60. background-attachment: scroll;
  61. background-position: 0px -75.5px;
  62. border-collapse: separate;
  63. display: block;
  64. float: left;
  65. line-height: 1.3;
  66. padding-bottom: 3px;
  67. padding-left: 15px;
  68. padding-right: 3px;
  69. padding-top: 3px;
  70. white-space: nowrap;
  71. cursor: pointer;
  72. }
  73.  
  74. .spanCss2 {
  75. border-collapse: separate;
  76. display: block;
  77. float: left;
  78. line-height: 1.3;
  79. padding-bottom: 3px;
  80. padding-left: 15px;
  81. padding-right: 3px;
  82. padding-top: 3px;
  83. white-space: nowrap;
  84. cursor: pointer;
  85. }
  86.  
  87. .ellipsis {
  88. text-overflow: ellipsis;
  89. overflow: hidden;
  90. white-space: nowrap;
  91. }
  92.  
  93. html, body {
  94. padding: 0px 0px 0px 0px;
  95. margin: 0px 0px 0px 0px;
  96. overflow: hidden; /*font-family: 微软雅黑;*/
  97. height: 100%;
  98. width: 100%;
  99. background-color: #E8EFF9;
  100. }
  101.  
  102. .divselectmission {
  103. border-top-style: solid;
  104. border-top-color: #8DB2E3;
  105. border-top-width: 1px;
  106. border-left-style: solid;
  107. border-left-color: #8DB2E3;
  108. border-left-width: 1px;
  109. border-right-style: solid;
  110. border-right-color: #8DB2E3;
  111. border-right-width: 1px;
  112. border-bottom-color: #8DB2E3;
  113. border-bottom-style: solid;
  114. border-bottom-width: 1px;
  115. margin: 3px 3px 3px 3px;
  116. height: 27px;
  117. width: auto;
  118. background-image: url(../../MenuCust/TelDemo/daiban2.png);
  119. }
  120.  
  121. .divmainContent {
  122. border-top-style: solid;
  123. border-top-color: #8DB2E3;
  124. border-top-width: 1px;
  125. border-left-style: solid;
  126. border-left-color: #8DB2E3;
  127. border-left-width: 1px;
  128. border-right-style: solid;
  129. border-right-color: #8DB2E3;
  130. border-right-width: 1px;
  131. border-bottom-color: #8DB2E3;
  132. border-bottom-style: solid;
  133. border-bottom-width: 1px;
  134. position: absolute;
  135. top: 33px;
  136. bottom: 3px;
  137. left: 3px;
  138. right: 3px;
  139. height: auto;
  140. width: auto;
  141. padding-top: 3px;
  142. background-image: url(../../MenuCust/TelDemo/daiban2.png);
  143. }
  144.  
  145. .RadGridCss {
  146. position: absolute;
  147. top: 31px;
  148. bottom: 0px;
  149. height: auto;
  150. border-top-style: solid;
  151. border-top-color: #8DB2E3;
  152. border-top-width: 0px;
  153. }
  154.  
  155. .RadGridCss1 {
  156. }
  157.  
  158. .ExpandCollapseColumn {
  159. cursor: pointer;
  160. }
  161. </style>
  162. <style type="text/css">
  163. .list {
  164. padding-left: 16px;
  165. padding-bottom: 10px;
  166. }
  167.  
  168. .list li {
  169. list-style: square;
  170. padding: 2px;
  171. }
  172.  
  173. pre {
  174. font-size: 11px;
  175. }
  176. </style>
  177. </head>
  178. <body >
  179. <div id="selectmission" class="divselectmission">
  180. <div style="float: left; height: 100%; padding-left: 10px; padding-top: 8px; font-weight: 600; font-size: 12px; color: #000000">
  181. 公章审批查询
  182. </div>
  183. <div style="float: right; height: 100%; padding-right: 6px; padding-top: 6px">
  184. <img id="imgbtn" alt="" src="../../MenuCust/TelDemo/top.png" style="cursor: hand" onclick="displaysearch(this)">
  185. </div>
  186. </div>
  187. <div id="search" style="display: none;">
  188. <div id="SearchDraft" style="display: block; background-color: #E8EFF9; padding-top: 4px; padding-bottom: 3px; padding-left: 6px; font-size: 12px;">
  189. <table>
  190. <tbody>
  191. <tr>
  192. <td style="text-align: right; padding-left: 3px;">
  193. 用章事由:
  194. </td>
  195. <td style="text-align: left;">
  196. <input name="txtDraftDes" type="text" id="txtDraftDes" style="width: 200px;">
  197. </td>
  198. <td style="text-align: right; padding-left: 3px;">
  199. 类型:
  200. </td>
  201. <td style="text-align: left;">
  202. <select name="ddlDraftType" id="ddlDraftType">
  203. <option selected="selected" value="-1">全部</option>
  204. <option value="1">股份</option>
  205. <option value="2">集团</option>
  206.  
  207. </select>
  208. </td>
  209. <td>
  210. <input type="button" name="btnQuery1" value="查询" onclick="search()" id="btnQuery1" style="padding-top: 3px;">
  211. </td>
  212. <td>
  213. <input type="button" id="button1" onclick="qingkong()" value="重置" style="padding-top: 3px;">
  214. </td>
  215. <td>
  216. &nbsp;
  217. </td>
  218. </tr>
  219. </tbody>
  220. </table>
  221. </div>
  222. </div>
  223. <div id="tabs1">
  224. <div id="aatab" class="x-hide-display">
  225.  
  226. </div>
  227. <div id="bbtab" class="x-hide-display">
  228.  
  229. </div>
  230. <div id="cctab" class="x-hide-display">
  231.  
  232. </div>
  233. </div>
  234.  
  235. </body>
  236.  
  237. </html>

【软考非常全的免费系统架构设计师(软考架构师)资料加博主QQ:552343492,备注软考资料!!!
【软考】非常全的免费系统架构设计师(软考架构师)资料加博主QQ:552343492,备注软考资料!!!
【软考】非常全的免费系统架构设计师(软考架构师)资料加博主QQ:552343492,备注软考资料!!!

ext布局问题之tab panel内的gridpanel内容数据变多,出现滚动条的更多相关文章

  1. [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. ExtJs4 笔记(10) Ext.tab.Panel 选项卡

    本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...

  3. ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页

    ext-4.2.1.883\examples\ux\IFrame.js ext-4.2.1.883\examples\ux\TabCloseMenu.js 复制到 \Scripts\ext-4.2.1 ...

  4. 关于系统首页绘制问题(ext布局+c#后台加入数据)经html输出流输出响应client

    关于系统首页绘制问题,业务需求 TODO 绘制系统首页(Main.aspx) 採用的技术:functioncharts+jquery+ext布局+c#+html 解说篇:1,服务端aspx,2,服务端 ...

  5. Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

    实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述 如上图, 1.点击左侧树,叶子 ...

  6. jQuery实现页内查找相关内容

    当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...

  7. 将CMD内的显示内容输出到txt文件

    将CMD内的显示内容输出到txt文件 xxxx -t >c:\test.txt        //xxxx为命令  如ping www.baidu.com //-t >c:\test.tx ...

  8. JS获取中文拼音首字母,并通过拼音首字母高速查找页面内的中文内容

    实现效果: 图一: 图二: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGVzdGNzX2Ru/font/5a6L5L2T/fontsize/400/f ...

  9. 利用webBrowser获取框架内Html页面内容

    原文:利用webBrowser获取框架内Html页面内容 利用webBrowser获取页面比较简单,MSDN下有示例,在这里不必多说. 可是一些 HTML 文档由“框架”构成,或可以存放它们自己独特 ...

随机推荐

  1. 【VBA编程】07.循环结构语句

    [FOR...NEXT语句] For counter = start To End [Step step] [statements] [Exit For] [statements] Next [cou ...

  2. AnjularJS小项目,小案例,练手,猜数字

    之前自己就学了点AnjularJS,都是在菜鸟教程里面将基础的只是大致过了一遍,没怎么自己动手做什么东西练练手,但还是觉得纸上得来终觉浅,得知此事要躬行啊,今天就做了个猜数字的小游戏,觉得效果还不错, ...

  3. cookie_session的详细用法

    相对路径与绝对路径 相对路径: 链接地址  <a href="list.do"></a> 表单提交地址 <form action="add. ...

  4. Android之ImageButton控件基础操作

    控件绑定(前台对应控件的id属性要设置为imageButton_light) private ImageButton imageButton_light;//定义一个ImageButton控件对象,名 ...

  5. js中加入数据缓存

    因为我们的系统设计 所有的数据查询全部是采用参数化json 后台解析后进行数据返回 由于使用统一的数据查询入口 所有可以很方便的为数据设置缓存 var ModelDataCache = new Arr ...

  6. SSE,MSE,RMSE,R-square 指标讲解

    SSE(和方差.误差平方和):The sum of squares due to error MSE(均方差.方差):Mean squared errorRMSE(均方根.标准差):Root mean ...

  7. php serialize序列化对象或者数组

    serialize序列化对象或者数组 $str=serialize(array('a'=>1,'b'=>2)); echo $str; 输入出a:2:{s:1:"a"; ...

  8. ajax 上传图片

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. Sublime Text 2/3如何支持中文GBK编码(亲测实现)

    Sublime Text 2/3如何支持中文GBK编码 听语音 | 浏览:17594 | 更新:2014-03-17 10:52 1 2 3 4 5 分步阅读 Sublime Text默认是只支持UT ...

  10. 【Objective-C】05-第一个OC的类

    OC是一门面向对象的语言,因此它也有类.对象.静态\动态方法.成员变量的概念.这讲就来创建第一个OC的类. 一.语法简介 1.类 在Java中,我们用1个.java文件就可以描述清楚一个类:在OC中, ...