浏览 2155 次
该帖已经被评为隐藏帖
|
|
---|---|
作者 | 正文 |
发表时间:2009-09-22
最后修改:2009-09-22
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有滚动条? 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |