collapsible: true GridPanel的滚动条不出现了!
我在一个页面中定义了一个viewport ,一个Panel,二个gridPanel,
Panel在viewport中,gridPanel1和gridPanel2在Panel中
viewPort，layout:'border',
Panel，layout:'anchor',
如下( 以下代码可以直接运行查看效果):
把数据栏中的‘|‘，往后拖到表格中有数据看不到，可能girdPanel1和gridPanel2中都不出现滚动条？？？
如果在girdPanel1和gridPanel2中去掉anchor:'100%',就可以看到滚动条，但在页面上显示的是属于Panel的这又是为什么？
这难道是Ext的BUG，还是我没有找到正确的写法？
怎么才能看到girdPanel1和gridPanel2有滚动条?
Panel在viewport中,gridPanel1和gridPanel2在Panel中
viewPort，layout:'border',
Panel，layout:'anchor',
如下( 以下代码可以直接运行查看效果):
<html>
<head>
<title>GridPanel布局</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="ext3.0/css/ext-all.css" />
<script type="text/javascript" src="ext3.0/js/ext-base.js"></script>
<script type="text/javascript" src="ext3.0/js/ext-all.js"></script>
<script type="text/javascript" src="js/zllr/ext-lang-zh_CN.js"></script>
</head>
<body>
<script>
var app={};
var pageSize=5;
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var wzzlArrayDatas = [['N_TGID','C_WZBT','C_ZZ','C_BZ','C_GJZ','C_SCSJ','C_XGSJ']];
app.store_wzzl = new Ext.data.SimpleStore({
fields: ["N_WZID", "C_WZBT","C_ZZ", "C_BZ", "C_GJZ","C_SCSJ", "C_XGSJ"],
data: wzzlArrayDatas
});
var TglxArrayDatas = [['N_TGID','C_TGMC','C_SCLJ','C_FXRQ','N_TGLX','N_TGTC','N_TGLB']];
app.store_tgxx = new Ext.data.SimpleStore({
fields: ["N_TGID", "C_TGMC","C_SCLJ", "C_FXRQ", "N_TGLX","N_TGTC", "N_TGLB"],
data: TglxArrayDatas
});
//图稿信息 tgzlgridPanel
app.tgzlgridPanel = new Ext.grid.GridPanel({
id: 'tgzlgridpanel',
title : '图稿信息',
frame:true,
// region: 'north',
// layout: 'fit',
anchor:'100%',
autoHeight : true,
autoScroll : true,
// autoWidth : true,
// autoWidth : true,
collapsible: true,
bbar : new Ext.PagingToolbar({//分页工具栏
store : app.store_tgxx,
pageSize :pageSize,
displayInfo : true,
displayMsg : '第 {0} 条到 {1} 条，一共 {2} 条',
emptyMsg : "没有记录",
items: ['jjjk']
}),
store: app.store_tgxx,
columns: [//配置表格列
new Ext.grid.RowNumberer(),//表格行号组件
{header: "图稿id", width: 50, dataIndex: 'N_TGID', sortable: true},
{header: "图稿名称", width: 130, dataIndex: 'C_TGMC', sortable: false},
{header: "图", width: 25, dataIndex: 'C_SCLJ', sortable: false},
{header: "发行日期", width: 80, dataIndex: 'C_FXRQ', sortable: false},
{header: "图稿类型", width: 60, dataIndex: 'N_TGLX', sortable: false},
{header: "图稿题材", width: 60, dataIndex: 'N_TGTC', sortable: false},
{header: "图稿类别", width: 60, dataIndex: 'N_TGLB', sortable: false}
]
})//end of app.tgzlgridPanel
//文字资料 wzzlgridPanel
app.wzzlgridPanel = new Ext.grid.GridPanel({
id: 'gridpanel_wzzl',
title : 'Word信息',
frame:true,
anchor:'100%',
autoHeight : true,
autoScroll : true,
bbar : new Ext.PagingToolbar({//分页工具栏
store : app.store_wzzl,
pageSize :pageSize,
displayInfo : true,
displayMsg : '第 {0} 条到 {1} 条，一共 {2} 条',
emptyMsg : "没有记录",
items: ['gff']
}),
store: app.store_wzzl,
columns: [//配置表格列
new Ext.grid.RowNumberer(),//表格行号组件
{header: "文字id", width: 50, dataIndex: 'N_WZID', sortable: true},
{header: "文字标题", width: 130, dataIndex: 'C_WZBT', sortable: false},
{header: "作者", width: 100, dataIndex: 'C_ZZ', sortable: false},
{header: "备注", width: 200, dataIndex: 'C_BZ', sortable: false,hidden : false},
{header: "关键字", width: 200, dataIndex: 'C_GJZ', sortable: false,hidden : true},
{header: "Word上传时间", width: 115, dataIndex: 'C_SCSJ', sortable: false},
{header: "信息修改时间", width: 115, dataIndex: 'C_XGSJ', sortable: false,hidden:true}
]
})//end of app.wzzlgridPanel
/*
创建添加菜单
*/
var addMenu = new Ext.menu.Menu({
id: 'addMenu',
items: [{
text: '<font size="2">清空表格</font>',
handler: function(){
Ext.Msg.alert("提示","清空表格");
}
}, {
text: '<font size="2">添加</font>',
handler: function(){
Ext.Msg.alert("提示","添加");
}
}, {
text: '<font size="2">添加排序数据</font>',
handler: function(){
Ext.Msg.alert("提示","添加排序数据");
}
}, {
text: '<font size="2">插入</font>',
handler: function(){
Ext.Msg.alert("提示","插入");
}
}, {
text: '<font size="2">删除</font>',
handler: function(){
Ext.Msg.alert("提示","删除");
}
}]
});
var mytoolbar = new Ext.Toolbar();
/*
添加菜单到工具条
*/
mytoolbar.add({
text: '<font size="2">数据添加与删除</font>',
menu: addMenu
}, '-');
app.Panel = new Ext.Panel({
id: 'mainpanel',
title : '资料详情',
region: 'center',
layout:'anchor',
autoScroll : true,//自动显示滚动条
closable: true,
bbar : mytoolbar,
items: [app.tgzlgridPanel,app.wzzlgridPanel]
})//end of app.Panel
var viewport = new Ext.Viewport({
layout:'border',//设置viewport里面的item在viewport中的布局方式
animate:true,
items:[app.Panel]
});
})
</script>
</body>
</html>
把数据栏中的‘|‘，往后拖到表格中有数据看不到，可能girdPanel1和gridPanel2中都不出现滚动条？？？
如果在girdPanel1和gridPanel2中去掉anchor:'100%',就可以看到滚动条，但在页面上显示的是属于Panel的这又是为什么？
这难道是Ext的BUG，还是我没有找到正确的写法？
怎么才能看到girdPanel1和gridPanel2有滚动条?