我在一个页面中定义了一个viewport ,一个Panel,二个gridPanel,
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有滚动条?
- 大小: 67.4 KB
分享到:
相关推荐
collapsible : true enableDD : true enableDrag : true rootVisible : true autoScroll : true autoHeight : true width : 150 lines : true } ;">extjs实现简单的树状结构级联Ext onReady ...
containerScroll: true,//是否支持滚动条 split:true, width: 140, rootVisible:false,//是否显示跟节点 collapseMode:'mini',//在分割线处出现按钮 collapsible: true, margins:'0 0 5 5', loader:new Ext.tree....
<div data-options="region:'east',split:true,title:'East',collapsible:true" url: 'propertygrid_data1.json', method: 'get', showGroup: true, fit: true, border: false "> ...
collapsible:true, autoHeight:true, defaultType:"textfield", items:[ {fieldLabel:"姓名", //width:250, //设置了anchor后无效 allowBlank:false, blankText:"姓名不能为空", anchor:"50%" }, { ...
@ mtburdon / react-collapsible React可折叠组件 安装 npm install --save @mtburdon/react-collapsible 用法 import React , { Component } from 'react' import { Collapsible , CollapsibleHead , ...
八爪鱼 Arrgh到GitHub有点修补了! 产品特点 :添加标题以发布注释,该注释允许切换长代码和引号块的视图。 :使所有markdown标头都可单击,以允许在同一级别标头之间切换所有内容的视图。 安装 ...
肉桂系统托盘可折叠 与 2.6 版本兼容的 Cinnamon 可折叠系统托盘小程序。... 要安装它,只需将这个 repo 签出到你的 Cinnamon 小程序目录中,即~/.local/share/cinnamon/applets/systray-collapsible@hdodenhof.de 。
可折叠的 一种轻巧易用的方式来切换内容的可见性。 演示版
代码如下: var tree = new Ext.tree.TreePanel({ region:’west’, title:’站点树... collapsible:true, rootVisable:false, //不显示根节点 root:new Ext.tree.TreeNode({ id:’root’, text:’分所’, draggable:fa
react-navigation-collapsible 文献资料 ≥v5( latest ) v5( latest ) 当前的 ≥v3 v3 v2 v2 :building_construction: 由于的不再支持可折叠Tab导航器。 用法 1-1。 默认标题 // Expo ONLY import { ...
可塑性收缩 plastik-collapsible是可折叠和可扩展项目的列表。... 此外, plastik-collapsible不需要明确定义的页眉高度知识,而是将自动并单独地计算它们。 所有这些都是为了提供足够的灵活性。 例子
React响应式可折叠部分组件(可折叠) React组件将内容包装...安装通过npm或yarn进行安装npm install react-collapsible --saveyarn add react-collapsible用法可折叠的子元素可以接收任何HTML元素或React组件。 可折叠
安装npm install --save react-native-collapsible可折叠用法import Collapsible from 'react-native-collapsible' ;( ) => ( < Collapsible xss=removed> < SomeCollapsedView> < / Collapsible
咏叹调 一个轻量级的,无依赖JavaScript模块,用于使用生成逐渐增强的可折叠区域。... 使用 npm install aria-collapsible --save : npm install aria-collapsible --save 使用安装: yarn add aria-collapsib
更好的是,使用git submodule add https://github.com/alexandruioanp/hugo-universal-collapsible/并创建适当的符号链接。 这样就很容易更新。 渲染时,请确保将CSS和JS文件复制到输出( public )文件夹中。 ...
React可折叠 React 可折叠组件。 在制品 去做 添加 postcss
常见问题可查看 本机UI Tableview可折叠 这是具有可折叠功能的本机UITableView。 在此项目上,我们隐藏部分,并使用第一行作为标题。 如何使用: 将常见问题解答单元文件夹导入到您的项目。 ... 如本示例项目的...
collapsible:true, renderTo:'base',//被渲染的对象,渲染的对象必须是ID width:400, html:'<b>内容</b>> <a>test</a>', tbar:[ {text:'新增'},{text:'修改'},{text:'删除'}],//头部工具栏 tools:[{id:'...
true[显示] false[不显示] 2、div easyui-panel 生成一个面板。 属性如下: 1)title:该标题文本显示在面板头部。 2)iconCls:在面板上通过一个CSS类显示16x16图标。 3)width:设置面板宽度。默认auto。 4)height:...
options可以选择的属性为:disabled, active, animated, autoHeight, clearStyle, collapsible, event, fillSpace, header, icons, navigation, navigationFilter简单实例: 代码如下:<!DOCTYPE html PUBLIC “-/...