• ExtJs笔记


    1、Ext.onReady(function(){ }); 用来加载“extJS框架”之后要执行的函数。
     
    2、Ext.Loader.setPath('Ext.ux', '../ux/');
    //动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间
    3、Ext.require 动态加载类
    //加载单个类
    Ext.require('Ext.window.Window');
     
    //加载多个
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
     
    //加载所有类,除了“Ext.data.*”之外
    Ext.exclude('Ext.data.*').require('*');
     
    4、Ext.define 自定义某个类
     
    定义一个Person类,首先看一下具体的代码:
    Ext.define("Person", { Name: '', Age: 0, Say: function (msg) { Ext.Msg.alert(this.Name + " Says:", msg); }, constructor: function (name, age) { this.Name = name; this.Age = age; } });
     
    5、 extend 类的继承
    ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Developer类,它继承自Person,同时还拥有Coding方法,代码如下:
    Ext.define("Developer", { extend: 'Person', Coding: function (code) { Ext.Msg.alert(this.Name + " 正在编码", code); }, constructor: function(){ this.callParent(arguments); } });
     
    constructor 指明作为它的构造函数
     
    6、Ext.create 创建组件对象,实例化类
    一个例子,我们在ExtJS中定义一个Window对象,代码如下:
    var win = Ext.create("Ext.window.Window", { title: '示例窗口, 300, height: 200 }); win.show();
     
     
    7、Ext.apply 可以简单的理解成把第三个参数(如果有的话)及第二个参数中的属性拷贝给第一个参数对象
     
    超时设定
     
    9、动态引用加载
    ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。
     
    1.动态引用外部Js
    //加载配置可用
    Ext.Loader.setConfig({ enabled: true });
    //动态引用“../ux/”目录下所有Js文件类,映射到对应命名空间
    Ext.Loader.setPath('Ext.ux', '../ux/');
     
    2.动态加载类
    //加载单个类
    Ext.require('Ext.window.Window');
     
    //加载多个
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
     
    //加载所有类,除了“Ext.data.*”之外
    Ext.exclude('Ext.data.*').require('*');
     
    作用:悬停提示
    初始化QuickTips就是为了使带有data-qtip属性的html标签能够在鼠标移上去的时候显示其内容
     
    例子如下:
        <script type="text/javascript" defer>  
            Ext.onReady(function(){     
                Ext.QuickTips.init();  
           });    
        </script>  
       </head>  
       <body>  
            <input type = 'button' id ='lwc' value='鼠标放在上面看提示'  
            ext:qtitle = '提示标题' ext:qtip='提示内容'/>  
       </body>  
    </html> 
     
    12、Ext.History.init();
    浏览器自定义前行后退功能
     
    13、Ext.TabPanel
    TabPanel继承于Ext.Panel,Ext.TabPanel就是有选项卡的Panel,可以在选项卡之间切换。它是多个不同内容的容器,任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板,索引从0开始。
     
    14、Ext.data.TreeStore
    树节点组件的数据
     
    15、Ext.tree.Panel
    树节点组件
     
    16、Ext.form.field.Trigger
    当点击下拉图标时自动出现menu菜单
     
    17、Ext.Viewport
    VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例。
    Ext.create('Ext.Viewport', {
    }
     
    18、Ext.data.JsonStore
    从远程JSON数据
     
    19、Ext.window.Window
    Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid、form等控件,从而来实现更加复杂的界面逻辑。
     
    20、ExtJS中的items到底是什么意思
    ExtJS的控件组织结果是一个树结构,items可以理解成子节点集合,每一个item就是一个子节点
    如:
    {
    xtype: 'panel',
    items: [
    {
    xtype: 'panel'
    } ,
    {
    xtype: 'panel',
    items: [ { xtype: 'panel' } ]
     
    }
    ]
    }
     
    21、config = config || {};  的意思
    相当于 config?config:{}
     
    22、可变参数config
    例子:
    constructor : function(config) {
    config = config || {};
    ...
    }
    其中function中的config为可变参数,不需要定义。
     
    例2:
    1.function getUser(name,age){
    2.alert("name: "+name + " age: "+age);
    3.}
    调用方法:getUser(); // 可以不传参数
    getUser("cat"); // 可以只传递一个参数
    getUser("cat",20); // 传两个参数
    getUser("cat",20,2,"dog"); // 传两个以上的参数
     
    23、Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComboBox,都是通过它实现数据读取、类型转换
    每个store最少需要两个组件的支持,分别是proxy和reader,proxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。 这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader,将data数组中的数据转换成对应的几个PersonRecord实例,然后放入store中。 store创建完毕之后,执行store.load()实现这个转换过程。 经过转换之后,store里的数据就可以提供给Grid或ComboBox使用了,这就是Ext.data. Store的最基本用法。 Ext.data.Store对数据进行排序Ext.data.Store提供了一系列属性和函数,利用它们对数据进行排序操作。 可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式,如下面的代码所示。
    var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, PersonRecord),
    sortInfo: {field: 'name', direction: 'DESC'}
    });
     
    24、Ext.data.Model
    Model代表应用程序管理的一些对象。例如,我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者、产品和汽车等定义一个Model。这些Model在 模型管理器中注册,被Store使用, 而这些Store又被许多 Ext中许多与数据绑定的组件使用.。
          Model定义为字段、任意方法和与模型相关的属性的集合。例如:
          
    1. Ext.define('User', {  
    2.     extend: 'Ext.data.Model',  
    3.     fields: [  
    4.         {name: 'name',  type: 'string'},  
    5.         {name: 'age',   type: 'int', convert: null},  
    6.         {name: 'phone', type: 'string'},  
    7.         {name: 'addree', type: 'string'}  
    8.     ],  
    9.   
    10.     changeName: function() {  
    11.         var oldName = this.get('name'),  
    12.             newName = oldName + " 六指琴魔";  
    13.   
    14.         this.set('name', newName);  
    15.     }  
    16. });  
    创建模型User的实例并调用我们定义的任何模型的逻辑:
    [javascript] view plain copy
    1. var user = Ext.create('User', {  
    2.     name : '六指琴魔',  
    3.     age  : 26,  
    4.     phone: '13800138000'  
    5. });  
    6.   
    7. user.changeName();  
    8. user.get('name'); 
     
  • 相关阅读:
    oracle使用expdp备份数据库
    用Setuptools构建和分发程序包
    C#5.0-原生异步编程方式
    任务并行库
    线程-线程池1
    多线程-3(同步)
    多线程-2(线程同步)
    线程---1
    高性能-GC3
    高性能-GC2
  • 原文地址:https://www.cnblogs.com/YangBinChina/p/8971290.html
Copyright © 2020-2023  润新知