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: '示例窗口, width: 300, height: 200 }); win.show(); 

  7、 
 Ext.apply 可以简单的理解成把第三个参数（如果有的话）及第二个参数中的属性拷贝给第一个参数对象 

  8、 
 ext.ajax.timeout 

  超时设定 

  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('*'); 

 
 11、Ext.QuickTips.init() 

 
 作用：悬停提示 

  初始化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： 

 
 view source 

 
 print 
 ? 

  1.function getUser(name,age){ 

  2.alert("name: "+name + " age: "+age); 

3.}

  调用方法：getUser(); // 可以不传参数 

  getUser("cat"); // 可以只传递一个参数 

  getUser("cat"，20); // 传两个参数 

  getUser("cat"，20，2，"dog"); // 传两个以上的参数 

  参考： 
 http://extjs.org.cn/node/585 

 
 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定义为字段、任意方法和与模型相关的属性的集合。例如: 

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int', convert: null},
{name: 'phone', type: 'string'},
{name: 'addree', type: 'string'}
],
changeName: function() {
var oldName = this.get('name'),
newName = oldName + " 六指琴魔";
this.set('name', newName);
}
});

  创建模型User的实例并调用我们定义的任何模型的逻辑: 

 
 [javascript] view plain copy 

var user = Ext.create('User', {
name : '六指琴魔',
age : 26,
phone: '13800138000'
});
user.changeName();
user.get('name');

猜你喜欢