开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

(extjs 6.0+)面板如何动态修改布局

在(extjs 6.0+)中，可以通过修改面板的布局来实现动态修改布局的效果。以下是一种常见的方法：

首先，确保你已经创建了一个面板对象。可以使用Ext.create()方法或者通过继承Ext.panel.Panel类来创建一个面板。
在面板对象中，可以使用setLayout()方法来设置面板的布局。该方法接受一个布局对象作为参数，用于指定面板的布局方式。
在设置布局之后，可以使用add()方法向面板中添加子组件。子组件可以是其他面板、容器或者其他任何ExtJS组件。
如果需要动态修改布局，可以通过调用面板对象的setLayout()方法来改变面板的布局方式。可以传入一个新的布局对象作为参数。

下面是一个示例代码，演示了如何动态修改(extjs 6.0+)面板的布局：

// 创建一个面板对象
var panel = Ext.create('Ext.panel.Panel', {
    title: '面板示例',
    width: 400,
    height: 300,
    layout: 'fit', // 设置初始布局方式为fit布局
    renderTo: Ext.getBody()
});

// 创建一个按钮，用于触发修改布局的操作
var button = Ext.create('Ext.button.Button', {
    text: '修改布局',
    handler: function() {
        // 创建一个新的布局对象
        var newLayout = Ext.create('Ext.layout.container.HBox', {
            align: 'stretch',
            pack: 'start'
        });

        // 修改面板的布局
        panel.setLayout(newLayout);
    }
});

// 将按钮添加到面板中
panel.add(button);

在上面的示例中，初始布局方式为fit布局，即子组件会自动填充整个面板。当点击按钮时，会创建一个新的HBox布局对象，并将其设置为面板的布局。这样，面板的子组件会按照水平方向进行排列。

需要注意的是，以上示例中的布局对象只是一种示例，实际应用中可以根据需求选择合适的布局对象。同时，还可以根据具体情况添加更多的子组件或者进行其他操作。

关于ExtJS的面板布局和相关的组件，可以参考腾讯云的ExtJS文档和示例：

ExtJS文档：https://docs.sencha.com/extjs/6.0.0/
ExtJS面板布局：https://docs.sencha.com/extjs/6.0.0/classic/Ext.layout.container.Panel.html
ExtJS布局示例：https://examples.sencha.com/extjs/6.0.0/examples/classic/layout-browser/layout-browser.html

希望以上信息能够帮助你理解(extjs 6.0+)面板如何动态修改布局。如果还有其他问题，请随时提问。

相关搜索:C#：如何修改动态创建的控件的属性，如面板等 ExtJS 6如何在图表上修改日期 ExtJS:如何在移动浏览器上实现面板全屏 wxPython如何制作动态滚动面板在ExtJs中动态重新加载面板如何为动态布局添加样式如何修改Django CMS管理面板？如何动态创建移动面板如何动态处理多个动态嵌套标签布局片段？如何动态更改Extjs中的iconAlign？

相关搜索:

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

有帮助

没帮助

相关·内容

ExtJs二(实现登录)

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

01

ExtJs二(实现登录)

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

02

MoneyPrinterPlus:AI自动短视频生成工具,赚钱从来没有这么容易过

项目地址：https://github.com/ddean2009/MoneyPrinterPlus

01

[翻译]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

ExtJs学习笔记(11)_Absolute布局和Accordion布局

ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试，在最新的Firefox3下，部分功能好象有点问题)，今天我们来学习二种最基本的布局 1.Absolute 布局：这种最容易理解，直接用x,y值来绝对定位组件 2.Accordion布局：Accordion意为"手风琴"，即最终效果可以象手风琴那样拉来拉去，说白了，就是类似QQ面板的功能下面通过示例代码观察一下效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

06

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

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

03

Coolite Toolkit非常棒的控件

Coolite Toolkit非常适合做web应用程序的开发，它提供了很多专业的Asp.net输入/验证/显示控件，和页面布局的框架，同时完全支持ajax，因为它是所有的组件是居于ExtJS上封装出来，让开发人员在可视化的设计器内进行方面的属性配置。

03

初识Ext.NET

以前从没想过会用到ExtJS，总是对它有着一种反感：认为脚本资源大，执行脚本多，性能差等等。最近因为一个项目使用到了，就用上了。相对JQuery，ExtJS没有那么方便灵活，但是其界面美观，功能实用，可以节约不少开发时间。玩ExtJS，就感觉是在玩配置，也许Java程序员会习惯些。熟悉那些配置无疑也是一件麻烦而且棘手的事情，稍不留心，就得为自己的失误埋单。虽然网上有些设计器，但是大都满足不了需求。后来，在网上找到一款还不错的框架——Ext.NET。这对于.NET开发人员来说，能节省不少时间。至少带智能提示的xml配置怎么也要比写js要顺手方便多了。而且其还是免费开源的。不过在使用过程中，也没有那么顺畅。

06

css vh使用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

01

Android项目实战（五十六）：获取WebView加载的url的请求错误码

例如需求，我有一个WebView 加载一个url, 该url对应的网页本身自带下拉刷新，但是网页本身会有出现400 500 等异常请求错误码

02

Android获取WebView加载url的请求错误码【推荐】

例如需求，我有一个WebView 加载一个url, 该url对应的网页本身自带下拉刷新，但是网页本身会有出现400 500 等异常请求错误码

02

wince版ffmpeg音视频播放器

6.支持S3C6410 H264、H263、VC-1/WMV3、Mpeg4 480P 30fps播放

03

UEditor文档-JSP 使用说明

UEditor 1.4.0 版本对之前的配置方式进行了简化，具体请参见：后端请求规范，为了适应这次升级，JAVA 后台也进行了重写，跟之前的版本差别较大，升级的用户注意阅读本文档。

02

pointer-events用法

近来发现一个新的css属性，它是一个于javascript相关的属性：pointer-events。直译为指针事件，当把值设置为none后，他有如下相关特性。

03

MoneyPrinterPlus:AI自动短视频生成工具,赚钱从来没有这么容易过

项目地址： https://github.com/ddean2009/MoneyPrinterPlus

02

Varient：一个多用途的新闻和杂志系统，可上传视频/音频等

说明：Varient是一个多用途的新闻和杂志系统。它具有干净的代码，响应式和用户友好的设计。您可以使用其强大的管理面板来管理网站中的几乎所有内容。多用户多作者，所有作者都有自己的面板来管理自己的文章，并且还可以上传视频和音频等。而且系统还具有RSS聚合器系统，快速和易于使用，功能很强大。

00

EXT.NET高效开发（一）——概述

之前就有想法说说这方面，直到看到我上一篇博客《EXT.NET复杂布局（一）——工作台》的回复：

03

[翻译]Ext JS 教程-布局和容器原

布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每一个组件的尺寸和位置。这个操作手册包含开始使用布局的基础操作。

01

Java基础-day01-代码题

第一题：分析以下需求，并用代码实现 1.定义一个HelloWold类 2.在类中定义主方法 3.在主方法中使用输出语句在dos控制台打印HelloWorld 打印结果如：HelloWorld 4.在案

06

ExtJS初体验

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

01

一周新姿势第2期

Keeping a low profile is to live in your own world.High profile is to live in other people's world.

03

使用插件，强大的时间选择控件 My97DatePicker

本文只是把官网介绍的该插件的特色列出来，并有图为证。个人使用到的最大特色就是对时间的自定义限制。具体的使用方法以及插件详细API请查看官网： http://www.my97.net/demo/index.htm

03

ExtJs七(ExtJs Mvc创建ViewPort)

在4.1的时候，要先创建一个扩展于Ext.app.Application的类，然后用create创建它的实例来开始应用程序的。而在4.1.1，则可直接调用application方法开始执行应用程序，简化了。调用application方法，其参数是一个配置对象，主要配置项有以下三个： name：用来定义应用程序的名称，在这里是ExtMVCOne。 appFolder：应用程序的路径，这里是scripts/app autoCreateViewport：默认值为false，在这里要设置为true，让它自动加载\Script\app\View目录下的Viewport.js文件。因为目录已经在Loader中配置好了，因而不用设置目录。

04

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

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

01

checkbox选中和不选中 jqu_jquery checkbox 选中不选中

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

03

Ext JS 4预览：更快、更简单、更稳定

Ext JS 4预览版：更快、更简单、更稳定上周在SanFrancisco看，在哪里，我们很激动来自全球的500多Sencha开发者（放到以前应该叫ExtJs开发者）。这个会议对于每个人都是个巨大的成功，但是对于我来说更大的精彩是下面我花一个小时为你介绍ExtJs4。当我们正处理会议的视频，我想向你介绍我们的旗舰产品ExtJS4.0下一个阶段的发展方向的最激动忍心的一些特性。令人激动的新特性让我们从一些正在添加到ExtJS4.0中令人激动的新特性开始，这虽然不是一个详尽的清单，但却包含即将到来的

06

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用：一是标签页内的图片管理，一是文章内容编辑时嵌套到插入图片的窗口内。因而，将图片管理做成一个扩展比较方便。当然，做成MVC模式也行，不争论，不讨论。

03

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用：一是标签页内的图片管理，一是文章内容编辑时嵌套到插入图片的窗口内。因而，将图片管理做成一个扩展比较方便。当然，做成MVC模式也行，不争论，不讨论。

03

web中的树形结构【小结】

最近在做一个项目，是一个b/s架构的，在项目中，用到了树形结构，即如图1所示的结构。

02

狐友网上下载了一个源代码，竟然大胆用VFP换掉JAVA

我是在网上下载了一个较好的EXTS框架，JAVA+EXTJS，大家有空可以利用猫老师培训知识改造为VFP+EXTJS通用框架。

02

ExtJs一(Hello World)

本文原文链接地址 http://aehyok.com/Blog/Detail/48.html

02

ExtJs一(Hello World)

本文原文链接地址 http://aehyok.com/Blog/Detail/48.html

01

后台管理UI的选择

最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个：

02

关于Android 6.0权限的动态适配详解

Android6.0代号棉花糖。尽管是在15年I/O大会上Google被正式发布的了。但是看看大多数人的项目中大家的 targetSdkVersion 是不是还都用的22。大家都认为6.0+的市场占有率还没那么高。那么就请看谷歌2017年9月份公布的版本分布图。

03

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

怎么来实现它呢？我们首先写一个简单的页面，实现鼠标移入移除或者点击显示隐藏效果。

00

不可错过的几款GitHub开源项目

工作之余或者周末感觉无聊？不知道干什么？想继续提高技术，但是不知道做什么的同学，看过来，不妨利用闲暇时间来撸几个 GitHub 上还不错的开源项目，本文推荐的开源项目比较适合新手、及对MVP设计模式不太熟练的同学练习之用，下面逐一进行简单介绍。

02

前端框架你究竟选什么

在做web开发的时候难免遇到一个问题，那就是，选择什么样的框架。下面把前端的框架简单的列一下。 1、flex Apache基金会今天发布了Flex 4.8版本，这是Adobe将Flex捐献给Apach

06

指纹支付——支持QQ，微信，支付宝

前言手机有指纹，却不能指纹支付？是不是有种被坑的感觉？这款应用完全满足你的需求。软件介绍 Xposed-Fingerprint-pay是一款让微信和支付宝在支持指纹识别的手机上使用指纹支付的X

08

EXT基础

–Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

04

前端项目运行常见问题

可能是node.js的版本和node-sass的版本不合,下一个符合node-sass版本的node.js

02

SwiftUI - 百行代码变十行，Swift再创辉煌

苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕。在这场大会上除了「史上最难看 Mac 主机」、首次出现的iPadOS以外，我们还终于可以对饱受诟病的iTunes说再见了。而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。

04

动态加载 ExtJS 类库

ExtJS 是一个非常优秀的 JS 框架，由于 ExtJS 自身非常庞大，用于开发测试的 ext-all-debug.js 文件达到了 3.24M ，如果是再加载带注释的 ext-all-debug-w-comments.js 则更是达到了 6M ，可以说是非常庞大了，因此动态加载 ExtJS 是很有必要的，接下来就介绍如何对 ExtJS 做动态加载。

02

EXT表单

var doSearch=function() { //Ext.Msg.alert('提示','操作已经成功'); location.href ='d.php'; }

03

基于QT的webkit与ExtJs开发CB/S结构的企业应用管理系统

一：源起 1.何为CB/S的应用程序 C/S结构的应用程序，是客户端/服务端形式的应用程序，这种应用程序要在客户电脑上安装一个程序，客户使用这个程序与服务端通信，完成一定的操作。 B/S结构的应用程序，是浏览器/服务端形式的应用程序，这种应用程序不用在客户端部署任何东西，客户只需要通过浏览器与服务端通信，来完成一定的操作。两种类型的程序优缺点对比：对比内容 C/S结构的应用程序 B/S结构的应用程序部署较困难方便升级

08

Skywalking系列博客2-Skywalking使用

Skywalking有多种使用方式，目前最流行(也是最强大)的使用方式是基于Java agent的。

02

一个基于Laravel5的个人博客系统：Lablog搭建教程

说明：之前有同学投稿想要个Lablog宝塔教程，拖到现在才想起来，这里就发个搭建教程，Lablog博客基于最新PHP框架Laravel 5.7搭建而成，由OLAINDEX程序作者制作，前后基于adminlte响应式页面布局，适配PC、平板、手机；后台支持QQ、微博、github第三方登录；集成优秀的Markdown文本编辑器，支持图片拖拽上传；后台基于路由搭建完整的权限控制系统，支持多后台用户。且集成SM.MS上传接口，方便用户上传图片，作者也更新很勤快，对该类博客程序有兴趣的可以搭建个玩玩。

04

使用 Hexo 搭建个人独立博客

一直在博客园写博客，已经写了几年了，博客园也挺好用的，用户多，阅读文章的也多，互动也多。但是自己总有一个想搭建一个独立博客的想法，作为一个 Coder，当然是想自己写，最终由于拖延症始终没写得出来。hexo 是一直知道的可以搭建博客的工具，但是一直没尝试过，最近试了一下，发现挺好用，并且搭建了我自己的独立博客，我将会写几篇文章分享我搭建的过程。

01

Android适配全面总结（一）----屏幕适配

版权声明：本文为博主原创文章(部分引用他人博文，已加上引用说明)，未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad4d

04

二十分钟学会Scratch图形化编程

Scratch是麻省理工学院开发的供儿童或者初学者学习编程的开发平台。其通过点击并拖拽的方式，完成编程，可以使儿童或者成人编程初学者学习编程基础概念等。Scratch是一款积木式图形编程软件。

02

SwiftUI - 百行代码变十行，Swift再创辉煌

这种声明式的方式甚至允许使用复杂的功能，如动画（animation）。只需要几行代码，即可添加动画在任何控件上，并且可以使用易于调用的特效。在运行时，SwifthUI 会自行控制创建流畅动作的所有步骤，并且可以解决程序冲突，保证 app 稳定运行。动画特效变得如此容易，我们可以发掘使 app 更加灵动的方式。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭