`
zha_zi
  • 浏览: 592683 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

extjs4 多个panel 列布局

 
阅读更多

单纯的设置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
分享到：
| extjs bbar 居中
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs4中panel的accordion布局以及treepanel导航

    Accordion布局是一种特殊的布局方式，它允许在一个Panel内嵌套多个子Panel，并且这些子Panel只能有一个可见。当一个子Panel被展开时，其他所有子Panel会自动折叠。这种布局模式常用于空间有限但需要显示多个相关但...

    ExtJS3.2列布局

    列布局（Column Layout）是ExtJS的一种布局策略，它允许你在同一行内创建多个并排显示的区域，每个区域可以包含不同的组件，如文本框、选择框、按钮等。这种布局方式非常适合用来构建表格化的表单，使得数据输入和...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    这个实例结合了多个技术，包括Accordion布局、Servlet、Struts2以及JSON数据交互，以及Ext.tree.Panel组件，以创建一个功能丰富的用户界面。 Accordion布局是ExtJS中的一个布局管理器，它允许在一个区域内组织多个...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中，`tabpanel`是用于创建多标签界面的组件，它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式，因为它允许按需加载内容，减少初始页面加载时间。...

    Extjs 重写Panel添加click事件

    一个Panel由多个部分组成，包括头部（header）、主体（body）和脚部（footer）。我们可以通过配置对象来设置Panel的各种属性，如title、width、height等。当涉及到事件监听时，我们可以利用Ext JS的事件系统来实现。...

    Extjs4详解.pdf

    如果Fit布局中包含多个组件，那么只有第一个组件会被显示，其他的组件将会被忽略。Fit布局适用于那些需要子元素完全覆盖父容器视图区域的场景。 Border布局是另一种在Extjs4中非常常用的布局类型。它将父容器的区域...

    extjs3 swfupload panel

    1. **多文件选择**：用户可以通过文件对话框一次选择多个文件，提高了上传效率。 2. **预览功能**：用户可以在上传前查看所选文件，增加了交互性和准确性。 3. **进度条显示**：在文件上传过程中，可以显示上传进度...

    extjs4学习文档

    EXTJS4的学习文档还包括更多关于组件、布局、数据绑定、事件处理等方面的详细内容，这些都是构建EXTJS应用不可或缺的知识。通过深入学习和实践，开发者可以熟练掌握EXTJS4，创建功能丰富的Web应用程序。

    Extjs4 图片浏览器

    1. **Panel（面板）**：作为应用的基本容器，图片浏览器通常由多个Panel组成，每个Panel可以承载不同的功能，如导航栏、图片展示区、控制按钮等。 2. **Grid Panel（表格面板）**：可能被用来展示图片的缩略图，...

    ExtJs布局教程Ext详细布局

    总之，ExtJS的Column布局提供了一种强大而灵活的方法来组织和显示多个组件。开发者可以通过精细调整`columnWidth`和`bodyStyle`，实现自定义的列宽和间距，以适应各种界面设计需求。同时，理解布局的原理和规则，...

    ExtJS 4 技术详解，全面解析ExtJS 4

    ExtJS 4 是一个强大的...Accordion布局适合有限的空间内展示多个面板，而Border布局则适用于需要分割屏幕并进行动态调整的应用场景。通过灵活运用这些布局，开发者可以构建出适应不同需求的高质量Web应用程序。

    extjs4 treeGrid实例

    总的来说，ExtJS4 TreeGrid实例的创建涉及模型定义、数据存储、列配置和面板创建等多个环节，能够有效地呈现层次结构的报表数据，提供丰富的用户交互体验。在实际应用中，你可能需要根据具体需求调整和扩展这个基础...

    Extjs4 Extjs4学习指南

    此外，还可以使用选择器来获取具有相同特征的多个元素，这在处理复杂DOM结构时非常有用。 #### 五、员工管理系统 虽然原文中没有具体提及员工管理系统的内容，但在学习和使用Extjs4的过程中，可以考虑构建这样的...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中，ComboBox是一个常用的组件，它用于创建下拉选择框，通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而，根据你的标题和描述，你似乎遇到了一个特别的...

    Extjs4 权威指南(中)

    - 放置多个组件时仅显示第一个子元素。 - 示例场景：window或panel中放置GRID组件。 - **Border布局**： - 页面分为五个区域：North、South、East、West、Center。 - 区域内可放置组件，每个区域支持嵌套布局。 ...

    Extjs4 下拉树 TreeCombo

    在ExtJS 4中，TreeCombo主要由两部分组成：一个普通的ComboBox和一个内嵌的TreeView。当用户展开ComboBox时，内部的TreeView显示，用户可以浏览和选择树形结构中的节点。一旦用户选择了某个节点，ComboBox的输入框将...

    Extjs4 API文档阅读（三）——布局和容器

    例如，如果需要同时执行多个可能触发重新布局的操作，可以使用`suspendLayouts`选项暂时禁用自动布局。一旦完成所有操作后，再手动调用`doLayout`方法来更新布局： ```javascript var containerPanel = Ext.create...

    Extjs4 combogrid扩展

    描述中提到的“对combo进行扩展，支持grid显示”，意味着我们将在 Combo 的下拉部分嵌入一个 Grid，这样用户在选择时就能看到多个属性的详细信息，而不仅仅是单一的文本标签。这通常涉及到自定义渲染和监听事件，...

    Extjs4 swfupload 多文件上传

    SWFUpload是基于Flash技术的，它允许用户在不离开当前页面的情况下选择并上传多个文件。由于Flash的支持多文件选择特性，这在HTML5普及之前是一种常见的实现多文件上传的方式。SWFUpload通过在页面上嵌入一个透明的...

    ExtJS布局练习例

    文件中的示例使用了`column`布局，这是ExtJS中的一种常用布局方式，用于将子元素按列排列。例如，在代码中，可以看到一个`Ext.Panel`对象被创建，并指定了`layout:'column'`，这意味着所有包含在`items`数组中的子...

Magicbox
Global site tag (gtag.js) - Google Analytics