Extjs系列篇（1）----基础运用

一、环境的搭建

从官网下载Extjs 4.1 的工具包，里面的东西很多，我们在开发阶段并不需要太多的东西，因此保留了我们需要用到的最少的几个文件：

 

其中resources为资源和一些Extjs样式文件，local为语言包，Extjs4.0新增加了bootstrap.js这样一个文件，我们可以看下它的源码来了解一下它的作用：

    if (isDevelopment === null) {
        for (i = 0, ln = localhostTests.length; i < ln; i++) {
            test = localhostTests[i];

            if (host.search(test) !== -1) {
                isDevelopment = true;
                break;
            }
        }
    }

    if (isDevelopment === null && window.location.protocol === 'file:') {
        isDevelopment = true;
    }

    document.write('<script type="text/javascript" charset="UTF-8" src="' + 
        path + 'ext-all' + (isDevelopment ? '-dev' : '') + '.js"></script>');

我们可以了解到，其实它的作用就是判断我们是处于开发模式还是调试模式，然后动态的给我们引入所需要的js文件。因此如果我们需要在页面内编写Extjs，只需要为Extjs引入这样两个文件：

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/bootstrap.js"></script>

这样我们最简单的一个环境就搭建完成了。

 

二、Hello World

学习每个语言必定都是从Hello World开始的，在javascript中我们使用alert来弹出提示框，而在Extjs中我们采用如下的方式：

(function(){
    Ext.onReady(function(){
        Ext.MessageBox.alert("hello","Hello World!");
        }）
})();

 

三、Extjs 中Api的基本用法：

1.Ext.Array.every();

API中是这样描述的：

every( array, fn, scope ) : Boolean

Executes the specified function for each array element until the function returns a falsy value. If such an item is found, the function will return false immediately. Otherwise, it will return true.

Parameters

• array : Array
   
• fn : Function

  Callback function for each item

  Parameters

  • item : Mixed

    Current item.

  • index : Number

    Index of the item.

  • array : Array

    The whole array that’s being iterated.

• scope : Object

  Callback function scope

Returns

• Boolean

  True if no false value is returned by the callback function.

  也就是这个函数返回的结果是一个boolean类型的，它会将传入的数组参数进行遍历，直到条件不成立返回false的时候结束。如果一直成立则返回结果为true。

  例如：将会打印出第一个<0 的元素之后结束

          var arr = [2,3,-3,0,5,9,-2];
  
          Ext.Array.every(arr,function(item){
              if(item<0){
                  alert(item);
                  return false;
              }else{
                  return true;
              }
          },this);

  2.Ext.Array.filter()

  filter( array, fn, scope ) : Array

  Creates a new array with all of the elements of this array for which the provided filtering function returns true.

  这个意思是我们将遍历这个数组，将其中符合条件返回true的元素放入一个新的数组。

  例如：将数组中所有>0的原始返回一个新的数组。

          var newArray = Ext.Array.filter(arr,function(item){
              if(item<0){
                  return false;
              }else{
                  return true;
              }
          },this);
  
          alert(newArray.join(','));

  四、扩展object

          Object.prototype.get = function(key,defv){
              if(this[key]){
                  return this[key];
              }else{
                  if(defv){
                      return defv;
                  }
              }
          };
  
          var person = {
                  name:'luoxiao',
                  age:25
          }
  
          alert(person.get("name"));

  最后Extjs的包中的Example文件夹中有很多的例子，需要放到服务器上去跑，这个资源是我们学习非常有用的一个工具。