`
tmartin
  • 浏览: 104865 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Extjs学习笔记(二) 特性

 
阅读更多

  @JS 类的声明,和对象的创建

类的创建,实际是创建一个function。使用时要先new

 

function user(){
    //this 相当于 高级语言的public
    this.Name = 'uspcat';
    this.age = 26;
    //var 就相对于高级语言当中的private
    var email = "yfc@126.com"

    //以下相当于java中的geter
    this.getEmail = function(){
        return email;
   }
}
 

使用:

var u = new user();
alert(u.getEmail())

 

   方法二:

var person = {
    name:'yfc'
    ,age:26
};

使用
alert(person.name+"  "+person['age'])

 


  @原始方法用EXTJS创建一个window

var win = new Ext.window.Window({
                width:400,
                height:300,
                title:'uspcat'
            });
        win.show();

 

 


@ 利用一个按钮触发window窗体,了解EXTJS的事件机制

<button id="myb">
Show
</button>

 1.得到那个按钮的dom对象
 2.为按钮对象添加单击的事件
 3.单击的时候调用对象win的show方法
        Ext.get("myb").on("click",function(){
            win.show();
        });

 


  @用EXTJS4.0的create来创建window

1.Ext.create() = Exr.ClassManager.instantiate()

2.alias

var o = {
    say : function(){
    alert(11111);
     }
 }
var fn = Ext.Function.alias(o,'say');
//使用
fn();

官方例子:

Ext.Class:

: String []

List of short aliases for class names. Most useful for defining xtypes for widgets

Ext.define('MyApp.CoolPanel', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.coolpanel'],
    title: 'Yeah!'
});

// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel', {
    items: [
        {xtype: 'coolpanel', html: 'Foo'},
        {xtype: 'coolpanel', html: 'Bar'}
    ]
});
 

 

 

Ext.Base

Create aliases for existing prototype methods. Example:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()
   

Ext.Function

( Object /Function object, String methodName ) : Function

Create an alias to the provided method property with name methodName of object . Note that the execution scope will still be bound to the provided object itself.

Parameters

Returns

 


@利用define自定义类并且集成(extend)window
    //初始化的方法
    initComponent: function() {
        this.callParent(arguments);
    }

    //定义新类
		Ext.define("ux.myWin",{
		   //继承Window
			extend:'Ext.window.Window',
			width:400,
			height:300,
			 //关键字
			config: {
			   price: 500
			},
			newtitle: 'new uspcat',
			mySetTitle:function(){
				this.title = this.newtitle;
			},
			title:'uspcat',
			initComponent: function() {
				this.mySetTitle();
				this.callParent(arguments);
			}
		});
 


  @requires  JS的异步加载

(function(){
    //声明命名空间
	Ext.Loader.setConfig({
		enabled:true,
		paths:{
			myApp:'02/ux' //加载此目录下JS文件
		}
	});
 

创建:

var win = Ext.create("ux.myWin",{
				title:'my win',
				price:600,
				requires:['ux.myWin']
			});
 


@config 自动的get和set

在config中的属性可以自动生成geter和seter。并且属性第一字母会自动大写!

//定义新类
		Ext.define("ux.myWin",{
		   //继承Window
			extend:'Ext.window.Window',
			width:400,
			height:300,
			 //关键字
	config: {//**************
			   price: 500
			},



			newtitle: 'new uspcat',
			mySetTitle:function(){
				this.title = this.newtitle;
			},
			title:'uspcat',
			initComponent: function() {
				。。。。。
			}
		});
//----------------
    调用:
     var win = new ....
     alert(win.getPrice());//**************
 

 

 

@mixins 类的混合

Ext.define("say",{
			cansay:function(){
				alert("hello");
			}
		});
		Ext.define("sing",{
			sing:function(){
				alert("sing hello 123");
			}
		});
		Ext.define('user',{
		    //关键字
                mixins :{//**************
		say : 'say',
		sing: 'sing'
			}});
		             //创建类
		var u = Ext.create("user",{});
		u.cansay();
		u.sing();
 
分享到:
评论

相关推荐

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    ExtJs学习笔记,共30讲

    13. **extJs 2.0 学习笔记**:这部分内容专注于ExtJs 2.0版本,可能包括新特性、改进和兼容性问题。 通过这些笔记,读者可以逐步掌握ExtJs的基本用法,从构建简单的UI组件到处理复杂的异步数据交互,为开发高质量的...

    Extjs学习笔记有用

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。...学习ExtJS可以帮助开发者快速构建功能丰富的、交互性强的Web应用。通过深入理解和实践,可以提升开发效率,创建出符合现代Web标准的用户界面。

    extjs 学习笔记(三) 最基本的grid

    在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...

    extJs+2.1学习笔记.pdf

    本学习笔记将深入探讨ExtJS 2.1的关键概念和技术,帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中,应用程序通常基于组件树构建,每个组件都有自己的属性、方法和事件。理解这种结构对于布局...

    Extjs学习笔记(-):ComboBox联动

    本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果,即一个ComboBox的选择会触发另一个ComboBox的数据更新,以此来提供更丰富的交互体验。通过源码解析和工具应用,我们将了解如何构建和实现这种联动效果。 ...

    extjs 的一些学习笔记

    【ExtJS 学习笔记概览】 ExtJS 是一个强大的JavaScript 框架,主要用于构建富客户端的Web应用程序。它的核心特性包括丰富的组件库、强大的数据包管理、灵活的布局系统以及面向对象的编程模型。以下是对ExtJS 入门...

    extjs4.0学习笔记

    EXTJS 4.0 版本带来了许多改进和新特性,使得开发人员能够更高效地构建交互式的Web界面。以下是一些EXTJS 4.0 中的关键知识点: 1. **简化JS文件引用**:在EXTJS应用中,可以通过数组存储所有需要的脚本文件路径,...

    关于ExtJS3.3版本学习笔记

    【标题】"关于ExtJS3.3版本学习笔记"揭示了本文档主要关注的是ExtJS框架的一个特定历史版本,即3.3版。ExtJS是一个广泛使用的JavaScript库,专为构建富互联网应用程序(RIA)而设计。这个版本的学习笔记可能包含有关...

    ExtJS面板学习笔记(带有运行效果)

    ### ExtJS面板学习笔记 #### 一、基础:弹出框 在ExtJS中,`Ext.MessageBox`提供了创建各种模态对话框的功能,包括提示、确认、输入等。以下是几个基本示例: 1. **简单警告对话框**: ```javascript Ext....

    Extjs学习笔记之二 初识Extjs之Form

    在本篇Extjs学习笔记中,我们将深入探讨Extjs中的Form,特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先,Extjs中的表单组件主要基于Ext.form.BasicForm,这是一个基础的表单对象,负责处理表单数据...

    extjs 学习笔记(二) Ext.Element类

    本篇学习笔记将深入探讨`Ext.Element`类,包括`Ext.fly`和`Ext.get`的区别以及如何使用`Ext.Element`进行各种DOM操作。 首先,`Ext.fly` 和 `Ext.get` 都是用来获取`Ext.Element`对象的方法,但它们之间存在一些...

    JavaScript.-Extjs基础学习笔记

    Extjs的Tab Panel和Grid组件提供了丰富的特性和自定义选项,使得开发者能够构建出既美观又功能强大的用户界面。通过理解这些组件的配置和工作原理,可以有效地提升Web应用的用户体验和开发效率。然而,值得注意的是...

    Extjs 4 开发笔记

    【EXTJS 4 开发笔记】系列主要针对初学者,详细介绍了如何使用EXTJS 4进行项目开发,尤其是采用MVC模式。...对于初学者来说,这是一个逐步学习EXTJS 4开发的良好起点,能够帮助他们理解EXTJS 4的核心特性和最佳实践。

    extjs 学习笔记(一) 一些基础知识

    以上知识点涵盖了ExtJS学习笔记中的核心内容,通过这些知识点的学习和实践,开发者能够入门并逐渐深入理解ExtJS框架,并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说,理解这些基础知识...

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库,主要用于...通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件和管理器的使用方法,以及一些针对特定浏览器的布局技巧,为创建美观、高效的用户界面打下坚实的基础。

    ExtJs 学习笔记 Hello World!第1/2页

    在本文中,我们将探讨ExtJS这一强大的JavaScript框架,以及如何开始使用它构建Web应用程序。...在后续的学习中,我们将进一步探索ExtJS的高级特性,包括数据模型、Store、Grid和Form等,以及如何与服务器进行数据交互。

    EXTjs自己的入门笔记

    EXTJS 是一种基于 JavaScript 的富客户端应用开发框架,主要用于构建桌面级的Web应用程序。...在实际开发中,你可以根据需要进一步学习EXTJS的组件系统、数据绑定、事件处理和高级布局等高级特性。

Global site tag (gtag.js) - Google Analytics