Extjs介绍(一)

1:

最近在做一个项目,用到Extjs框架,在网上查了一些资料,和自己对它应用的理解,写了下面的一些内容和大家分享。主要内容为Extjs的概述及Extjs各种常用控件的使用.更适用于初学Extjs时使用。

2:

  Extjs基于html/css+javascriptAjax框架主要用于创建前端用户界面。Extjs是一个跨浏览器的应用,

RIA(Rich Internet Applications):富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。

MVC(Model View Controller)即把一个应用的输入、处理、输出流程按照ModelViewController的方式进行分离,这样一个应用被分成三个层——模型层、视图层、控制层

Ext的适配器:

Ext成型于YahooUIJavascript库的扩展。在当时,Ext须依赖YUI的底层代码来处理跨浏览器的问题。现在ExtJS已经是独立、免依赖的库了(standalone),你可将Extjs替换为另外你所选择javascript库,如prototypejQuery、或者是这些之中的最佳选择,>Ext自带的底层库。负责将这些库(包括Ext自带的底层库)映射为Ext底层库的这部分代码,我们称之为适配器(Adapters)。

 

3          javascript    

在开始Extjs的学习前,我们先来了解一点javascrip的基础知识吧.

3.1数据格式之最最最基本的JSON

说到javasript,首先不得不提的就是json,我们先来看看官方的解释吧。JSON JavaScript Object Notation,它是一种轻量级的数据交换格式,已经是javascript标准的一部分.对于WEB2.0来说,Json是目前最灵活的解决方案。

好了,官方的部分就先看到这里吧,了解了解就行了,下面我们来说JSON到底是什么样的吧。

上文有说到JSON是一种数据格式,它是怎么样的一种数据格式呢·?学过JAVA的同学应该都知道MAPMap灵活的键值对的数据格式。Json同样也是一种键值对(Key-Value)的数据格式.key->string型数据,value可以是任何的数据类型,包括基本数据类型,string ,int ,date,.也可以是一个json,还可以是某个方法(函数).通过这样一种灵活的数据格式,我们可以在实际开发过程中利用json来组装各种各样的数据.如同javabean一样,我们随时可以用json非常灵活,构造出我们想要的bean,我们想要的对象.来达到我们程序的需要。所以,Javascrip是一种弱类型的语言.但他也是面向对象的。

3.2 Javascript的类:

Javascrip与其他的面向对象语言如java,.net不同,它并不是基于类而是基于原型的。 Javascvipt的类其实也可以看作是json和函数的一个深度的运用.(个人理解,不代表官方言论.欢迎探讨)

javascript创建一个类非常的容易:

//定义名为myClass的单例类

myClass = function{

//private zone

 var aVar= 15,

//public zone

 return aMethod: function() {

   alert("I'm a method of the object myObject." + "aVar: " + aVar);

 }

}();

myClass.aMethod();

上述是一个全局的单例类的写法.只要myClass不使用var声明,那么这个类相对于整个有效范围内是全局的.(有效范围是指当前页面). Function(){}后面加()是使myClass成为一个单例类,在这里是闭包的一种实现。包括使函数里定义的属性成为私有属性,不对外开发。需要开放的属性与方法统统有return处定义。

如果我们需要多次使用同一种类对象(可以多例化的类),那就必须用到javascript特有的一种东西:构造器函数和new关键字了.

在Javascript中没有专门的类的概念,但是构造器是存在的。我们定义的function其实就可以看作是一个构造器,他构造了一类对象。你可以编写一个函数,然后通过new关键字+这个函数来创建一个这种函数类型的对象。该对象的属性及方法在函数内部定义.

//首先,我们为我们的类定义一个带一个参数的构造器

Var myClass = function (config) {

 this.aVar = 15;//定义默认的aVar属性;

 this.aMethod = function() {

   alert("I'm a method of the object myObject.");

 }

}

 

//创建类的实例

var A = new myClass();

 

//显示 15

alert(A.aVar);

 

//第二个实例

var B = new myClass();

javascript的原型与方法共享:

你必须使用prototype对象:

//我们定义了一个prototype对象的一个方法

myClass.prototype.sharedMethod = function() { alert("I'm a shared method") }

 

//显示我们的信息

A.sharedMethod();

 

//相同的信息

B.sharedMethod();

     原型. prototype

JavaScript 的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法。prototype是对象的原型,由该函数构造出来的对象应该都会具有这个原型的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以说,prototype提供了一群同类对象共享属性和方法的机制

此外javascript的类还有几种其他不同的写法,以上两种写法为目前eVoice中常用的两种。

 

 

Extjs主要介绍,请看下篇。

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是 一款不可多得的JavaScript客户端技术的精品。 Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。 ExtJS(ajax框架) 4.2.1 功能介绍 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。 其实从ext3开始就支持各种方式的统计,且有控件支持excel导出。 功能特点 高性能, customizable UI widgets Well designed, documented and extensible Component model Commercial and Open Source licenses available 更新说明 核心改进:检视框架的架构和重塑其基础。这些变化不单提供了产品性能,还提高了其健壮性。 测试框架:在所有支持浏览器上对框架进行了持续全面的测试。 类系统:作为Extjs 4架构更新的一部分,引用了一个功能更完整的类系统。 沙盒:在ExtJS历史上,ExjJS 4首次提供了完整的沙盒模式。从ExtJS 4开始,框架不再扩展数组或函数等原生对象,因此,与其它的框架同时加载到页面时,再也不会产生冲突。 应用架构:在ExtJS 4,引入了一个标准化的几乎适合任何ExtJS应用程序的MVC风格的应用架构。使用MVC,开发团队只需要学习一种架构就能理解任何ExtJS 4的应用。 SDK工具:正在测试beta版的Sencha SDK工具,在第一版本中包括了优化工具、生成器和slicer工具。这些工具可让你优化Javascript程序,以确保主题能在IE6正常工作。 全新的图表库:ExtJS4中, 全新的、插件自由的图表库是最激动人心的新功能之一,创建了饼图、线图、面积图、雷达图等等,所有这些都是动画的、易于配置的和可扩展的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值