带有子面板和圆环图的ExtJS面板布局

ExtJS是一种基于JavaScript的前端开发框架，它提供了丰富的组件和工具，用于构建复杂的用户界面。面板布局是ExtJS中一种常用的布局方式，可以将页面划分为多个子面板，并通过圆环图进行可视化展示。

子面板是面板布局中的一个组成部分，它可以包含各种其他组件，如表格、表单、按钮等。子面板可以根据需要进行嵌套，形成多层次的布局结构。

圆环图是一种图形展示方式，通过圆环的形式将数据进行可视化呈现。在ExtJS中，可以使用圆环图组件来展示各种数据，如统计数据、进度信息等。圆环图可以根据数据的不同进行颜色区分，以便更直观地理解数据的含义。

ExtJS面板布局的优势在于其灵活性和可扩展性。通过面板布局，可以将页面划分为多个独立的区域，每个区域可以独立进行布局和管理。这样可以更好地组织页面结构，提高用户体验。同时，ExtJS提供了丰富的组件和工具，可以轻松实现各种复杂的布局效果。

ExtJS面板布局适用于各种应用场景，特别是需要展示大量数据或复杂交互的场景。例如，管理后台系统、数据分析系统、仪表盘等都可以使用面板布局来实现。

腾讯云提供了一系列与ExtJS面板布局相关的产品和服务。其中，推荐的产品是腾讯云的云服务器（CVM）和云数据库MySQL（CDB）。云服务器可以提供稳定可靠的计算资源，用于托管和运行ExtJS应用程序。云数据库MySQL可以提供高性能的数据库服务，用于存储和管理应用程序的数据。

腾讯云产品介绍链接：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL（CDB）：https://cloud.tencent.com/product/cdb

相关·内容

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

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

Qt编写数据可视化大屏界面电子看板7-窗体浮动

窗体浮动的场景也比较多，用途也比较大，比如视频监控模块，有时候需要调整大小和位置，而不是作为dock嵌入到布局中，一旦嵌入到布局中，大小和位置都被布局接管了，只能任由布局使唤，按在地上摩擦的那种。所以窗体浮动独立出来以后，就可以当做单独的窗体使用了，八个方位任意调整大小，（做到这里，是不是想起来，很多人写的无边框窗体类，自己写代码实现边框的拉伸调整大小？原来Qt也内置类无边框调整大小的位置哈！）同时窗体可以拖动到任意位置，比如可以拖动到中间部位占领一个位置，能够调整到最佳的16:9的大小效果。此时的视频看起来就很爽了，这个效果其实是Qt内置的，我在自定义的标题栏中增加了双击浮动，再次双击最大化显示的功能而已。

Qt编写数据可视化大屏界面电子看板6-窗体打开关闭

二级窗体的打开与关闭，这个功能也很有必要，由于整个系统中各种模块数量窗体数量比较多，后期可能还会增加更多，在4K屏幕上可以显示很多的模块，但是有时候有些模块不想显示出来，就需要将该模块关闭掉，直接在二级窗体的标题栏上增加关闭按钮，可能会影响整体的布局，此时提供鼠标右键菜单来控制各个模块的开关，就非常爽了，QDockWidget上场，QMainWindow类中如果有Dock类，则会自动生成右键菜单，自动将加载的窗体的名称生成菜单，前面可以打钩表示开启，没有打钩表示关闭，默认都是开启的，saveState()函数也会记录各个模块最后的开启和关闭状态，所以在应用restoreState()函数时候也会自动控制模块的开关，不得不说Qt在这个功能点上是下足了功夫，封装的非常好非常棒顶呱呱！

Qt编写数据可视化大屏界面电子看板8-调整间距

在数据可视化大屏界面电子看板系统中，前期为了使用目标客户机，调整间距是必不可少的工作，QMainWindow中的QDockWidget，会默认生成布局和QSplitter调整宽高大小，鼠标移动到模块之间的缝隙处，鼠标指针会形成调整大小间距的那种，上下左右拉动就可以调整大小了。Qt的dock默认底部布局是被全部填充的，即一旦产生了底部Dock，则底部的左侧和右侧也属于底部布局，此时需要用setCorner方法来把这个布局给切掉，比如底部布局的左侧部分，可以切掉当做左侧布局使用，setCorner(Qt::BottomLeftCorner, Qt::LeftDockWidgetArea);底部布局右侧部分，可以切掉当做右侧布局使用，setCorner(Qt::BottomRightCorner, Qt::RightDockWidgetArea);这样左右两侧的布局就有更大的空间来放置窗体了，这样可能更适合大部分的应用场景。如果只是切掉了一部分，比如切掉了右侧，则左侧和中间部分当做底部布局，放置一个长条状的大窗体，也是非常美观的，主要看具体的窗体大小了。

Qt编写数据可视化大屏界面电子看板4-布局另存

布局另存是数据可视化大屏界面电子看板系统中的额外功能之一，主要用于有时候用户需要在现有布局上做个微调，然后直接将该布局另存为一个布局配置文件使用，可以省略重新新建布局重新来一次大的调整的工作，此功能主要是用到了配置文件的保存，另存为一个不同名字的配置文件即可，属于非常简单的功能，在代码上来讲，其实Qt的配置文件类QSettings使用起来不要太方便，不仅支持WIN的注册表的读取写入，还支持跨平台的INI文件，说白了其实就是个文本文件，个人比较喜欢用INI文件作为配置文件，这样一方面跨平台，本人平时主要在嵌入式linux上做开发，INI文件是做好的选择。

Qt编写数据可视化大屏界面电子看板11-自定义控件

说到自定义控件，我是感觉特别熟悉的几个字，本人亲自原创的自定义控件超过110个，都是来自各个行业的具体应用真实需求，而不是凭空捏造的，当然有几个小控件也有点凑数的嫌疑，在编写整个数据可视化大屏界面电子看板系统中，也用到了四五个自定义的控件，比如那个环形百分比图，多态进度条，合格率仪表盘，速度仪表盘等，这些控件在现有的类中是没有的，需要用QPainter这个牛逼的工具来绘制，类似于神笔马良似的，给我一个画笔，可以画出任意你想要的图形，好比我常说的心中有坐标，万物皆painter。

Qt编写数据可视化大屏界面电子看板5-恢复布局

恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用，很多时候不小心把现有布局拖动乱了，（当然如果不想布局被拖动改动，可以修改配置文件中的MoveEnable参数来控制，默认为真表示可以任意拖动布局，后期如果不想再被拖动可以设置为假。）人总归有不小心的时候，一旦不小心拖动了布局，则可以在软件没有退出之前恢复，鼠标右键菜单增加恢复布局这个功能就很有必要了，在保存布局以前，单击这个恢复布局，会自动恢复到当前布局的初始状态，如果不小心保存布局了，那就只能重新新建布局了，或者如果布局有备份的话就更好。恢复布局只能对当前布局进行恢复，而且是在未保存布局以前，以后就麻烦。

Qt编写数据可视化大屏界面电子看板9-曲线效果

为了编写数据可视化大屏界面电子看板系统，为了能够兼容Qt4和嵌入式linux系统，尤其是那种主频很低的，但是老板又需要在这种硬件上（比如树莓派、香橙派、全志H3、imx6）展示这么华丽的界面时，就必须用最传统的painter方法来实现所有的控件了，一开始使用的QChart来实现各个子控件，在使用过程中发现比较鸡肋，个人感觉QChart是所有的子模块中源码写的最烂的，本人把QChart的源码看了一遍，比如饼图控件，居然放置一个label用来显示对应的文字描述，都懒得用painter去绘制，而且还有大量的类型转换，这个就效率大大降低了，虽然效果上挺好的，比如继承自QAnimation类自定义的chart动画类，还有个整体换肤的，但是在大量数据展示的时候，卡的一逼，比QWT和QCustomPlot差很远，本人看过QCustomPlot的源码，尽管就一个文件，（其实作者那边肯定是多个文件的，只不过发布的时候合并成一个文件发布的，毕竟这样对于用户来说使用还是很方便的，就是阅读不方便，毕竟大部分人用来是直接使用的而不是研究代码的。）但是里边的代码质量非常好非常高，本人特别推崇用QCustomPlot来展示曲线和柱状图等，效率很高，本人亲自试过最大展示50W数据点，还可以。据朋友所说，可能QWT质量还要更高，我没有研究过QWT的源码，不予置评，估计有可能是的。

易混图表辨析，数据严谨、制表精准

👆点击“博文视点Broadview”，获取更多书讯在制作图表时，你是否会纠结于选择那种图表来展示自己的数据更合适呢？本文就来对易混图表进行一下解析，帮助大家精准制表！柱形图、条形图有什么不同柱形图和条形图都是用来体现数据对比的图表。在没有深入分析这两种图表时，人们容易混淆两者的应用场景，认为这两种图表的区别只不过是柱形的方向不同，即一个横向、一个竖向，其实不然。对这两种图表进行选择时，要从数据特征、展示工具等方面来进行分析，思路如图1所示。图1 柱形图和条形图的选择分析思路 1．考虑数据名

Qt编写数据可视化大屏界面电子看板3-新建布局

能够新建布局，也是数据可视化大屏界面电子看板系统中的必备功能之一，新建布局这样的功能一般做到右键菜单中，单击新建布局菜单，弹出输入框要求输入新的布局的名称，为了更符合国情，直接支持中文名称，保存成配置文件直接中文名称命名，这样方便用户理解，Qt5以来对乱码的问题解决的就比较好了，不像Qt4时代稍不留神就乱码了，Qt5只要保证源码文件utf-8编码基本上就很少遇到乱码问题了。新建布局必须要有个默认的窗体排列，Qt中的dock窗体，默认布局会以窗体的sizehint作为大小参照标准，也不一定是完全正确的，还跟窗体中的子控件有关系，不过这些都不影响布局以后重新从配置文件加载的布局，QMainWindow提供saveState()函数直接保存当前窗体的所有布局位置大小等信息到配置文件，至于配置文件的内容格式，那是人类无法理解的格式，反正我是看不懂，这些都没有关系的，你重新用restoreState()函数加载读取配置文件的信息时，会自动应用，这样就很爽很完美了。

‍ ‍笔者在前段时间的开发时，需要通过 Chrome DevTools来分析一个接口，调试中发现了控制台中的 copy 函数，非常的好用，进而发现了新世界，学习到了 Chrome 一些奇怪的调试技巧，这里总结分享给大家，希望能对各位的开发起到帮助！多图预警，建议在Wifi环境下阅读本文章。开发者工具函数 copy copy 函数可以让你在 console 里拿到任意的资源，甚至包括一些变量，在复制一些特别冗长的数据时特别有用，当复制完成后，直接使用 ctrl + v 即可。 copy 接受一个变量作为参

Qt编写数据可视化大屏界面电子看板系统

目前大屏大数据可视化UI这块非常火，趁热也用Qt来实现一个，Qt这个一站式超大型GUI超市，没有什么他做不了的，大屏电子看板当然也不在话下，有了QSS和QPainter这两个无敌的工具组合，借用几个Qt高手朋友的话来说，都是分分钟。在整个系统的编写过程中，发现数学知识真的还是蛮重要的，在重要的几个算法点上，需要多次用到二元一次方程才能搞定几个算法，比如如何分组绘制柱状图。

Qt编写数据可视化大屏界面电子看板10-改造QCustomPlot

为了抛弃对QChart的依赖，以及echart的依赖，（当然，后期也会做qchart的版本和echart的版本，尤其是echart的版本是肯定会做的，毕竟echart的效果牛逼的一塌糊涂，全宇宙最牛逼吧。）特意对QCustomPlot进行了大刀阔斧的改造，当然这个改造不是直接在源码上修改，这个就破坏了源码的完整性，说不定被QCustomPlot的作者知道了有种被QJ的感觉，我得改造是直接继承QCustomPlot中的部分类开始的，比如为了实现横向柱状图，特意继承自QCPItemRect类来实现的，包括了横向柱状图和横向柱状分组图。在这个横向柱状图的自动计算过程中，居然用到了十几年前学习的二元一次方程，自动计算数据和柱状图位置，给定两个数据点绘制矩形。

web中的树形结构【小结】

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

css布局使用

目录常用居中垂直居中水平居中垂直水平居中单列布局双列&三列布局 ---- 常用居中垂直居中单行文本垂直居中

child

.parent { line-height: 200px; } 图片垂直居中

![](image.png)

.parent { line-height: 200px; } .par

Qt编写数据可视化大屏界面电子看板2-配色方案

做完整个数据可视化大屏界面电子看板系统后，为了提升点逼格，需要提供好几套默认的风格样式以供选择，这样用户可以选择自己喜欢的配色方案来作为整个系统的颜色方案，去看了下市面上大部分的大屏电子看板系统，都是以蓝色为主，部分黑色，估计也许这就是大众的审美吧，那就在数据可视化大屏界面电子看板系统中也加入蓝色风格、深蓝色风格、黑色风格，三种，加上默认的紫色风格，共计内置4套风格选择，Qt的QSS是我见过的最牛逼的换肤控制样式界面颜色的东东，这个工具用好了，别提有多爽，直接qApp->setStyleSheet(qss);可以对整个应用程序换肤，如果自定义的控件定义了Q_PROPERTY的话，也会立即更改自定义控件的属性。

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中配置好了，因而不用设置目录。

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

数据采集是整个数据可视化大屏界面电子看板系统核心功能，没有数据源，这仅仅是个玩具UI，没啥用，当然默认做了定时器模拟数据，产生随机数据，这个可以直接配置文件修改来选择采用何种数据采集方法，总结了一下基本上会有这样几种数据源，timer-模拟数据 db-数据库采集 tcp-网络采集 http-post请求，大量的web会选择采用http作为post网络请求来获取数据，而对于本人来说，更喜欢用数据库作为数据源，这样可以避免很多扯皮的事情，比如请求出错或者得到错误的数据等，而数据库是死的，不涉及到其他任何程序的干扰，也不需要做任何对接，只要规范好数据库表和字段即可。

昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明: 1.展示方面通过增量渲染技术（4.0+）ECharts 能够展现千万级的数据量 2.针对移动端优化,移动端小屏上适于用手指在坐标系中进行缩放、平移。可选的 SVG 渲染模块让图表在移动端更加节省内存。 3.增加多种渲染方案,可实现跨平台使用,现有三种方案,可渲染Canvas、SVG（4.0+）、VML 的形式渲染图表。VML 可以兼容低版本 IE，SVG 使得移动端不再为内存担忧，Canvas 可以轻松应对大数据量和特

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

带有子面板和圆环图的ExtJS面板布局

1. 需求

1.1 网页浏览器

1.2 Web 服务器

1.3 Ext JS 4 SDK

2. 应用程序结构

2.1 基本结构

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐