[Ext JS 7 ]7.5 自适应配置 - Responsive Configs

最新推荐文章于 2022-04-06 09:59:55 发布
最新推荐文章于 2022-04-06 09:59:55 发布
阅读量510 收藏 1
点赞数
分类专栏： Ext JS开发大全 文章标签： Ext JS Responsive
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/106366528
版权
本文介绍了Ext JS 7中响应式配置的使用，包括通过Mixin和plugins方式实现自适应，并展示了如何根据屏幕尺寸动态改变组件标题。同时，详细讲解了自适应布局的实现，利用Ext.ux.layout.ResponsiveColumn布局类，实现在不同屏幕宽度下调整组件子元素的排列方式。通过具体的实例演示了导入ux包、定义自适应列组件和配置scss文件的过程，以达到屏幕宽时1行4列，窄时1行2列的效果。
摘要由CSDN通过智能技术生成

文章目录


关于自适应布局的概念及基础参考以下章节：
12.4 Responsive自适应网页设计与ResponsiveColumn自适应列实例

Ext JS的自适应支持

Ext JS 从5.x版本开始引入自适应配置（responsiveConfig）。启用自适应配置有两种方式：

  1. 使用混合（Responsive Mixin）
  2. 使用插件配置（plugins）
Mixin方式配置自适应示例

这里的示例是： 定义一个面板子类型， 面板的标题根据设备屏幕的宽度自动变化，当屏宽大于600时，使用长标题；小于600时，使用短标题，
示例的效果对比如下：
在这里插入图片描述
在这里插入图片描述
视图子类定义如下：


                

                
                
        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  oscar999
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
[Ext JS 7]7.4 样式主题(Theme)

				
			

			

				

					oscar999的专栏
				

				

					05-29
					
					1104
					
				

			

		

		

			
				
Theming 样式

集中、统一修改元素样式
可以在不同的应用中重用.
框架本身默认提供的主题样式包括：


构建自定义的Theme
Theme是Cmd包的一种类型， 在Ext JS中， 所有类型的包都可以包含JS、CSS以及资源文件， 主题包包含了这些类型的文件。
创建工作区（Workspace）
工作区是Sencha Cmd将应用程序（以及主题或其他代码包）与Ext JS框架的共享副本连接的方式。 如果仅要构建一个应用程序，则Sencha Cmd可以将工作空间和应用程序合并在一个目录中。
工作区可以给

			
		

	



                

              
                



	

		

			

				
					
[Ext JS 7]7.2 事件（Event）

				
			

			

				

					oscar999的专栏
				

				

					05-25
					
					461
					
				

			

		

		

			
				
文章目录监听事件添加监听移除监听监听的范围只监听一次，使用single配置项缓冲配置 buffer触发事件的方法 fireEvent()监听DOM事件事件归一化
监听事件
一个组件可以监听多个事件，比如
            Ext.create('Ext.Button', {
                renderTo: Ext.getBody(),
                text: 'My Button',
                listeners: {
          

			
		

	



                


  
              

                


	

		

			

				
					
【翻译】使用Ext JS设计响应式应用程序

				
			

			

				

					weixin_34000916的博客
				

				

					07-10
					
					98
					
				

			

		

		

			
				
原文：Designing Responsive Applications with Ext JS在当今这个时代，用户都希望Web应用程序无论在形状还是大小上，既能在桌面电脑，也能在移动设备上使用。使应用程序能适应不同的需求渐成趋势。幸运的是，Ext JS 5提供了所有支持应用程序以符合任何屏幕尺寸、形状和方向的工具。responsiveConfig概述要让Ext JS 5支持新的平板电脑，需要...

			
		

	





	

		

			

				
					
ext js 7.0.0

				
			

			

				

					06-22
				

			

		

		

			
				
ext js 7.0.0 Ext JS提供了业界最全面的高性能，可定制的UI窗口小部件集合，包括HTML5网格，树，列表，表单，菜单，工具栏，面板，窗口等。Ext JS在现代浏览器上利用HTML5功能，同时保持与旧版浏览器的兼容性和功能。使用这些示例为台式机，平板电脑和智能手机构建跨平台应用程序。

			
		

	



		

			
		



	

		

			

				
					
Sencha Cmd 优化 Sencha Ext JS/7.5.12

				
			

			

				

					控件与插件之大全
				

				

					04-06
					
					520
					
				

			

		

		

			
				
使用 Sencha Cmd 优化 Sencha Ext JS 应用程序
Sencha Themer - 概览
Sencha Cmd 是构建 Ext 应用程序的基石
Sencha Cmd 是构建 Sencha Ext JS 和 Sencha Touch 应用程序以及优化 ExtReact 应用程序的基石。Sencha Cmd 提供了一整套生命周期管理功能，例如脚手架、代码压缩、生产构建生成等，以补充您的 Sencha 项目。



通过不断扩展的命令行选项列表，从代码生成到本地打包，Sencha Cmd 可以

			
		

	





	

		

			

				
					
react-responsive-masonry:使用CSS Flexbox构建的React响应式砌体组件

				
			

			

				

					05-02
				

			

		

		

			
				
React响应砌体  轻量级的React响应式砌体组件，使用CSS Flexbox构建。 入门  您可以通过npm或yarn命令从...https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js 演示版 参见 例子 用法 如果

			
		

	





	

		

			

				
					
美容整形医院云优自适应模板-云优CMS

				
			

			

				

					07-05
				

			

		

		

			
				
该模板的核心特性在于其自适应设计，它采用了响应式网页设计（Responsive Web Design, RWD）技术，可以根据用户设备的屏幕尺寸自动调整布局，确保网站在任何屏幕大小下都能呈现出清晰、美观且易于阅读的效果。...

			
		

	





	

		

			

				
					
react-responsive:React中CSS媒体查询-用于响应式设计等

				
			

			

				

					04-05
				

			

		

		

			
				
$ npm install react-responsive --save 用法示例 带钩 Hooks是8.0.0中可用的新功能！  import React from 'react' import { useMediaQuery } from 'react-responsive' const Example = ( ) => {  const ...

			
		

	





	

		

			

				
					
vue-responsive-grid-layout:Vue Repsonsive网格布局

				
			

			

				

					05-17
				

			

		

		

			
				
VueResponsiveGridLayout 1.2.0  VueJS的响应式可拖动和可调整大小的网格布局。... import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout' Vue.component

			
		

	





	

		

			

				
					
深入浅出Ext.JS （7）

				
			

			

				

					04-03
				

			

		

		

			
				
ext js是一种用javascript编写的功能强大的ajax框架，可用于开发绚丽多彩的富客户端ajax应用。本书是ext js领域内的经典著作，由浅入深、循序渐进地对ext js各方面的知识进行了全面而系统的阐述。全书由一个可以引领读者快速入门的“hello world”示例开篇，紧接着对ext js的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解，最后以一个完整的 ext应用结束全书。每个知识点都配有相应的示例，可操作性极强。
分卷7 http://download.csdn.net/source/3156430
分卷6 http://download.csdn.net/source/3156424
分卷5 http://download.csdn.net/source/3156418
分卷4 http://download.csdn.net/source/3156411
分卷3 http://download.csdn.net/source/3156399
分卷2 http://download.csdn.net/source/3156393
分卷1 http://download.csdn.net/source/3156384

			
		

	





	

		

			

				
					
EXTJS破解版本

				
			

			

				

					07-21
				

			

		

		

			
				
EXTJS破解版本EXTJS破解版本EXTJS破解版本EXTJS破解版本EXTJS破解版本EXTJS破解版本

			
		

	





	

		

			

				
					
responsive.js:一个使网站具有响应能力的库

				
			

			

				

					04-30
				

			

		

		

			
				
响应.js
一个使网站具有响应能力的简单库。
该库所做的只是在这组标记中隐藏或显示HTML：
 < horizontal>
    <!-- Content for horizontal screen orientation -->
</ horizontal>
< vertical>
    <!-- Content for vertical screen orientation -->
</ vertical>
< mobile>
    <!-- Content for mobile -->
</ mobile>
< desktop>
    <!-- Content for desktop -->
</ desktop>
信息
除了标签之外，还可以使用常量布尔值isMobile和isDesktop 。 我认为这些是不言自明的。 “水平”和“垂直”条件在调整窗口大小时

			
		

	





	

		

			

				
					
Eclipse添加Spket插件实现ExtJs智能提示-附件资源

				
			

			

				

					03-05
				

			

		

		

			
				
Eclipse添加Spket插件实现ExtJs智能提示-附件资源

			
		

	





	

		

			

				
					
ext-6.0.0开源版

				
			

			

				

					11-14
				

			

		

		

			
				
Ext JS 6正式版的GPL版本 extjs6.0

			
		

	





	

		

			

				
					
[Ext JS 7]7.6 内存泄露及处理

				
			

			

				

					oscar999的专栏
				

				

					05-27
					
					430
					
				

			

		

		

			
				
文章目录内存泄漏概念Ext JS的内存管理内存分配层次内存清除层次侦测泄漏应用层级泄漏框架层级泄漏常见代码泄漏模式和解决方案遗漏基类清除没有删除DOM监听保留了对象的引用保留了闭包的引用持续创建有负面效果的实例清除缓存中的所有注册
内存泄漏概念
内存泄漏的粗略定义是指执行一部分代码之后，内存无限制的增长。精确的可以从以下角度看：

重复直到耗尽
假设有一台具有64Gb可用内存的开发机。 一段代码运行5次。每次运行后，内存使用量每次都会增加1Mb，并且永远不会回收。因为该程序仅使用一小部分可用内存，这种场景还

			
		

	





	

		

			

				
					
【翻译】Ext JS 7早期访问版

				
			

			

				

					黄灯桥的专栏
				

				

					07-16
					
					2611
					
				

			

		

		

			
				
Ext JS 7.0早期访问版已经发布了。该办法包含了许多增强功能和令人兴奋的新功能，而其中的重点是增强现代工具包。想了解更多与此版本有关的信息，请继续往下阅读。

			
		

	





	

		

			

				
					
[Ext JS 7]ClassRequire错误解决

				
			

			

				

					oscar999的专栏
				

				

					12-03
					
					412
					
				

			

		

		

			
				
Ext JS 使用sencha app watch进行实时开发、编译。
使用如下方式导入其他需要的类：
    requires: [
        'Ext.chart.CartesianChart',
        'Ext.chart.axis.Category'
    ]

但是在编译时出现如下错误：

需要在app.json中导入对应的模块：

    "requires": [
...

			
		

	





	

		

			

				
					
[Ext JS 7]的开发模式

				
			

			

				

					oscar999的专栏
				

				

					05-06
					
					740
					
				

			

		

		

			
				
文章目录开发模式的分类及演进开发模式一： 将Ext JS作为库JS源码编译结果样式文件编译结果开发模式二： 将Ext JS作为框架，开发Ext JS类型的项目开发模式的选择
开发模式的分类及演进
早期的Ext JS类似于JQuery， 是一个前端的组件库， 开发方式是导入一个JS的文件和一个CSS的样式文件。随着前端框架的发展，Ext JS也逐步向框架层级靠近，提供了类似前端流行的 NPM（模块管...

			
		

	





	

		

			

				
					
table-responsive

					
最新发布

				
			

			

				

					07-23
				

			

		

		

			
				
`table-responsive` 是一种CSS类，通常用于HTML表格（table）的设计中。当应用于一个表格上，它使得表格在小屏幕设备如手机和平板电脑上具备响应式布局。当窗口宽度减小时，原本横向排列的表格会自动变为垂直滚动，这样用户可以更方便地浏览内容。添加 `class="table-responsive"` 到 `<table>` 标签上，就像这样：

```html
<table class="table-responsive">
  <!-- 表格内容 -->
</table>
```

这样做有助于适应不同设备的视口大小，提供更好的移动端用户体验。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
oscar999

			
送以玫瑰，手留余香

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值