1）解决之道：
1.修改tabPanel
var tabs= new Ext.TabPanel({
border: false,
region:'center',
id:'center',
activeTab:0,
items: [{
2.将tabPanel的每个子项设置为border布局，然后每个grid设置region为center
var tabs= new Ext.TabPanel({
border: false,
region:'center',
id:'center',
activeTab:0,
items: [{
title: 'First tab',
//layout: 'fit',
layout:'border',
items: [grid]
},{
title: 'Second tab'
}]
});
2）效果：
3）代码：
1.js
Ext.require('Ext.tab.*');
var tabs;
var tab1store;
var tab2mainStore;
var tab3mainStore;
Ext.onReady(function () {
//tabl1
Ext.tip.QuickTipManager.init();
Ext.QuickTips.init();
Ext.define('tab1Model', {
extend: 'Ext.data.Model',
fields: [
//'title', 'forumtitle', 'forumid', 'username',
//{ name: 'replycount', type: 'int' },
//{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
//'lastposter', 'excerpt', 'threadid'
'ObjectID', 'Content', 'type', 'creator', 'createtime'
],
idProperty: 'ObjectID'
});
// create the Data Store
tab1store = Ext.create('Ext.data.Store', {
pageSize: 2,
model: 'tab1Model',
remoteSort: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
extraParams: { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val(), State: "Tempsave" },
//type: 'json',
url: '../../Ashx/GetCachetApplyWorkHighSpeed.ashx',
reader: {
//type: 'json' //返回数据类型为json格式
root: 'data',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
//,
//sorters: [{
// property: 'lastpost',
// direction: 'DESC'
//}]
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
//width: "100%",
//height: 470,
//autoHeight: false,
region: 'center',
title: 'tab1',
header: false,
store: tab1store,
disableSelection: true,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
}]
},
// grid columns
columns: [{
id: 'ObjectID',
text: "用章事由",
dataIndex: 'Content',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return '<a href="cachetapply.html?CachetApplyID=' + record.data.ObjectID + '">' + value + '</a>';
},
sortable: false
}, {
text: "类型",
dataIndex: 'type',
width: 100,
hidden: true,
sortable: true
}, {
text: "时间",
dataIndex: 'createtime',
width: 250,
align: 'right',
sortable: true
}, {
text: "删除",
xtype: 'actioncolumn',
width: 100,
sortable: false,
menuDisabled: true,
items: [{
icon: '../../App_Themes/Glass/Images/Icon/delete.GIF',
tooltip: '删除',
scope: this,
handler: function (grid, rowIndex) {
var objectid = tab1store.getAt(rowIndex).data.ObjectID;
Ext.MessageBox.confirm('提示', '确定删除吗?', function (btn) {
if (btn == "yes") {
Ext.Ajax.request({
method: 'get',
url: '../../Ashx/DeleteCachetApplyByObjeID.ashx',
params: { ObjectID: objectid },//jsonData: Ext.encode(list),
success: function (response) {
Ext.Msg.alert("提示", "删除成功！");
tab1store.reload();
},
failure: function () {
Ext.Msg.alert("错误", "与后台联系的时候出了问题。");
}
})
}
});
//insideGridStore.removeAt(rowIndex);
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: tab1store,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
});
// trigger the data store load
tab1store.loadPage(1);
//tab1结束
//tab2开始
Ext.define('tab2Model', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ObjectID' },
{ name: 'Content' },
{ name: 'type' },
{ name: 'creator' },
{ name: 'createdate' },
{ name: 'CategoryID' },
{ name: 'actor' },
{ name: 'url' },
{ name: 'dispatchid' }
]
});
tab2mainStore = Ext.create('Ext.data.ArrayStore', {
model: 'tab2Model',
autoLoad: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
extraParams: { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val(), State: "Running" },
//type: 'json',
url: '../../Ashx/GetCachetApplyWorkHighSpeed.ashx',
reader: {
//type: 'json' //返回数据类型为json格式
root: 'data',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
});
function displayInnerGrid(renderId) {
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'OpinionID' },
{ name: 'objectid' },
{ name: 'ApproveUserID' },
{ name: 'ApproveUserName' },
{ name: 'ApproveTime' },
{ name: 'Content' },
{ name: 'ConfirmType' }
]
});
var insideGridStore = Ext.create('Ext.data.ArrayStore', {
model: 'TestModel',
//data: dummyDataForInsideGrid,
autoLoad: true,
proxy: {
type: 'ajax',
//filterParam: 'sysid',
//simpleSortMode: true,
//// The PHP script just use query=<whatever>
//encodeFilters: function(renderId) {
// return renderId;
//},
//autoSync:true,
extraParams: {
PrimaryId: renderId
},
writer: { type: "json" },
// url: ApiUrl + "ZbbInfo/GetZbbInfoList?sysid=" + renderId,
url: "../../Ashx/GetOpinionHistoryByPrimaryId.ashx",
reader: {
type: 'json'
}
}
});
innerGrid = Ext.create('Ext.grid.Panel', {
store: insideGridStore,
selModel: {
selType: 'cellmodel'
},
title: '假期值班人员',
header: false,
columns: [
{
text: "审批人", dataIndex: 'ApproveUserName', flex: 1, width: 250
},
{
text: "意见", dataIndex: 'Content', width: 250
},
{
text: "审批时间", dataIndex: 'ApproveTime', width: 250
},
{
text: "流程角色", dataIndex: 'ConfirmType', width: 250
}
],
columnLines: true,
//autoWidth: true,
//autoHeight: true,
autoHeight: true,
width: "99%",
//height: 500,
frame: false,
iconCls: 'icon-grid',
renderTo: renderId
});
innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]);
}
function destroyInnerGrid(record) {
var parent = document.getElementById(record.get('ObjectID'));
var child = parent.firstChild;
while (child) {
child.parentNode.removeChild(child);
child = child.nextSibling;
}
}
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainGrid',
region: 'center',
store: tab2mainStore,
autoScroll: true,
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
},
columns: [
{
id: 'ObjectID',
text: "用章事由",
dataIndex: 'Content',
flex: 1,
width: 100,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
//(string.IsNullOrEmpty(Eval("DispatchId").ToString()) && string.IsNullOrEmpty(Eval("url").ToString())) ?
//(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"
//(string.IsNullOrEmpty(Eval("DispatchId").ToString()) && string.IsNullOrEmpty(Eval("url").ToString())) ?
// CachetApplyInfo.aspx?CachetApplyID=" + Eval("ObjectID").ToString()
//Request.ApplicationPath + "/" + Eval("url").ToString() + "?DispatchID=" + Eval("DispatchID").ToString() + "&mode=Edit"
if (record.data.url || record.data.dispatchid) {
//Request.ApplicationPath + "/" + Eval("url").ToString() + "?DispatchID=" + Eval("DispatchID").ToString() + "&mode=Edit"
return '<a href="../../' + record.data.url + '?DispatchId=' + record.data.dispatchid + '&mode=Edit">' + value + '</a>';
} else {
//CachetApplyInfo.aspx?CachetApplyID=" + Eval("ObjectID").ToString()
return '<a href="../../Cachet/CachetApplyInfo.aspx?CachetApplyID=' + record.data.ObjectID + '">' + value + '</a>';
}
},
sortable: false
}, {
text: "类型",
dataIndex: 'type',
width: 100,
//hidden: true,
sortable: true
}, {
text: "时间",
dataIndex: 'createdate',
width: 250,
align: 'right',
sortable: true
}, {
text: "当前审批人",
dataIndex: 'actor',
width: 250,
align: 'right',
sortable: true
}
],
selModel: {
selType: 'cellmodel'
},
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div id="{ObjectID}">',
'</div>'
]
}],
//width: "99%",
//height: 300,
//autoHeight: true,
//autoHeight: true,
collapsible: true,
animCollapse: false,
title: '假期项目值班安排',
header: false,
iconCls: 'icon-grid',
initComponent: function () {
var me = this;
this.callParent(arguments);
},// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: tab2mainStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
});
var mainGrid = new Ext.create('MainGrid');
mainGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
displayInnerGrid(record.get('ObjectID'));
setTimeout(function () {
//heighinit();
}, 1000);
});
mainGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
setTimeout(function () {
//heighinit();
}, 1000);
});
//mainGrid.render('bb');
//tab2结束
//tab3开始
tab3mainStore = Ext.create('Ext.data.ArrayStore', {
model: 'tab2Model',
autoLoad: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
extraParams: { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val(), State: "Completed" },
//type: 'json',
url: '../../Ashx/GetCachetApplyWorkHighSpeed.ashx',
reader: {
//type: 'json' //返回数据类型为json格式
root: 'data',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
});
Ext.define('MainGrid2', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainGrid',
region: 'center',
store: tab3mainStore,
//autoHeight: true,
columns: [
{
id: 'ObjectID',
text: "用章事由",
dataIndex: 'Content',
flex: 1,
width: 100,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return '<a href="../../Cachet/CachetApplyInfo.aspx?CachetApplyID=' + record.data.ObjectID + '">' + value + '</a>';
},
sortable: false
}, {
text: "类型",
dataIndex: 'type',
width: 100,
//hidden: true,
sortable: true
}, {
text: "时间",
dataIndex: 'createdate',
width: 250,
align: 'right',
sortable: true
}, {
text: "当前审批人",
dataIndex: 'actor',
width: 250,
align: 'right',
sortable: true
}
],
selModel: {
selType: 'cellmodel'
},
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div id="{ObjectID}">',
'</div>'
]
}],
//width: "99%",
autoScroll: true,
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
},
//height: 300,
//autoHeight: true,
collapsible: true,
animCollapse: false,
title: '假期项目值班安排',
header: false,
iconCls: 'icon-grid',
initComponent: function () {
var me = this;
this.callParent(arguments);
},// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: tab3mainStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
,
});
var mainGrid2 = new Ext.create('MainGrid2');
mainGrid2.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
displayInnerGrid(record.get('ObjectID'));
setTimeout(function () {
//heighinit();
}, 1000);
});
mainGrid2.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
setTimeout(function () {
//heighinit();
}, 1000);
});
//mainGrid2.render('cc');
//tab3结束
var height = document.documentElement.clientHeight-70;
//alert(height);
tabs = Ext.widget('tabpanel', {
renderTo: 'tabs1',
width: "100%",
height: height,
activeTab: 0,
autoHeight: false,
//layout : 'border',
border: false,
region: 'center',
defaults: {
bodyPadding: 0
},
items: [{
contentEl: 'aatab',
title: '拟稿',
items: grid,
layout: 'border'
}, {
contentEl: 'bbtab',
title: '正在审批',
items: mainGrid,
layout: 'border'
}, {
contentEl: 'cctab',
title: '完成审批',
items: mainGrid2,
layout: 'border'
}]
});
});
function qingkong() {
$("#txtDraftDes").val("");
$("#ddlDraftType").val("-1");
}
function displaysearch(which) {
if ($("#search").css("display") == "none") {
$("#search").css("display","block");
$(which).attr("src", "../../MenuCust/TelDemo/bottom.png");
} else {
$("#search").css("display", "none");
$("#txtDraftDes").val("");
$("#ddlDraftType").val("-1");
$(which).attr("src", "../../MenuCust/TelDemo/top.png");
}
}
function search() {
if (tabs.getActiveTab().title == "拟稿") {
//tab1store.loadPage(1); txtDraftDes: type: -1
tab1store.on('beforeload', function () {
Ext.apply(tab1store.proxy.extraParams, { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val() });
});
tab1store.loadPage(1);
} else if (tabs.getActiveTab().title == "正在审批") {
tab2mainStore.on('beforeload', function () {
Ext.apply(tab2mainStore.proxy.extraParams, { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val() });
});
tab2mainStore.load();
} else if (tabs.getActiveTab().title == "完成审批") {
tab3mainStore.on('beforeload', function () {
Ext.apply(tab3mainStore.proxy.extraParams, { txtDraftDes: $("#txtDraftDes").val(), type: $("#ddlDraftType").val() });
});
tab3mainStore.load();
}
//mainStore.on('beforeload', function () {
// Ext.apply(mainStore.proxy.extraParams, { sysName: sysName });
//});
//mainStore.load();
}
2.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8" />
<title>节假日值班安排</title>
<script src="../Js/jquery.js"></script>
<script src="../../Ext/ext-all.js"></script>
<link href="../../Ext/resources/css/ext-all.css" rel="stylesheet" />
<script src="../Js/tabs.js"></script>
<script src="../Js/tab1.js"></script>
<script src="../Js/PreviewPlugin.js"></script>
<script src="../Js/tab2.js"></script>
<style type="text/css">
.btnHover {
background-image: url(../../App_Themes/Glass/Images/backcolorImage.jpg);
background-repeat: no-repeat;
}
.btnOut {
background-image: none;
text-decoration: none;
text-align: center;
padding-top: 2px;
}
.LinkbuttonCss {
background: transparent url('../../App_Themes/Glass/Images/WebResource.png') no-repeat scroll top right;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100% -98px;
border-collapse: separate;
display: block;
float: left;
padding-bottom: 3px;
padding-top: 1px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.LinkbuttonCss2 {
border-collapse: separate;
display: block;
float: left;
padding-bottom: 3px;
padding-top: 1px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.spanCss {
background: transparent url('../../App_Themes/Glass/Images/WebResource.png') no-repeat scroll top right;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px -75.5px;
border-collapse: separate;
display: block;
float: left;
line-height: 1.3;
padding-bottom: 3px;
padding-left: 15px;
padding-right: 3px;
padding-top: 3px;
white-space: nowrap;
cursor: pointer;
}
.spanCss2 {
border-collapse: separate;
display: block;
float: left;
line-height: 1.3;
padding-bottom: 3px;
padding-left: 15px;
padding-right: 3px;
padding-top: 3px;
white-space: nowrap;
cursor: pointer;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
html, body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
overflow: hidden; /*font-family: 微软雅黑;*/
height: 100%;
width: 100%;
background-color: #E8EFF9;
}
.divselectmission {
border-top-style: solid;
border-top-color: #8DB2E3;
border-top-width: 1px;
border-left-style: solid;
border-left-color: #8DB2E3;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #8DB2E3;
border-right-width: 1px;
border-bottom-color: #8DB2E3;
border-bottom-style: solid;
border-bottom-width: 1px;
margin: 3px 3px 3px 3px;
height: 27px;
width: auto;
background-image: url(../../MenuCust/TelDemo/daiban2.png);
}
.divmainContent {
border-top-style: solid;
border-top-color: #8DB2E3;
border-top-width: 1px;
border-left-style: solid;
border-left-color: #8DB2E3;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #8DB2E3;
border-right-width: 1px;
border-bottom-color: #8DB2E3;
border-bottom-style: solid;
border-bottom-width: 1px;
position: absolute;
top: 33px;
bottom: 3px;
left: 3px;
right: 3px;
height: auto;
width: auto;
padding-top: 3px;
background-image: url(../../MenuCust/TelDemo/daiban2.png);
}
.RadGridCss {
position: absolute;
top: 31px;
bottom: 0px;
height: auto;
border-top-style: solid;
border-top-color: #8DB2E3;
border-top-width: 0px;
}
.RadGridCss1 {
}
.ExpandCollapseColumn {
cursor: pointer;
}
</style>
<style type="text/css">
.list {
padding-left: 16px;
padding-bottom: 10px;
}
.list li {
list-style: square;
padding: 2px;
}
pre {
font-size: 11px;
}
</style>
</head>
<body >
<div id="selectmission" class="divselectmission">
<div style="float: left; height: 100%; padding-left: 10px; padding-top: 8px; font-weight: 600; font-size: 12px; color: #000000">
公章审批查询
</div>
<div style="float: right; height: 100%; padding-right: 6px; padding-top: 6px">
<img id="imgbtn" alt="" src="../../MenuCust/TelDemo/top.png" style="cursor: hand" onclick="displaysearch(this)">
</div>
</div>
<div id="search" style="display: none;">
<div id="SearchDraft" style="display: block; background-color: #E8EFF9; padding-top: 4px; padding-bottom: 3px; padding-left: 6px; font-size: 12px;">
<table>
<tbody>
<tr>
<td style="text-align: right; padding-left: 3px;">
用章事由：
</td>
<td style="text-align: left;">
<input name="txtDraftDes" type="text" id="txtDraftDes" style="width: 200px;">
</td>
<td style="text-align: right; padding-left: 3px;">
类型：
</td>
<td style="text-align: left;">
<select name="ddlDraftType" id="ddlDraftType">
<option selected="selected" value="-1">全部</option>
<option value="1">股份</option>
<option value="2">集团</option>
</select>
</td>
<td>
<input type="button" name="btnQuery1" value="查询" onclick="search()" id="btnQuery1" style="padding-top: 3px;">
</td>
<td>
<input type="button" id="button1" onclick="qingkong()" value="重置" style="padding-top: 3px;">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabs1">
<div id="aatab" class="x-hide-display">
</div>
<div id="bbtab" class="x-hide-display">
</div>
<div id="cctab" class="x-hide-display">
</div>
</div>
</body>
</html>
