绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的高度基本是固定的,所以不需要设置.在可视化编程没有出现之前,开发界面算是个苦差事,因为布局是需要花费不少功夫的,例如想要在已经定义好的组件中插入一个组件,那就得重新修改插入位置以下的组件的坐标,这工作是比较枯燥无聊的,因而,在没必要的情况下,还是少选择这种布局模式. 绝对布局是使用CSS的…

概述 在Ext JS中,包含两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就需要组件类布局来处理组件内自己特有的布局关系.如果我们不定义自己的组件,基本不需要使用到组件布局,知道就行了.本文主要介绍的是容器类布局,因为这个在开发中是必定会使用到的. 注意:在Ext JS中,字段有两层意思.在模型中所说的字段,与数据库中的字段的意义是一样.字段的第二层意思是指表单中的输入组件,这个大家要注意区分. 自动布局:Ex…

盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比较常有的布局方式. 使用盒子布局,除了要在容器定义layout配置项外,还需要在子组件指定子组件的宽度(HBox)或高度(VBox).指定宽度或高度有两种方式,一是直接使用width或height来定义,一是使用flex配置项,根据比例来划分.下面通过一些示例来了解一下盒子布局的使用,这里只使用水平盒子作为示例,垂直盒子就…

概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布局关系. 假设我们不定义自己的组件,基本不须要使用到组件布局,知道即可了. 本文主要介绍的是容器类布局,由于这个在开发中是必然会使用到的. 注意:在Ext JS中,字段有两层意思.在模型中所说的字段.与数据库中的字段的意义是一样.字段的第二层意思是指表单中的输入组件,这个大家要注意区分. 自己主动布…

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于输入控件的高度基本是固定的.所以不须要设置.在可视化编程没有出现之前,开发界面算是个苦差事,由于布局是须要花费不少功夫的.比如想要在已经定义好的组件中插入一个组件,那就得又一次改动插入位置下面的组件的坐标.这工作是比較枯燥无聊的.因而,在不是必需的情况下,还是少选择这样的布局模式. 绝对布局是使用C…

盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比較常有的布局方式. 使用盒子布局,除了要在容器定义layout配置项外,还须要在子组件指定子组件的宽度(HBox)或高度(VBox).指定宽度或高度有两种方式.一是直接使用width或height来定义,一是使用flex配置项,依据比例来划分.以下通过一些演示样例来了解一下盒子布局的使用,这里仅仅使用水平盒子作为演示样例,…

概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基本功能,其实还包含了很多东西.当然,在API中不可能面面俱到,那么,我们应当如何去理解这个组件基类呢? Ext.Component===DIV 如果将一个Ext.Component渲染到页面,会看到该组件会简单的在页面中添加一个DIV标记,就是这么简单.也就是说,Ext.Component就相当于一…

概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的布局类.在本文将介绍Ext JS的容器组合和布局类. 容器:Ext.container.Container 容器的主要功能是管理其内部的组件,因而在继承Ext.Component的全部功能的基础上,添加了对应的用来处理内部组件的方法add.insert.remove和removeAll.在配置项方法…

第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.height高 frame : Boolean 是否填充渲染gridpanel forceFit : true 列是否自动填充 store : store 数据集 tbar: [] 头部工具栏 dockedItems : Object/Array 可定位的停靠工具条(上.下.左.右) selType…

Ext JS组件,对于Ext JS开发人员来说,应当不会陌生,毕竟做开发,都必须与它打交道.对于这样一个大家都熟悉的东西,为什么要用一个专题的形式来写呢?是否有这方面的需要?还不如去写点使用技巧? 确实,组件是可能是大家相当熟悉的东西了,但是,在使用中,大家是否在使用组件过程中或多或少都碰到一些臭虫或其他问题,从而花费不少力气去解决这些问题呢?是什么原因造成这些问题,又该遵循什么思路去解决这些问题呢?本系列的文章就是来解决这些问题的.总的来说,就是希望大家能从文章中了解组件的设计思路,并能从中获…

先进入官网:http://www.sencha.com 然后在导航的Products中选择Sencha Ext JS,会看到以下页面: 这时候不要单击Download按钮,而是要单击导航中的DETAILS,页面切换后,就可在底部看到GPL版本的下载按钮了,如下图: 单击Download按钮进去后就可下载GPL版本了.…

在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue init webpack 这里需要注意的是"前面的一些项目名称什么的都可以直接回车,最后三个选项要注意,是代码检测",这个代码检测有点烦的地方是要求代码必须极其规范,我tab符用4个空格都不允许,必须两个,所以到这里我选择不用代码检测,webpack编译后不影响使用! 上面的命令会在当前…

Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮,文本框,日期选择器等等 表单字段的校验 菜单和工具栏 设计一个表单 计算器程序– 本章的示例项目 本章的主要目的是创建一个表单设计和一个计算器示例项目.以下图分别展示了表单设计和计算器设计. 首先,你观察下列表单设计,你会发现我们使用了大量的控件,例如 label 和文本框. 以下图展示了表单的设计…

原文:Announcing Sencha Ext JS 5 简单介绍 我代表Sencha和整个Ext JS团队,非常自豪的宣布,在今天,Sencha Ext JS 5公布了.Ext JS 5已经迈出了一大步,在这里,我们还想花一点时间来感谢我们的社区为我们提供的全部反馈和不断的支持.在我们的历史上.这是最大的一次beta版本号修订,超过了10万的下载量.与你们一起,我们创建了世界上最先进的多设备JavaScript框架.有了你们的宝贵參与.才让我们建立了最好的Ext JS框架. 新东西 触屏支持…

原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean is an Ext JS Professional Services Lead at CNX Corporation. 在CNX,尽管大多数的Ext JS开发工作需要从0开始创建新的应用程序,偶尔会有客户让我们帮他们解决内部工作上的性能问题.臭虫和结构性问题.我们以“清洁工”这种角色进行工作已经有很…

原文:Announcing Ext JS 6.2 Early Access 非常开心,Sencha Ext JS 6.2早期访问版本今天发布了.早期访问版本的主要目的是为了让大家进行测试并评估Ext JS6.2的工作进度,这对于发布更好的Ext JS版本会有相当大的帮助. Download Ext JS 6.2 EA See Ext JS 6.2 EA Examples 所包含的东西 所有新的日历组件 可以在Ext JS应用程序中以数可视化形式使用D3.js的D3适配器 针对现代工具包的新的符合…

原文:Announcing Sencha Ext JS 5 简介 我代表Sencha和整个Ext JS团队,很自豪的宣布,在今天,Sencha Ext JS 5发布了.Ext JS 5已经迈出了一大步,在这里,我们还想花一点时间来感谢我们的社区为我们提供的所有反馈和不断的支持.在我们的历史上,这是最大的一次beta版本修订,超过了10万的下载量.与你们一起,我们创建了世界上最先进的多设备JavaScript框架.有了你们的宝贵参与,才让我们建立了最好的Ext JS框架. 新东西 触屏支持 Ext…

原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字来创建一个组件或类的实例是一种错误的做法,因为这没有遵循组件的生命周期.应该使用Ext.create方法来创建对象,例如: 错误: var obj = new Ext.panel.Panel(); 正确: var obj = Ext.create('Ext.panel.Panel'); 初始化直接量:不要直接…

原文地址:http://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries/ 作者:Kevin Kazmierczak Kevin Kazmierczak is a Senior Technical Architect at Universal Mind, an innovative digital solutions agency that fuses the design capabilities of an int…

原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean LanktreeSean is an Ext JS Professional Services Lead at CNX Corporation. 在CNX,尽管大多数的Ext JS开发工作需要从0开始创建新的应用程序,偶尔会有客户让我们帮他们解决内部工作上的性能问题.臭虫和结构性问题.我们以“清洁工”这种角色进行工作已经有很长…

原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有关Sencha Ext JS 6的更多细节.该版本向前迈出了一大步,支持使用一个单一的代码库来开发基于桌面.平板和智能手机的通用应用程序.我们成功的将Ext JS和Sencha Touch框架合并在一起.我想对在建立统一框架的这个旅程中,为我们提供了宝贵的反馈的Sencha…

原文:Using Sencha Ext JS 6 to Build Universal Apps {.aligncenter} 在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有关Sencha Ext JS 6的更多细节.该版本向前迈出了一大步,支持使用一个单一的代码库来开发基于桌面.平板和智能手机的通用应用程序.我们成功的将Ext JS和Sencha Touch框架合并在一起.我想对在建立统一框架的这个旅程中,为我们提供了宝贵的反馈的Sencha社区和我们的客户说声感谢.…

Ext JS 6学习文档-第4章-数据包 数据包 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信.在本章结束时将写一个调用 RESTful 服务的例子.下面是本章的内容: 模型 Schema Stores 代理 过滤和排序 做一个基于 RESTful 的小项目 Model(模型) 一个模型包含字段,字段类型,校验,关联和代理.它是通过扩展 Ext.data.Model 类来定义的. 其中类型,校验,关联和代理都是可选的. 当一个字段没有指定类型时,将使用默认类型 ‘au…

Visual Studio 2012太强大了,居然能自己会去提取Ext JS的类的属性和方法,从而实现只能提示.下面就来介绍一下实现这个功能. 在Visual Studio 2012中随便创建一个Web项目,我创建了一个空的Web项目,目录结构如下图所示: 关键就是Scripts中的_references.js文件,文件的内容如下: /// <reference path="ext-all-dev.js" /> 这个和VS2010中实现只能提示的原理一样.需要注意的是ext…

Visual Studio 2012太强大了,居然能自己会去提取Ext JS的类的属性和方法,从而实现只能提示.下面就来介绍一下实现这个功能. 在Visual Studio 2012中随便创建一个Web项目,我创建了一个空的Web项目,目录结构如下图所示: 关键就是Scripts中的_references.js文件,文件的内容如下: /// <reference path="ext-all-dev.js" /> 这个和VS2010中实现只能提示的原理一样.需要注意的是ext…

最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇<Ext JS模板与组件基本知识思维导图>,由于篇幅较长,所以必须肢解与各位分享.想要<Ext JS模板与组件基本知识思维导图>原文档的可以与我联系. 组件是Ext JS的基础,模板是Ext JS4的基础,熟悉模板也就了解组件的组织方式,也就为使用组件和构建自定义组件打下基础. 130个组件虽…

前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组件使用的布局方案. 但是在实际的开发过程中, 有时后这种方式可能无法避免, 或者说已经开发的代码,如何最简单的修正这个问题. 解决方法 利用center 区块的resize 事件可以解决这个问题. 因为在左边收合时,会触发center 区块的resize. 贴代码: <html> <head…

原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每一个组件的尺寸和位置.在Ext JS和Sencha Touch直接有很多相似之处.尤其是如今Ext JS 5開始支持平板更是如此.以下让我们来探讨一下布局系统是怎样跨域Sencha框架进行工作的. 布局简史 最主要的HTML一直都缺乏一个严格定义的布局系统. 很多年来,因为CSS实现的差距.开发跨浏…

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不须要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有很多类似之处.近期在 Ivan Jouikov的这篇博文中对他们进行了具体的分析. 尽管是这样.但非常多Ext JS和Sencha Touch开发者可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最经…

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析.虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常用…