collapsible: true GridPanel的滚动条不出现了!

最新推荐文章于 2021-12-20 18:51:41 发布

yinyun594230

最新推荐文章于 2021-12-20 18:51:41 发布

阅读量193

点赞数 1

文章标签： gridpanel panel autoscroll layout border

我在一个页面中定义了一个viewport ,一个Panel,二个gridPanel,
Panel在viewport中,gridPanel1和gridPanel2在Panel中
viewPort，layout:'border',
Panel，layout:'anchor',
如下([size=medium]以下代码可以直接运行查看效果[/size]):


<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>

[size=medium]把数据栏中的‘|‘，往后拖到表格中有数据看不到，可能girdPanel1和gridPanel2中都不出现滚动条？？？
如果在girdPanel1和gridPanel2中去掉anchor:'100%',就可以看到滚动条，但在页面上显示的是属于Panel的这又是为什么？
这难道是Ext的BUG，还是我没有找到正确的写法？
怎么才能看到girdPanel1和gridPanel2有滚动条?[/size]

yinyun594230

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
collapsible: true GridPanel的滚动条不出现了!

我在一个页面中定义了一个viewport ,一个Panel,二个gridPanel,Panel在viewport中,gridPanel1和gridPanel2在Panel中viewPort，layout:'border',Panel，layout:'anchor',如下([size=medium]以下代码可以直接运行查看效果[/size]):[code="java"]...
复制链接

扫一扫