[ExtJS6]ResponsiveColumn-自适应列布局

oscar999

于 2019-04-02 22:18:08 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： 130-Web语言 Ext JS开发大全文章标签： Ext JS6 自适应列布局 Responsive

本文链接：https://blog.youkuaiyun.com/oscar999/article/details/88982737

130-Web语言同时被 2 个专栏收录

219 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

Ext JS开发大全

190 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了在ExtJS6中实现响应式列布局的方法，包括在app.json中引入ux模块，定义自适应列组件，以及创建scss文件和目录。详细步骤包括在app.json添加ux扩展包，定义位于经典主题src&viewmain目录下的自适应列组件，并创建scss文件Main.scss以实现布局调整。然而，尝试使用单独文件测试该功能未能成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 在app.json加上ux模块

ResponsiveColumn 位于ux的扩展包中，所以需要导入。
编辑： app.json

"requires": [
    "font-awesome",
    "ux"
],

默认产生的只有font-awesome

2. 定义自适应列的组件

这里位于项目的classic\src\view\main目录下

Ext.define('Osxm.panle.MyResponsivePanel', {
	extend : 'Ext.panel.Panel',
	xtype : 'myResponsivePanel',
	// height:'100%',
	scrollable : 'y',
	width:'100%',
	requires : [ 'Ext.ux.layout.ResponsiveColumn' ],
	layout: 'responsivecolumn',
	items : [ {
		xtype : 'panel',
		height : 100,
		userCls : 'big-50 small-100',
		title : 'Panel 1'
	}, {
		xtype : 'panel',
		height : 100,
		userCls : 'big-50 small-100',
		title : 'Panel 2'
	} ]
});