ExtJS 学习笔记

首先在ExtJS官方网站下载了ExtJS 2.2版，看了下文件包，5MB，很大，先精简了再说。
必要的部分：
1.ext-all.js   2.adapter/ext/ext-base.js   3.build/locale/ext-lang-zh_CN.js  4.resources整目录
有了这些部分即可满足所有应用。
在程序引入ExtJS框架：
<link href=”/scripts/ext/resources/css/ext-all.css” rel=”stylesheet” type=”text/css” />
<script src=”/scripts/ext/adapter/ext/ext-base.js” type=”text/javascript”></script>
<script src=”/scripts/ext/ext-all.js” type=”text/javascript”></script>
<script src=”/scripts/ext/build/locale/ext-lang-zh_CN.js” type=”text/javascript”></script>
<script src=”/scripts/myExt.js” type=”text/javascript”></script>
此路径为我个人的程序结构，请根据项目情况对应调整，下面我们的ExtJS已经可以正常使用了。
下面实现我们的第一个程序，不做HELLO WORLD了。没有什么实际意义。
先上效果图：

解释一下这个图做到的几个功能：
1.可以选择显示那个列，在列的选项中。  2.可以根据编号进行排序ASC,DESC。
3.可以鼠标按住各列的名称进行拖拽。
贴代码咯：
//从图里可以看出,我们这里的数据即为各列的名称，header为显示内容，dataIndex为程序用到的字段名
//其中编号这一行的代码和其他行略有不同，sortable:’true’标识了此行可以排序。
var columns = new Ext.grid.ColumnModel([
  {header: '编号', dataIndex: 'id', sortable:'true'},
  {header: '名称', dataIndex: 'name'},
  {header: '描述', dataIndex: 'descn'}
]);
//下面的数据呢，在图中同样可以看出为列表中的各行数据。为二维数据形式。
//如果对JSON不了解可以参考：JSON入门指南
var data = [
  ['1', 'name1', 'descn1'],
  ['2', 'name2', 'descn2'],
  ['3', 'name3', 'descn3'],
  ['4', 'name4', 'descn4']
];
//Ext.data.Store是ExtJS对其使用数据的一种储存结构，如果不理解没关系，
//只要知道是数据就要先Store一下,我们用的是数据数组，就要用Ext.data.ArrayReader来处理。
//如果是XML或者是其他类型的数据，同有方式可处理，学会一种其他的在查手册吧。
// Ext.data.MemoryProxy 是专门解析JS变量的。
//此处ArrayReader中数据的name 和我们之前定义的列的dataIndex相等，上面定义的是列名，
//而这里定义的是和列名对应的数据，mapping: 0为现实时的横向排序，0为第一个。

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({},[
    {name: 'id', mapping: 0},
    {name: 'name', mapping: 2},
    {name: 'descn', mapping: 1}
  ])
});
//我们之前只是将数据放入Store，这里需要通过store.load()进行初始化。

store.load();
//到这里我们的列表标题 以及 数据全部都弄好了,下面让我们显示他们吧。
//这里的Ext.onReady(function(){});表示在文档可用的时候执行function内部的内容。
//Ext.grid.GridPanel是我们数据的呈现方式，相关方式还有TAB等等，之后会有所接触。
//rederTo:hello 表示我们的数据要在一个id为hello的div中呈现，如果不加renderTo属性
//也可以通过grid.render(’这里写ID’);来呈现，这个方法就不要写在GridPanel类的属性中了，
//将它放到外面，在你需要时候执行那个就可以。
//其中title为标题,height为高,ds为显示的数据，cm为对应列名，也就是我们最先写的那些小家伙。

Ext.onReady(function () {
  var grid = new Ext.grid.GridPanel({
    renderTo:”hello”,
    title: ‘hello’,
    height: 150,
    ds: store,
    cm: columns
  })
});
//细心的读者也许会发现，目前为止我们所有列的宽度都是一样的。
//那么应该怎么调整呢？我们可以在定义列的时候直接写入宽度。如下
var columns = new Ext.grid.ColumnModel([
  {header: '编号', dataIndex: 'id', sortable:'true', width: 150},
  {header: '名称', dataIndex: 'name', width: 80},
  {header: '描述', dataIndex: 'descn'}
]);
//也可以在添加 viewConfig:{forceFit:true} 这个参数将使列自动均分
Ext.onReady(function () {
  var grid = new Ext.grid.GridPanel({
    renderTo:”hello”,
    title: ‘hello’,
    height: 150,
    ds: store,
    cm: columns,
    viewConfig:{
      forceFit:true
    }
  })
});
//有时候我们可能想让一些列按照一定的宽度显示，而剩余的列占满整个表格。
//下面的方法可以实现这种需要哦。我们首先来为列添加自己的ID,这个是必须的哦。
//然后为GridPanel添加autoExpandColumn属性,属性的值即为我们想让它可以自己伸缩的列的ID
var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({},[
    {id: 1 ,name: 'id', mapping: 0},
    {name: 'name', mapping: 2},
    {id: 2 ,name: 'descn', mapping: 1}
  ])
});
Ext.onReady(function () {
  var grid = new Ext.grid.GridPanel({
    renderTo:”hello”,
    title: ‘hello’,
    height: 150,
    ds: store,
    cm: columns,
    autoExpandColumn: 2
  })
});
下面让我们继续我们的排序之旅。
//下面我们可能像对一个列排序太不过瘾了，三排一起来，好的，让我们在名称,描述列加上排序标签，好了
//我们的名称 和 描述 已经可以排序了。
var columns = new Ext.grid.ColumnModel([
  {header: '编号', dataIndex: 'id', sortable:'true'},
  {header: '名称', dataIndex: 'name', sortable:'true'},
  {id:3 , header: '描述', dataIndex: 'descn', sortable:'true'}
]);
呀呀 似乎还有一个问题 我们的描述为什么是英文的，我CET4还没过，我们还是修改成中文吧。
中文也不好,就a,bo,ci,de吧。
var data = [
  ['1', 'name1, '啊'],
  ['2', 'name2', '波'],
  ['3', 'name3', '刺'],
  ['4', 'name4', '得']
];
好 下面我们看下效果：

很和谐嘛 ～ 再试试 按照描述排序

太刺激了,发现了么？似乎不是按照我们习惯的拼音顺序进行的排序！为什么呢，因为这里是按照外国人的喜欢ascii码的排序..
如果能按照我们的习惯进行处理呢？试试将下面的代码添加在Ext对象初始化之前吧~
Ext.data.Store.prototype.applySort = function(){
  if(this.sortInfo && !this.remoteSort) {
    var s = this.sortInfo, f = s.field;
    var st = this.fields.get(f).sortType;
    var fn = function(r1, r2) {
      var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
      if(typeof(v1) == “string”){
        return v1.localeCompare(v2);
      }
      return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
    };
    this.data.sort(s.direction, fn);
    if(this.snapshot && this.snapshot != this.data){
      this.snapshot.sort(s.direction, fn);
    }
  }
};
社会继续和谐了.
PS：这个代码是复制自DOJO CHINA

好了 排序被我们一拖鞋给和谐掉了，下面是不是该玩点新鲜的了呢.
很多时候，我们会遇到一些变态的UI要求（我们的UI很变态）,他们突然想到 想在编号签名加个图片来显示排名。
我们要怎么做呢?看看下面的代码吧。
var columns = new Ext.grid.ColumnModel([
{
  header: '编号',
  dataIndex: 'id',
  sortable:'true',
  renderer:setImg
},
{
  header: '名称',
  dataIndex: 'name',
  sortable:'true'
},
{
  id:3 ,
  header: '描述',
  dataIndex: 'descn',
  sortable:'true'
}
]);
function setImg($val) {
  return “img” + $val;
}
发现到哪里不一样了么？我们在 ColumenModel 中添加了renderer:setImg
并且添加了一个函数 setImg,这个参数以及函数可以将你的列的值修改为setImg函数的返回值
这里我们仅做个例子,在应用中你完全可以将返回值，设置为一个<IMG>标签或者<DIV>
好了,我们看看现在的效果吧

怎么样？是不是又有了好多想法,那么自己也试一试吧。
PS：我们可以在function 通过IF 或者其他方法对数据进行判断、处理哦
很好，让我们继续。
现在我们的列表已经有了编号，名称 以及 描述，还缺少些什么呢？我们的货物是什么时候到的呢？
对了，是日期。这个在基本每个列表都有的参数我们可不能忘记啊。
看代码说话：
var columns = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),
{
  header: '编号',
  dataIndex: 'id',
  sortable:'true',
  renderer:setImg
},
{
  header: '名称',
  dataIndex: 'name',
  sortable:'true'
},
{
  header: '描述3',
  dataIndex: 'descn',
  sortable:'true'
},
{
  header: '日期',
  dataIndex: 'dateline',
  sortable:'true',
  type:'date',
  renderer: Ext.util.Format.dateRenderer("Y-m-d")
}
]);
看代码中的粗体部分，我们在ColumnModel对象中添加了一个新的列，名字是日期,索引是dateline,可以排序。
好了，下面是新的了。type:’date’，我们声明这行的数据是日期，然后加一个处理函数Ext.util.Format.dateRenderer(’Y-m-d’)，
告诉ExtJS我们日期的格式是Y-m-d的形式。
NEXT: ^ _ ^
var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({},[
  {
    name: 'id',
    mapping: 0
  },
  {
    name: 'name',
    mapping: 2
  },
  {
    name: 'descn',
    mapping: 1
  },

  {
    name: 'dateline',
    type: 'date',
    dateFormat: 'Yxmxd',
    mapping: 3
  }
  ])
});
我们有在数据中添加了一列对应日期列的内容，主要看这里     dateFormat: ‘Yxmxd’, 为什么是x?
看我们下面的数据，
var data = [
['1', '啊', 'descn1', '2008x09x12'],
['2', '波', 'descn2', '2008x09x12'],
['3', '测', 'descn3', '2008x09x12'],
['4', '的', 'descn4', '2008x09x12']
];
我们的日期数据中的间隔符我们用的是 2008×09x12 也是用X作为间隔符，用x的意思是为了叫大家理解 这里你可以用任何你喜欢的符号作为间隔副
如果你们数据库中存的是形如2008月月09年12的数据（看看，这就叫变成艺术），那么我们只需将dateFormat: ‘Yxmxd’ 换为 dateFormat: ‘Y月月m年d’,
PS：间隔符不可包含date函数要用到的关键字
好了 看看我们做出来的效果吧

日期已经和谐的出来了，但是朋友们可能已经想到了，数据库中在很多时候存的都是UNIX STAMP,我们应该怎么处理呢？
这就要用到javascript本身对时间戳的处理了，话不多说，上代码
首先我们将数据修改为时间戳的格式：
var data = [
//['1', '啊', 'descn1', '2008月月09年12'],
//['2', '波', 'descn2', '2008月月09年12'],
//['3', '测', 'descn3', '2008月月09年12'],
//['4', '的', 'descn4', '2008月月09年12']
['1', '啊', 'descn1', '1230433473'],
['2', '波', 'descn2', '1230433473'],
['3', '测', 'descn3', '1230433473'],
['4', '的', 'descn4', '1230433473']
];
在修改一下我们的store，将日期类型，以及 format 注释掉
var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({},[
  {
    name: 'id',
    mapping: 0
  },
  {
    name: 'name',
    mapping: 2
  },
  {
    name: 'descn',
    mapping: 1
  },

  {
    name: 'dateline',
//    type: 'date',
//    dateFormat: 'Y月月m年d',
    mapping: 3
  },
  {
    name: 'con',
    mapping: 4
  }
  ])
});
好了，在修改一下renderer函数
var columns = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),
{
  header: '编号',
  dataIndex: 'id',
  sortable:'true',
  renderer:setImg
},
{
  header: '名称',
  dataIndex: 'name',
  sortable:'true'
},
{
  header: '描述3',
  dataIndex: 'descn',
  sortable:'true'
},
{
  header: '日期',
  dataIndex: 'dateline',
  sortable:'true',
  type:'date',
  //renderer: Ext.util.Format.dateRenderer("Y-m-d")
  renderer:date_format
},
{
  header: 'Controller',
  dataIndex: 'con',
  renderer: DeleteColumn
}
]);
我们现在用date_format函数来处理我们的日期。但是这个函数在那里呢，看下面：
function date_format(value) {
    return new Date(parseInt(value) * 1000).format(’Y-m-d’);
}
好了,代码工作结束,下面看效果: