zoukankan      html  css  js  c++  java
  • extjs学习笔记(转)

    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
    }
    );
  • 相关阅读:
    【SpringBoot】常用Starter介绍和整合模板引擎Freemaker、thymeleaf
    【SpringBoot】SpringBoot拦截器实战和 Servlet3.0自定义Filter、Listener
    【SpringBoot】单元测试进阶实战、自定义异常处理、t部署war项目到tomcat9和启动原理讲解
    【SpringBoot】SpringBoot热部署和配置文件自动注入实战
    IntelliJ IDEA备忘
    接口与抽象类
    泛型(11)-泛型与数组
    泛型(10)-泛型擦除与转换
    泛型(9)-泛型方法与方法重载
    泛型(8)-Java7的"菱形"语法与泛型构造器
  • 原文地址:https://www.cnblogs.com/javahuang/p/3024111.html
Copyright © 2011-2022 走看看