基本组件： 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.
一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。所有的组件都是Ext.Component类的子类，它允许它们参与到自动的生命周期管理中去，包括实例化、渲染、设置尺寸和位置、还有去实例化。ExtJS提供了大范围的实用组件，而且任何组件都可以很容易的被扩展，去创建一个定制的组件。
在进行安装开发的时候我们经常会对项目进行不同业务逻辑处理分包，例如专门处理网络、数据库、业务逻辑代码的，如果我们不分包则所有东西写在一起，势必在开发过程中会浪费很多时间在寻找文件上，而分包的思想源于模块化，例如一些utils类，专门放到一个包下面，这样在使用的时候就能很快找到。节省开发时间，降低后期维护成本，那么组件化是什么？
最近在整理Ext JS的模板和组件，在参考《Ext JS权威指南》,《Ext JS Web应用程序开发指南》，《Ext JS API》等相关书籍后才写下这篇《Ext JS模板与组件基本知识思维导图》，由于篇幅较长，所以必须肢解与各位分享。想要《Ext JS模板与组件基本知识思维导图》原文档的可以与我联系。
初始化工作开始于组件的诞生，所有必须的配置设定、事件注册、预渲染处理等都在此时进行。
简介 什么是组件化？ 项目发展到一定阶段时，随着需求的增加以及频繁地变更，项目会越来越大，代码变得越来越臃肿，耦合会越来越多，开发效率也会降低，这个时候我们就需要对旧项目进行重构即模块的拆分，官方的说法就是组件化。 组件化带来的好处 那么，采用组件化能带来什么好处呢？主要有以下两点： 1、现在Android项目中代码量达到一定程度，编译将是一件非常痛苦的事情，一般都需要编译5到6分钟。Android Studio 推出 instant run 由于各种缺陷和限制条件（比如采用热修复tinker）一般情况
getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。 (与getElementById是一个效果)
上一篇博客 【Android 组件化】使用 Gradle 实现组件化 ( Gradle 变量定义与使用 ) 中 , 在顶层的 build.gradle 中定义了相关参数变量 ;
布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每一个组件的尺寸和位置。这个操作手册包含开始使用布局的基础操作。
–Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。
组件模型在Ext1.x中已经引入了，但在框架中并没有得到全面的整合。2.0以后组件得到了很大的提高和改进，成为了框架的里最基础的一个类。组件对象模型为组件的创建、渲染、事件处理、状态管理和销毁提供了统一的模型。Ext内置的组件都具备以上这些特征。 创建 组件会将一个基础构造器连同配置传入到子类中。函数initComponent用于提供制定的构造器逻辑，只要在继承链上的某一个子类实现便可，所有的组件都遵从这种方式。此时的子类就可在initComponent中对其设置相关的属性，实现具体的功能。
最近公司的一个系统有用到Extjs框架，对于之前完全用JQuery的js插件的我来说，对Extjs的api并不熟悉。extjs是个富客户端框架，一般用来做后台管理系统，封装了非常多的控件，很庞大，很复杂，学习门槛高。jquery是一个前后台都可以用的框架，是对js的封装，js轻量级框架。没有封装任何控件，学习曲线小，程序员和前端必须要掌握的。 这两天体验了一下，如图：
Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性、工具和改进。以下是一些亮点： • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext JS 和 Sencha Touch的所有组件, 只用一个代码基即可，满足所有设备的用户体验。通过使用共同的核心，SenchaTouch UI 组件支持了MVVM、数据绑定、甚至鼠标点知的支持，如果你想在桌面使用。特别在如图标、网格等内容上也有所增强。 •Sencha枢轴网格透视网格插件，使您能够快速和容易的Ext J
最近因为业务需求变更，有考虑采用组件化架构进行开发，这方面我之前没有接触过。关于组件化的文章很多，各方大神更是提出了各种的组件化方案，我也看了很多相关文章。但是学习新东西看的再多，不如动手做一次，先不考虑复杂的东西，先动手做个简单的Demo更有助于理解组件化的思想。废话不多说，直接动手开码。
默认情况下，用户无法通过点击拖拉选择界面上的文本 解决方案 Ext.Component组件可以使用userSelectable配置项，设置为‘text’，即可实现此组件中文本的点选 注意：如果设置为true，等效于设置样式 user-select: auto; ，将根据浏览器默认属性进行选择 { xtype: 'grid', userSelectable: 'text' } 也可以传入对象设置子元素的样式 userSelectable: { element: true, // all
MVC的模式，模型（Models）和控制器（Controllers） Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据 View视图 是组件的一种，专注于界面展示 - grid, tree, panel 都是view Controlle
注：子元素必须指定id属性和data-ref属性，并通过childEls属性暴露，才可以通过组件的对应属性获取到对象引用。
ExtJS 是一个非常优秀的 JS 框架， 由于 ExtJS 自身非常庞大， 用于开发测试的 ext-all-debug.js 文件达到了 3.24M ， 如果是再加载带注释的 ext-all-debug-w-comments.js 则更是达到了 6M ， 可以说是非常庞大了， 因此动态加载 ExtJS 是很有必要的， 接下来就介绍如何对 ExtJS 做动态加载。
在过去的四年，ExtJs代码库已经进化了，新组件被加进来，编码标准也改进了。在这个过程中，为了重构旧组件有必要经常追溯回去以保证他们也被改进。 在ExtJS4之前渲染组件没有标准的方式。在过去，Panels的展现过程是，首先创建他们需要的元素，并把他们直接添加到dom上，然后获取他们的引用。另一方面，利用按需autoEl DomHelper配置并包装对应的Html标签片段。在页面上表格经常被用作模板来构建他们的标记。 ExtJS4，我们的目标是统一这些方法为一个标准的方法，那就是XTemplate和Do
在EXT中，当我们要为按钮点击添加处理function的时候，可以看到一般人的实现分成2类：
之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利，有童鞋在下面留言问extjs的API该怎么看？很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了，不知道怎么看api。那么这篇我就简单地说下extjs的api该怎么看。
原文地址：http://docs.sencha.com/extjs/4.2.5/#!/guide/application_architecture
其实国内不乏有自己开发自己框架的公司，比如上海的道锐（不如Ext全面，更侧重于其业务经验）等，一直以来我们关心的重点都在服务器端（如程序结构、设计模式、数据库设计、运行平台、数据访问组件等），在当前Web盛行时期，而且发展的如日中天，我强烈的感觉到我们有必要将客户端的设计和实现水平提高，才能匹配服务器端做的努力，这就是木桶原理的一个应用吧。 全球很多企业在用Ext，其中包括IBM HP Adobe等多达74知名公司。我想在这样的应用广度下Ext应该是一个值得信赖的，不会有 ExtJS是一个你可以信赖的用
1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例对象更方便的进行字段的配置 重要属性 defaultType:"" 设置默认子项 的xtype 3.数据交互和加载 Ext.form.action.Action Ext.form.action.Submit ajax方式提交 Ext.form.action.StandardSubmit 原始表单提交方法 Ext
「效果」：将页面分为了上下左右和中间几个位置更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』
子组件vm(VIewModel)初始化时会自动将父组件的vm设置为parent 如果子组件的vm初始化时子组件v(View)尚未add到父组件v上，则子组件的vm.parent为null且不会在view add后再设置为父组件vm(只读)，此时子组件元素无法绑定到父组件vm
大规模的客户端应用程序常常难于去编写、组织机构和维护。随着你加入更多的功能，并且投入更多的开发人员，它们渐渐趋向于失去控制。ExtJS 4 带来了一种新的不仅仅能规整你的代码组织结构，而且能限制你要编写的代码数量的应用程序架构。
(摘自百度百科)模块化是指解决一个复杂的问题时自顶向下逐层把系统划分为若干个模块的过程，各个模块可独立工作。
现在要考虑的是如何加载标签页内的内容。虽然标签页默认是延迟渲染的（deferredRender值默认为true），但是它会预加载所有的类，因而当类文件很多的时候，加载时间就是一大问题了。这个，也可通过SDK打包的方式解决，不过在设计阶段还是要考虑的。另一种好的解决方法是，只使用标签页的标签，而不使用其主体加载内容，另外使用一个容器，内部使用CardLayout作为布局.
TolyUI 是 张风捷特烈 打造的 Fluter 全平台应用开发 UI 框架。具备 全平台、组件化、源码开放、响应式 四大特点。可以帮助开发者迅速构建具有响应式全平台应用软件：
本例子使用Python的os模块和 argparse模块，将工作目录work_dir下所有后缀名为old_ext的文件修改为后缀名为new_ext
原文地址：http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt2
版本 7.5.0 classic 主要组件 Ext.dashboard.Dashboard 仪表板组件,可实现动态拖拽布局 主要配置项： parts 仪表板要使用的parts定义，使用键值对形式传入parts.id和psrts.config的映射 columnWidths 仪表板分列默认列宽数组 defaultContent 默认的项目配置. Ext.dashboard.Part 用于创建仪表板项目的组件工厂 主要配置项： viewTemplate 视图模板创建仪表板项目配置的模板，模板的绑定值通过配置
最近公司老项目改用vue开发，前端框架采用element ui，这个框架风格还是很漂亮的，只是上传功能有一些问题，比如:limit=1限制上传数量后，后面的添加按钮没有隐藏，再用就是如果上传图片组，很多需求需要对图片组进行排序修改，基于这两个需求，对element的el-upload组件进行了二次封装。
表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 text : String 列的标题 默认是"" dataIndex : String 和Model的列一一对应的 sortable : true 可以整理,可以进行分类的 field: 可编辑字典配置 重要方法 getStore 返回当前页面所关联的store 重要属性 ownerCt 组件所属的 Cont
做后台管理系统时遇到的问题，关于tab关闭后再打开不显示，或者报错 我在新的tabpanel中加入了一个grid，当我关闭再次打开就会报错Cannot read property 'addCls' of null， 原因是我在定义grid的错误 这是错误代码： Ext.define('HT.view.Grid',{ extend:'Ext.grid.Panel', title : '人员列表', width:400, height:170,
使用 ARouter 第三方库实现组件化 : https://github.com/alibaba/ARouter
Redux的作用在于实现状态传递、状态管理。在这里你可能会说了，如果是状态传递，那我props的传递不也是可以达到这样的效果吗？context上下文方案不也是可以达到这样的效果吗？没错，是这样的，但是上述的两种方案是有局限性的。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Ext.js 系列课程笔记「组件」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』
extjs组件的构造函数可以获得两个config变量 constructor: function (config) { this.config this.callParent([config]); }, 传入参数config：实例化组件时传入的配置参数 成员变量this.config: 组件类定义中的配置值 例如： Ext.define('mybasecomp',{ config: {myBaseProp: 'defaultBasePropValue'}, constructor:
在组件声明使用publishes Ext.define('myComponent', { extend: 'Ext.Component', xtype: 'my-component', // 配置属性,默认不支持组件直接绑定属性 config: { prop1: null, ... }, publishes: { // 增加此项将配置属性映射到viewModel prop1: true }, items:[{ ... // 可以直接绑定published映射过的配置属
直接给代码吧，主要重点已经在代码里注释了 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <link rel="Styleshee
Portal-Basic Java Web应用开发框架（简称 Portal-Basic）是一套功能完备的高性能Full-Stack Web应用开发框架，内置稳定高效的MVC基础架构和DAO框架（已内置Hibernate、MyBatis和JDBC支持），集成 Action拦截、Form Bean / Dao Bean / Spring Bean装配、国际化、文件上传下载和缓存等基础Web应用组件，提供高度灵活的纯 Jsp/Servlet API 编程模型，完美整合 Spring，支持Action Conven
组件化项目，通过gradle脚本，实现module在编译期隔离，运行期按需加载，实现组件间解耦，高效单独调试。
上次，我们讲了MVC、MVP、MVVM，其实从狭义上来讲，Android的架构概念就在这儿，无论怎么变，都是加加减减一些边边角角的东西，不足在意。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
