extjs4 多个panel 列布局

最新推荐文章于 2016-07-11 16:06:05 发布
最新推荐文章于 2016-07-11 16:06:05 发布
阅读量3.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zha_zi/article/details/41676905
版权

单纯的设置layout：column 好像不行，感觉extjs4跟以前不太一样

找了一个panel 横向布局的例子

 

<html>
<head>
    <title>Column Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    .x-panel-body p {
        margin:5px;
    }
    .x-column-layout-ct .x-panel {
        margin-bottom:5px;
    }
    .x-column-layout-ct .x-panel-dd-spacer {
        margin-bottom:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png) !important;
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png) !important;
    }
    </style>
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<script type="text/javascript">
Ext.require(['*']);

    Ext.onReady(function(){

       // NOTE: This is an example showing simple state management. During development,
       // it is generally best to disable state management as dynamically-generated ids
       // can change across page loads, leading to unpredictable results.  The developer
       // should ensure that stable state ids are set for stateful components in real apps.
       Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

       var viewport = Ext.create('Ext.Viewport', {
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [{
                    html: Ext.example.shortBogusMarkup,
                    title:'Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav'
                },{
                    title:'Settings',
                    html: Ext.example.shortBogusMarkup,
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                region:'center',
                margins:'35 5 5 0',
                layout:'column',
                autoScroll:true,
                defaults: {
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    }
                },
                items: [{
                    columnWidth: 1/3,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[{
                        title: 'A Panel',
                        html: Ext.example.shortBogusMarkup
                    }]
                },{
                    columnWidth: 1/3,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[{
                        title: 'A Panel',
                        html: Ext.example.shortBogusMarkup
                    }]
                },{
                    columnWidth: 1/3,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px',
                    items:[{
                        title: 'A Panel',
                        html: Ext.example.shortBogusMarkup
                    },{
                        title: 'Another Panel',
                        html: Ext.example.shortBogusMarkup
                    }]
                }]
            }]
        });
    });
</script>
</head>
<body>
</body>
</html>
 


  • 大小: 89.6 KB
zha_zi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【转载】EXTJS布局示例（panel，Viewport，TabPanel）
持续集成
02-05 166
原文网址：http://www.cnblogs.com/johan/archive/2011/04/11/1947982.html 面板控件panel应用         new Ext.Panel({ title:'面板头部（header）',             tbar : ['顶端工具栏(top toolbars)'],             bbar...
超详细的Java容器、面板及四大布局管理器应用讲解！
最新发布
2301_79099416的博客
05-04 728
关于布局管理器，在Swing中，每个组件都有一个具体的位置和大小，而在容器中真正去摆放这些组件时其实是很难判断其具体位置和大小的，布局管理器就提供了一种对swing组件的排版方式，因此使用布局管理器就可以很有效的处理整个窗体中组件的布局方式，Swing提供的常用的布局管理器有四种：绝对布局管理器、流布局管理器、边界布局管理器、网格布局管理器，接下来会对这四种布局管理器进行探讨。container.add(new JButton(“我是中部区域”),BorderLayout.CENTER);
Extjs FormPanel/TabPanel/GridPanel混合
weixin_34216196的博客
03-08 233
tabPanel包含两个FormPanel Ext.onReady(function () { var tabsDemo = new Ext.TabPanel({ renderTo: Ext.getBody(), activeTab: 0, //当前激活标签 frame: true, ...
Extjs4之动态添加FormPanel
hsg0123_126的专栏
07-30 1633
功能实现：点击界面上的按钮实现，动态的在FieldSet中添加Panel，并将动态添加的Panel中包含的值传递给后台。具体实现如下： var AddDep = function (item, grid) { var now = new Date().toLocaleDateString(); var num = 0; Ext.QuickTips.init();
Extjs多个tab页面——panel层叠
寒尘的专栏
12-05 4833
Extjs多个tab页面——panel层叠
extjs4中panel的accordion布局以及treepanel导航
11-30
Accordion布局是一种特殊的布局方式，它允许在一个Panel内嵌套多个子Panel，并且这些子Panel只能有一个可见。当一个子Panel被展开时，其他所有子Panel会自动折叠。这种布局模式常用于空间有限但需要显示多个相关但...
ExtJS3.2列布局
06-30
列布局（Column Layout）是ExtJS的一种布局策略，它允许你在同一行内创建多个并排显示的区域，每个区域可以包含不同的组件，如文本框、选择框、按钮等。这种布局方式非常适合用来构建表格化的表单，使得数据输入和...
ExtJS 2.0 实用简明教程之布局概述
10-30
1. **Column Layout**（列布局）：如示例代码所示，用于将容器分割成多个等宽或按比例划分的列。`columnWidth`配置项用于指定每列的宽度占比。 2. **Border Layout**（边界布局）：这种布局将容器分为北、南、东、...
Extjs4 swfupload 多文件上传
07-28
SWFUpload是基于Flash技术的，它允许用户在不离开当前页面的情况下选择并上传多个文件。由于Flash的支持多文件选择特性，这在HTML5普及之前是一种常见的实现多文件上传的方式。SWFUpload通过在页面上嵌入一个透明的...
学习ExtJS accordion布局
10-29
Accordion布局是ExtJS中的一种特殊布局方式，它允许在一个容器内展示多个可折叠的面板，每个面板的展开会自动收起其他已展开的面板，从而提供了一种高效的屏幕空间利用机制。 一、Accordion布局的核心概念 ...
Extjs panel 嵌套求帮忙解答
ZAZALLL的专栏
06-24 1315
Ext.onReady(function () { Ext.create('Ext.window.Window',{ autoShow:true, width:950, height:550, layout:'absolute', items:p2 }); var p2=Ext.create('Ext.panel.Panel',{ title:'test',
Ext.Viewport用TabPanel中GridPanel布局问题
wangzi6hao的专栏
05-14 125
Ext.Viewport用了TabPanel 如 js代码: Ext.Viewport建立center,里面包含一个Ext.TabPanel { region:'center', layout:'fit', split:true, coll...
extjs4学习资料(gridpanel布局问题)
不了了之专栏
10-07 1015
Ext4 GridPanel布局问题 ext的border布局，将一页页面，分成west,east,south,center,north，五个部分。 在一个布局模块可能又可以分成west,east,south,center,north这儿五个部分，一个层套一层。 但是，在一个center中，如何要加form布局，展示一个gridpanel，或者多个gridPanel控
EXT多面板组合代码
weixin_30902675的博客
07-18 76
Ext.BLANK_IMAGE_URL="http://www.cnblogs.com/widgets/ext-2.2.1/resources/images/default/s.gif";Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget='qtip';com.awd...
利用多个panel重叠来代替tabcontrol方法
kinsno的专栏
07-11 3523
这两天,在弄一个C#软件,看着tabcontrol那个讨厌的标签,真是火大;折腾了1个周末加今天1个白天,总是不行。。。 其实我就是想要一排按纽，来控掉不同的界面显示，今天打算使用多个pannel来代替tabcontrol，自己在旁边再弄几个按纽，这多方便。。。 有两个问题需要解决： 一、多个pannel可以通过属性来调整大小与坐标，让它对应在一起。。。但是在编辑的时候，如何让在下面的pan
Ext中tabPanel加载页面总结
iteye_9657的博客
12-14 439
通常情况下，最好，速度最快的方法是在TabPanel的Items属性中设置autoLoad： autoLoad:{ url:'a.jsp', scripts:true } 但如果被加载的页面a.jsp中有Ext.OnReady()方法的话，则无法显示OnReady中加载的界面，所以只能用iframe进行加载，也就是第二种方法： frame:tru...
Extjs4布局详解(二)——border布局
随风的专栏
01-17 707
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。 注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
Ext基础---布局：FormPanel中加入Tabpanel并多列布局
weixin_30553065的博客
03-24 248
最近做一个东西需要如下效果： 后来根据 殷良胜老大的【经典布局第五篇】稍做了下修改，实现了需要的效果，唯一不同的是我使用了TabPanel，实现方式几乎都是一样的，可能有那么一点小差异，把在实现过程中的一些问题罗列一下，以供以后参考！ 具体划分情况： 记录代码： function formTest() { //<s---------------...
ExtJS4.0教程：Column列布局详解
"Column列布局是ExtJS4.0教程中的一个重要概念，它允许开发者灵活地设置每个列的宽度，可以基于百分比或固定值。在Column布局中，每个子面板可以通过`columnWidth`配置项指定百分比宽度，或者使用`width`配置项指定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值