开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何更改面板extjs4中的可折叠位置？

如何更改面板 extjs4 中的可折叠位置？

要更改面板 extjs4 中的可折叠位置，请按照以下步骤操作：

首先，在 HTML 文件中的 ExtJS 组件中定义面板。
然后，在 JavaScript 文件中定义 ExtJS 组件的 tbar 属性，用于设置工具栏按钮。
最后，在 JavaScript 文件中定义 bbar 属性，用于设置面板的可折叠区域。

以下是一个示例：

<!-- HTML 文件 -->
<div id="panel"></div>

<!-- JavaScript 文件 -->
var panel = Ext.create('Ext.panel.Panel', {
    id: 'panel',
    width: 300,
    height: 200,
    tbar: [
        {
            xtype: 'button',
            text: '按钮1',
            handler: function() {
                console.log('按钮1 被点击了');
            }
        },
        {
            xtype: 'button',
            text: '按钮2',
            handler: function() {
                console.log('按钮2 被点击了');
            }
        }
    ],
    bbar: [
        {
            xtype: 'button',
            text: '展开区域1',
            handler: function() {
                console.log('展开区域1 被点击了');
            }
        },
        {
            xtype: 'button',
            text: '展开区域2',
            handler: function() {
                console.log('展开区域2 被点击了');
            }
        }
    ]
});

在上面的示例中，我们定义了一个 ExtJS 面板，并在工具栏和可折叠区域中添加了两个按钮和一个展开区域。当我们点击工具栏中的按钮时，面板会显示相应的消息。当我们点击可折叠区域中的按钮时，相应区域会展开或收缩。

如果您希望更改工具栏按钮的显示顺序，可以使用 xtype 属性来定义按钮的类型，并将它们添加到 tbar 属性中。如果您想更改可折叠区域的顺序，可以使用 xtype 属性来定义按钮的类型，并将它们添加到 bbar 属性中。

希望这个回答能够解决您的问题。

相关搜索:Javafx监听面板中的控件更改单击按钮并使div隐藏在可折叠的折叠面板中可折叠面板的光亮固定位置在闪亮应用中更改选项卡面板中的下载按钮位置如何使用dbclick打开面板。我认为它应该取代“可折叠的:真的”。如何在php的管理面板中更改网站名称？如何在Xamarin.Forms中制作可折叠面板？如何在管理django面板的更改页面中更改路径如何在面板模式中更改引导模式的样式？如何将可折叠面板的状态保存到会话变量？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ExtJS初体验

最近公司的一个系统有用到Extjs框架，对于之前完全用JQuery的js插件的我来说，对Extjs的api并不熟悉。extjs是个富客户端框架，一般用来做后台管理系统，封装了非常多的控件，很庞大，很复杂，学习门槛高。jquery是一个前后台都可以用的框架，是对js的封装，js轻量级框架。没有封装任何控件，学习曲线小，程序员和前端必须要掌握的。这两天体验了一下，如图：

01

[翻译]Ext JS 教程-组件原

一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。所有的组件都是Ext.Component类的子类，它允许它们参与到自动的生命周期管理中去，包括实例化、渲染、设置尺寸和位置、还有去实例化。ExtJS提供了大范围的实用组件，而且任何组件都可以很容易的被扩展，去创建一个定制的组件。

03

[翻译]Ext JS 教程-MVC架构原

大规模的客户端应用程序常常难于去编写、组织机构和维护。随着你加入更多的功能，并且投入更多的开发人员，它们渐渐趋向于失去控制。ExtJS 4 带来了一种新的不仅仅能规整你的代码组织结构，而且能限制你要编写的代码数量的应用程序架构。

01

ExtJs二(实现登录)

在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境，本次课程主要是通过Ext组件来实现登录。

01

Extjs grid 组件

表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 text : String 列的标题默认是"" dataIndex : String 和Model的列一一对应的 sortable : true 可以整理,可以进行分类的 field: 可编辑字典配置重要方法 getStore 返回当前页面所关联的store 重要属性 ownerCt 组件所属的 Cont

08

Extjs mvc

MVC的模式，模型（Models）和控制器（Controllers） Model模型是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据 View视图是组件的一种，专注于界面展示 - grid, tree, panel 都是view Controlle

05

ExtJs九(ExtJs Mvc用户管理之一)

首先要做的是为用户信息创建一个模型，在Scripts\app\model目录下创建一个名为User.js的文件，然后添加以下模型定义代码：

02

对于Ext.data.Store 介紹与总结,以及对以前代码的重构与优化

对于Ext.data.Store 一直不是很了解,不知道他到底是干嘛的有哪些用处,在实际开发中也由于不了解也走了不少弯路, store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表. 　　由于刚学不是太懂,都是比葫芦画瓢,东搬西畴的去完成功能.程序思路都是自己想象的,对于rest方式的增删改查全是采用另外一种方式去实现的,最后研究发现其实,store都已经有了这些函数,根本不用自己去实现.下面看下以前所写的代码:这是model,store ,gridpanel var

05

ExtJs的api文档该怎么看

之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利，有童鞋在下面留言问extjs的API该怎么看？很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了，不知道怎么看api。那么这篇我就简单地说下extjs的api该怎么看。

02

jQueryMobile快速入门

jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。

02

最新jquery+easyui_api培训文档

1 Accordion（可折叠标签） 1.1 实例 1.1.1 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text

04

Extjs 项目中常用的小技巧，也许你用得着(3)

几天没写了,接着继续, 1.怎么获取表单是否验证通过: form.isValid()//通过验证为true 2.怎样隐藏列,并可勾选: hidden: true, 如果是动态隐藏的话： grid.g

03

FineUI控件集合

FineUI（开源版）基于 ExtJS 的开源 ASP.NET 控件库。 1 using System; 2 using System.Collections.Generic; 3 using System.Text; 4 using System.Collections.ObjectModel; 5 using System.Web.UI; 6 using System.Collections; 7 8 namespace FineUI 9 { 10 ///

07

jQuery EasyUI 详解

easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。

01

extjs 基础部分

创建对象的方法：　　　　使用new 关键字创建对象。　　　　　　new classname ([config]) 　　　　使用Ext.create方法创建。　　　　　　Ext.create(classname,[config]) 　　 new Ext.Viewport({}) 　　　　修改为Ext.create('Ext.Viewport',{}) 　　Ext.widget 或Ext.createWidget 创建对象　　　　使用Ext.ns 或者Ext.namespace 定义命名

ExtJS中xtype一览

基本组件： xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0) slider Ext.Slider 滑动条 progress Ext.ProgressBar 进度条 statusbar Ext.StatusBar 状态条，2.

05

sencha touch结合phonegap开发android下的文件浏览器

大家好，今天我给大家介绍一下通过两个新的html5技术sencha touch 和phonegap来开发android应用。首先，众所周知，sencha touch是结合了extjs和jquery mobile这两个javascript神器而开发的一个js库，其诞生的目的就是为了使webapp成为nativeapp，甚至使其更像nativeapp，通过html5，javascript，css能够大大地缩短开发移动应用的周期，而且html的灵活性和绚丽是java和object-c所不能媲美的。然而，想让h

05

[翻译]Ext JS 教程-开始使用 ExtJS 4

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器，从IE 6 到最新的谷歌Chrome。在开发期间，我们建议你使用下面这些浏览器，以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome，花点时间去下载它吧，然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器，仍然强烈建议你在开发的时候能有一个，因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器，建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache，你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ，你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK，把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿，查阅你web服务器的相关文档。Web 根路径的位置根据你操作系统的不同而有所不同，但是如果你使用的是 Apache，你一般会在：

Ø Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"

Ø Linux - "/var/www/"

Ø Mac OS X - "/Library/WebServer/Documents/"

一旦你已经完成安装，将浏览器导航至 http://localhost/extjs/index.html 。如果一个 ExtJS 4 的欢迎页面出现了，代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的，但是可以作为最佳实践指南考虑，以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构：

- appname

- app

- namespace

- Class1.js

- Class2.js

- ...

- extjs

- resources

- css

- images

- ...

- app.js
04

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

本文主要介绍了EasyUI中的一些组件和模块，包括表格、日历、表单、对话框、颜色选择器等。通过这些组件和模块，可以快速搭建出各种类型的应用程序。同时，还介绍了一些EasyUI中的实用工具，包括easyui-lang-zh、easyui-validate、easyui-component-extend等。这些工具可以帮助开发者更加灵活地开发和管理系统。

[翻译]Ext JS 教程-ExtJS 4中的数据包（Package）

数据包（data package）是用来加载和保存你应用程序中的数据的东西，包含41个类，但是其中有三个类比所有其他类更加重要——Model，Store和Ext.data.proxy.Proxy。这些类被几乎所有的应用程序用到了，并且受到了许多其他卫星类（satellite class）的支持。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭