ExtJS学习笔记

摘自：http://www.blogjava.net/liuwentao253/archive/2009/03/15/259847.html

 

javascript 定义数组 ：
var   myArray   =   new   Array(1,2,3,4,)   //普通方式  
var   myArray   =   new   Array(20)   //20个元素  
var   myArray   =   [1,2,3,4,5,6]   //数组直接量

Ext.getDom("wentao")等价于Ext.get("wentao").dom

得到浏览器的宽高：
Ext.lib.Dom.getViewWidth();
Ext.lib.Dom.getViewHeight();

得到某个Element的宽高：
<div id="ux-taskbar">
 ....
</div>
Ext.get('ux-taskbar').getWidth();
Ext.get('ux-taskbar').getHeight();

为某个Element增加一个样式：
Ext.get('ux-taskbar').addClass("样式名称");
为某个Element移除一个样式：
Ext.get('ux-taskbar').removeClass("样式名称");


设置桌面背景颜色 ：
Ext.get(document.body).setStyle('background-color', '#972929');
更新样式表中某项的某个属性 :
Ext.util.CSS.updateRule('.ux-shortcut-btn-text', 'color', '#'+hex);

更改Ext窗体样式方案 ：
Ext.util.CSS.swapStyleSheet('theme', “/ext/theme/vistablue/css/vistablue.css”);

截取字符串：
Ext.util.Format.ellipsis(data.name, 17);

在页面上打印信息 ：
var bd = Ext.getBody();
bd.createChild({tag: 'h2', html: '朱元璋'});

当前日期再加 -21天后的日期：
new Date().add('d', -21)

打印一个东西的类型 ：
            var _s = Ext.query("#center-ul li");
            for (i = 0; i < _s.length; i++) {
                alert(typeof _s[i])
            }




注册一个事件 ：

    Person = function() {
        this.addEvents("click1");//注册click事件
    }

注册多个事件 ：

    Wt.Person = function() {
        this.addEvents("namechange", "sexchange");
    };

注册的事件有属性(json格式)：上面代码执行完后，必须跟上 ：

    this.addEvents({
        'ready' : true,
        'beforeunload' : true
    });

 

Ext.extend(Person, Ext.util.Observable);

一 ： Ext.Ajax.request

Ext.Ajax.request({
    url: 'http://localhost:81/_ajax/jsp/ajax1.jsp',
    success: function(response) {
        Ext.Msg.alert('成功', response.responseText);
    },
    failure: function(response) {
        Ext.Msg.alert('失败', response.responseText);
    },
    params: { name: 'value' }
});

params参数表示请求时发送到后台的参数，既可以使用JSON对象，也可以直接使用"name=value"形式的字符串。


Ext.Ajax直接继承自Ext.data.Connection，不同的是，它是一个单例，不需要用new创建实例，
可以直接使用Ext.data.Connection。在使用Ext.data.Connection前需要先创建实例，因为Ext.data. Connection是为了给Ext.data中的各种proxy提供Ajax功能，分配不同的实例更有利于分别管理。
Ext.Ajax为用户提供了一个简易的调用接口，实际使用时，可以根据自己的需要进行选择。

二 ：代理相关的类 ：

1： Ext.data.DataProxy

数据代理类是一个纯虚类，主要用于生成Ext.data.Record对象，没有公开的属性和方法，只是归定子类需要处理三个事件

1beforeload : ( Object This, Object params )
2
3load : ( Object This, Object o, Object arg )
4
5loadexception : ( Object This, Object o, Object arg, Object e )

事实上参数也是子类自定义的

2： Ext.data.HttpProxy
和下面的Ext.data.MemoryProxy还有Ext.data.ScriptTagProxy都继承于DataProxy ，HttpProxy用于远程代理,而且服务端返回信息时必须指定Content-Type属性为"text/xml".

2.1： HttpProxy( Object conn )
构造一个HttpProxy对象,参数可以是一个类似于{url: 'foo.php'}这样的json对象,也可以是一个Ext.data.Connection对象,如果参数没有指定，将使用Ext.Ajax对象将被用于发起请求

2.2： getConnection() : Connection
得到当前连接对象

2.3： load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
从配置的connection对象得到record数据块，并激发callback

params:        发起http请求时所要传递到服务端的参数
DataReader:    见DataReader
callback:    回叫方法,第一个参数为接收到的信息,第二个参数为arg,第三个是成功标志
scope:        范围
arg:        这儿的参数将会传递给回叫函数callback

使用示例:

var proxy=new Ext.data.HttpProxy({url:'datasource.xml'});
var reader = new Ext.data.XmlReader({
      totalRecords: "results",
      record: "row",        
      id: "id"                
    }, [
      {name: 'name', mapping: 'name'},
      {name: 'occupation'}          
    ]);
  
//定义回叫方法
var metadata;
function callback(data,arg,success){
   if(success){
      metadata=data;
   }
}

proxy.load( null,reader,callback,this);

3：Ext.data.MemoryProxy

3.1: MemoryProxy( Object data )
构造

3.2: load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
取数据，和HttpProxy类似,只是params参数没有被使用

使用示例

var proxy=new Ext.data.MemoryProxy([ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]);
var reader = new Ext.data.ArrayReader(
    {id: 0},
    [
    {name: 'name', mapping: 1},        
    {name: 'occupation', mapping: 2}  
]);

var metadata;
function callback(data,arg,success){
    metadata=data;
}

proxy.load( null,reader,callback,this);

4:  Ext.data.ScriptTagProxy

这个类和HttpProxy类似，也是用于请求远程数据,但能用于跨主域调用,如果请求时使用了callback参数
则服务端应指定Content-Type属性为"text/javascript"
并返回callback(jsonobject)
反之则应置Content-Type属性为"application/x-json"
并直接返回json对象

4.1 : ScriptTagProxy( Object config )
构造,其中
config定义为{
callbackParam : String,    //回叫参数
nocache : Boolean,    //是否缓存
timeout : Number,    //超时
url : String        //请求数据的url
}

4.2: abort() : void
放弃

4.3: load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void

三 ：Ext.data.JsonStore使用HttpProxy加载数据时传递参数的两种方法

1.用baseParams属性

var Type1Store = new Ext.data.JsonStore({
    fields: ['name','id'],
    url: 'LoadData.aspx',
    baseParams: {mode: 'type1'},
    autoLoad: true
});

 

2.在Store load的时候传递

var Type1Store = new Ext.data.JsonStore({
    fields: ['name','id'],
    url: 'LoadData.aspx',
    baseParams: {mode: 'type1'},
    autoLoad: true
});