EXT.JS
cnsu-cmh
IT民工
展开
-
ExtJS 4---主题theme
1 UI组件基础学习ExtJs就是学习组件的使用。ExtJs4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件。ExtJs4的组件体系中有将近100种组件,而这些组件又可以大致分为四大类,即容器类组件、工具栏及菜单栏组件、表单及元素组件、其他组件。2 主题ExtJs4引转载 2016-11-20 22:55:40 · 2261 阅读 · 0 评论 -
ext4 学习笔记(七)[ExtJS扩展原生Javascript](白鹤翔第一季)
Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务,源码位置,我们可以从开发包的extjs-4.1.1\src\core\src\lang\这个位置找到这几个扩展的js源码:Ext.ObjectExt.NumberExt.StringExt.ArrayExt.FunctionExt.Da原创 2016-11-05 23:46:35 · 884 阅读 · 0 评论 -
ext4 学习笔记一,[自定义类](白鹤翔第一季)
ext是倾向于面向对象的编程思想,这也是它的一个比较大的特性,4 以后推荐使用的创建类方法是 Ext.create方法,实例中也有说明,new 的方式不是不可以,只是之前版本一直用new。我们知道,只有在Ext框架全部加载完后才能在客户端的代码中使用Ext,而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后,所要执行的函数Insert title here /* Start ExtJS 中自定义类 **/ Ext.defi原创 2016-10-30 17:11:06 · 560 阅读 · 0 评论 -
ext4 学习笔记(六)[Ext.js方法 ](白鹤翔第一季)
Ext.js方法详解:Ext.apply&Ext.applyIfExt.extendtypeOfisEmpty、isIterable、isFunction、isArray...IterateExt.apply & Ext.applyIfExt.apply就是为对象扩展属性或方法的 var src = {name:'张三',age:20}; //源对象 v原创 2016-11-03 22:51:36 · 398 阅读 · 0 评论 -
ext4 学习笔记(二) [Ext.window.MessageBox](白鹤翔第一季)
首先说明一下:(1)本文章是针对于ExtJs 4.X ,文章中出现的5版本只是我引入的文件是ExtJs.5.0,并不是文章是基于5版本,文章是4版本的(2)由于注释很全,所以文章内容就不写那么详细了,直接贴代码还望读者能够理解Ext.onReady:这个方法是Ext的准备函数,也就是Ext相关的代码都会在这个函数里书写,它比较类似于window的onload方法,但是注意其原创 2016-10-31 23:38:10 · 1111 阅读 · 0 评论 -
ext4 学习笔记(三) Ext.window.Window(白鹤翔第一季)
Ext.window.Window。对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档。xtype:组件的别名 Hierarchy 层次结构 Inherited mixins 混入的类 Requires 该组件需要使用的类configs:组件的配置信息 properties:组件的属性methods:组件的方法events:组件的事件原创 2016-11-02 00:26:36 · 4079 阅读 · 0 评论 -
ext4 学习笔记(四) [Ext.windowGroup](白鹤翔第一季)
windowGroup对象 操作window组重点分析:该实例主要目的针对于特殊需求进行具体的实现,利用windowGroup去操作多个窗体同步执行某些任务,这有点类似于javascript里的组合模式,原理就是上级负责执行一个动作但并不真正去执行,而是分别传递给所有的下级组件去具体执行。Insert title here Ext.onReady原创 2016-11-02 00:34:18 · 447 阅读 · 0 评论 -
ext4 学习笔记(五)[Ext.define 新建类](白鹤翔第一季)
说明:(1)本文章是针对于ExtJs 4.X ,文章中出现的5版本只是我引入的文件是ExtJs.5.0,并不是文章是基于5版本,文章是4版本的定义类的方法:define对于Ext4.X版本来说,采用了新定义类的define方法,而不是延续旧版本的extend方法,那么对于定义一个新的类。我们来了解下define的使用。Ext.define(classname,propert原创 2016-11-03 00:05:24 · 1394 阅读 · 0 评论 -
Extjs4 布局详解
1 Fit 布局在 Fit布局中,子元素将自动填满整个父容器。注意:在 fit布局下,对其子元素设置 宽度是无效的。如果在 fit布局中放置了多个组件,则只会显示第一个子元素。典型的案例 就是当客户要求一个 window或 panel中放置一个 GRID组件,grid组件的大小会随着父容 器的大小改变而改变。 示例代码Ext.onReady(function(){ Ext.create(原创 2016-11-21 22:53:19 · 605 阅读 · 0 评论 -
Ext4 Windows 的创建
Extjs4,创建 Ext组件有了新的方式,就是 Ext.create(....),而且可以使用动态加载 JS的 方式来加快组件的渲染,我们再也不必一次加载已经达到 1MB的 ext-all.js了,本文介绍如 何在 EXTJS4中创建一个 window. 窗口实例 Ext.onReady(function(){ Ext.create('Ext.win原创 2016-11-21 23:26:51 · 1050 阅读 · 0 评论 -
Extjs4 ——布局和容器
extjs4.0布局及容器系统(Layouts and Containers)是Ext JS中最强大的部分之一。它负责控制你应用程序中每个组件的尺寸和定位。本文内容包括了如何运用布局的基础。extjs4.0布局和容器(Layouts and Containers)是Ext JS中最强大的部分之一。它负责控制你应用程序中每个组件的尺寸和定位。本文内容包括了如何运用布局的基础。一、容器原创 2016-11-20 23:14:02 · 328 阅读 · 0 评论 -
Ext4 HBox的使用
要使用HBox布局方式,首先的熟悉下一下几个主要属性:一、align:字符类型,指示组件在容器内的对齐方式。有如下几种属性。 1、top(默认):排列于容器顶端。 2、middle:垂直居中排列于容器中。 3、stretch:垂直排列且拉伸义填补容器高度 4、stretchmax:垂直拉伸,并且组件以最高高度的组件为准。二、flex:数字类型,指示组原创 2016-11-22 22:50:28 · 515 阅读 · 0 评论 -
ext4 学习笔记(八)[动态加载Js](白鹤翔第一季)
首先回顾一下Ext创建类,我们先创建一个window.Window组件 Ext.create('Ext.window.Window',{ title:'我是一个窗口', height:300 , width:400 , constrain:true , modal:true , html:'我是窗体的内容!!!!' , renderTo:Ext.getBod原创 2016-11-07 22:38:36 · 429 阅读 · 0 评论 -
ext4 学习笔记(九)[dom操作一 获取元素](白鹤翔第一季)
首先,什么是DOM(Document Object Model)W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容、结构和样式。其实DOM是一种通用的模型、不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多...DOM的发展也非常的漫长,版本延续,产生了0级DOM、1级DOM原创 2016-11-07 22:56:41 · 687 阅读 · 0 评论 -
ext4 学习笔记(十)[查询系方法](白鹤翔第一季)
查询系方法:contains:判断元素是否包含另一个元素child:从元素的直接子元素中选择与选择符匹配的元素down:选择与选择符匹配的元素的子元素first:选择元素第一个子元素findParent:查找与简单选择符匹配的元素的父元素findParentNode、up:查找与简单选择符匹配的元素的父元素is:判断元素是否匹配选择符last:选择元素的最后一个子元原创 2016-11-08 22:57:42 · 581 阅读 · 0 评论 -
Ext4 类
1).声明1.1) 旧的方式如果你曾经使用过旧版本的extjs,那么你肯定熟悉使用Ext.extend来创建一个类: 1: varMyWindow=Ext.extend(Object,{...});这个方法很容易从现有的类中继承创建新的类.相比直接继承,我们没有好用的API用于类创建的其他方面,诸如:配置、静态方法、混入(Mixins)。呆会我们再来原创 2016-11-20 21:59:01 · 312 阅读 · 0 评论 -
ext4学习笔记(十九)[Ext.EventManager](白鹤翔第一季)
Ext.EventManager:把浏览器自带的事件做个封装 ,目的是屏蔽浏览器之间的差异问题on添加事件监听 un移除事件监听Ext.onReady(function(){ //Ext.EventManager:把浏览器自带的事件做个封装 ,目的是屏蔽浏览器之间的差异问题 // on添加事件监听 un移除事件监听 var inp = document.create原创 2016-11-19 22:14:52 · 422 阅读 · 0 评论 -
ext4学习笔记(二十)[为Ext的UI组件绑定事件](白鹤翔第一季)
Ext.onReady(function(){ //为Ext的UI组件绑定事件 //1:直接在组件内部添加listeners配置项 即可 var win = Ext.create('Ext.Window',{ title:'UI组件的事件示例一' , width:400 , height:300 , renderTo:Ext.getBody() ,原创 2016-11-19 22:17:49 · 625 阅读 · 0 评论 -
ext4 js 模拟EventManager(白鹤翔第一季)
EventManager封装浏览器自带的事件 ,并且解决了浏览器的差异问题var MyExt = {};// 封装浏览器自带的事件 屏蔽浏览器之间的差异MyExt.EventManager = { //添加监听element, eventName, fn, useCapture addListener:function(el , ename , fn , useCaptur原创 2016-11-19 21:59:38 · 356 阅读 · 0 评论 -
ext4 js添加事件(白鹤翔第一季)
原始的事件模型,也就是0级DOM事件模型。非常通俗的说,就是给HTML元素里加一个事件,这种方法有一个硬伤,就是不能同时对元素注册多个处理函数。W3C的专家也知道这样不好,那么2级DOM事件模型也就产生了,也就是所谓的标准事件模型。API如下定义:element.addEventListener(type,listener,useCapture);element.removeEvent原创 2016-11-17 22:39:42 · 535 阅读 · 0 评论 -
ext4 js自定义事件(白鹤翔第一季)
// 要利用观察者模式 去实现自定义的事件//1:由于浏览器他自己能定义内置的事件(click/blur...)// 我们也应该有一个类似于浏览器这样的类,这个类 自己去内部定义一些事件(自定义事件)var Observable = function(){//承装自己所定义的事件类型的this.events = ['start','stop'];//我们应原创 2016-11-17 23:13:54 · 654 阅读 · 0 评论 -
ext4 学习笔记(十五)[Query 常用方法](白鹤翔第一季)
Ext.dom.Query 嗯,这个类一共提供了8个方法供开发人员去使用。要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则:1.基本选择器(简单选择器) id选择器 css的类选择器 标签选择器2属性选择器3.伪类选择器(也可以说是相当于JQ过滤选择器)Ext.query基本使用形式:Ext原创 2016-11-16 23:07:05 · 480 阅读 · 0 评论 -
ext4 学习笔记(十四)[DomHelper常用方法](白鹤翔第一季)
Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具类。下面我们就一起学习下DomHelper首先从API来看,这个类暴露出的public方法并不是特别多。仅仅13个方法而已。如果想生成dom节点,在这里不建议使用原生的方法去生成dom节点,原因是代码量比较大的时候性能比较低、其二是自己组装HTML字符串比较麻烦。在Ext里,DomHelper对象类似一个元素生成原创 2016-11-16 22:43:52 · 598 阅读 · 0 评论 -
ext4 学习笔记(十三)[常用事件方法](白鹤翔第一季)
常用事件方法:addKepMap:为元素创建一个KeyMap对象addKeyListener:为KeyMap绑定事件常用事件on:绑定事件un:移除事件click:单机事件blur:失去焦点事件focus:获得焦点事件其他方法:center:使元素居中clean:清理空白的文本节点createShim:为元素创建一个iframe垫片保证选择或原创 2016-11-15 23:26:24 · 713 阅读 · 0 评论 -
ext4 学习笔记(十二)[样式操作系方法](白鹤翔第一季)
样式操作系方法:addCls:增加CSS样式到元素,重复的样式会自动过滤applyStyles:设置元素的style属性setStyle:为元素设置样式getStyle:返回元素的当前样式和计算样式getStyleSize:返回元素的样式尺寸setOpacity:设置不透明度clearOpacity:;清理不透明度设置getColor:返回CSS颜色属性的值,返回值原创 2016-11-10 14:03:28 · 504 阅读 · 0 评论 -
ext4 学习笔记(十一)[操作系方法](白鹤翔第一季)
DOM操作系方法:appendTo:将当前元素追加到指定元素中appendChild:在当前元素中追加元素createChild:在元素中插入由DomHelper对象创建的元素inertAfter:将元素插入到指定元素之后inertBefore:将元素插入到指定元素之前 inertSibling:在当前元素前或后插入(或创建)元素(同层)。insertHtml:在当前元原创 2016-11-10 13:51:26 · 393 阅读 · 0 评论 -
Ext4 vBox的使用
要使用VBox布局方式,首先的熟悉下一下几个主要属性:一、align:字符类型,指示组件在容器内的对齐方式。有如下几种属性。 1、left(默认):排列于容器左侧。 2、center :控件在容器水平居中。 3、stretch:控件横向拉伸至容器大小 4、stretchmax:控件横向拉伸,宽度为最宽控件的宽。二、flex:数字类型,指示组件在容器中原创 2016-11-22 22:53:00 · 556 阅读 · 0 评论