Ext第一周：史上最强学习笔记---GridPanel（基础篇）

 我不想教各位新手什么高级技术，因为我也在研究，只是想教大家一个思考的方向，能够具有举一反三的能力，能够真正学会Ext和开始深入了解。如果你想实现什么特效，这个文字不适合你，但如果你想Ext文章，我想鄙人的小文非常适合你。

  另：这篇教程是建立在Ext2.2上的。这个很多教程都没说明。让人很糊涂。我在此特别说明

  网上很多教程，但是实际使用并不是很多，我想作为一个星期一个星期的总结来给各位网络上的朋友带来帮助。希望各位有用。我会从每个细节都说明，尽量不漏掉作为初学者需要知道的基础知识。第一次写教程，见笑了。

  因为我学这个是这样一个过程，通过一个控件了解其他的控件，剩下的就是属性查API了。API我自己在翻译CHM版的。因为是个人操作。所以时间有限。。大家见谅。

 在Ext下。首先接触的一定是Grid。我也是如此。我是因为 Grid与Ext结缘。

 下面先说一下Ext类的申明形式。

 以Grid为例

 

 var grid=new Ext.form.GridPanel({
     这里是属性。
});

 这个申明和java的面向对象很相似。以new关键词作为建立GridPanel类的实例，关于面向对象的基础知识就不在这里展开了。只是在写这个总结的时候常用到面向对象的概念。个人觉得学程序，不管你学不学java。think in java必须看完，如果你想学好最好看英文版。因为一句话你可以反复的揣摩。加深印象。我才看到一半都觉得他对一个人的程序思维起很大的作用。好了不走题了。

 知道OOP的都知道，在类的里面有一个构造器，在实现类的实例的时候将会初始化这个构造器内的属性值或者调用方法。

 但是在Ext中的属性赋值不是“=”而是":"。

  上面说的是理论的，实际上过程就是这样。

  var grid = new Ext.form.GridPanel();实例化一个类的对象。

  {}里面包含的就是传递给这个类的初始化属性值。因为核心代码我还没研究，也没到那份上，所以具体如何传递和实现就不说明了，在以后的Ext学习经验里会说明的。

  那将上面的例子扩展一下。

 

 var grid=new Ext.form.GridPanel({
        id: 'list-account-panel',                 
        ds: dataStore,
        cm: userCM,	
        sm: selectBoxModel,
        tbar: menubar,
        bbar: pagingbar,
        loadMask: {msg: 数据加载中...'},
        layout: 'fit',
        autoScroll:true
});

  这些是常用的属性，将从这里向其他的部分扩展出去。

  这样就申明了一个实力对象并且将其初始化。

  你明白了这个过程，如果是真的理解了，只要你熟悉了API .了解到组件的属性和其定义的方法，你可以去创建任何你想要的组件了。如GridPanel.Panel,Tree.其实道理是胡同的。好了，将好这个关键的基础部分，后面的就是属性了，有兴趣的可以继续看。

  有些教程里面这里会用到Ext2.2的一个属性el，这个属性是将控件绑定到指定的页面元素中，但是就因为这个el，而将大家的思维固定在了只能绑定在页面元素中了。事实上，有时候要将grid加入tabPanel中的。这个时候就不需要el。有时候创建自己的GridPanel新类并继承GridPanel类。在创建过程中使用ext.applyif方法,讲新类里没有而原有类里有的属性复制过来。这样在调用新类的时候，新类的传递可以传递el这样单独的属性值。我已经建立好一个类的封装。下面会说到我说的这个扩展类的封装。先把grid的基本知识说完。

  看看上面说的例子吧，id，是这个Ext组建的唯一id号，在整个项目里面id号要尽可能唯一，这方便自己识别也不容易出其他问题。比如说tabPanel组件的html调用的时候就会出现id问题。

  ds，这是设置数据源。

  例子具体代码如下：

 

   dataStore = new Ext.data.Store({
   proxy: new Ext.data.HttpProxy({
      url: 'php/article_list.php',
      disableCaching:false
   }),
  
   reader: new Ext.data.JsonReader({
    root: 'results',
    totalProperty: 'total',
    id:'id'
   },[
      {name: 'id'},
      {name: 'name'},
      {name: 'typename'},
      {name: 'time'},
   ])
  }); 
  this.dataStore.load({params:{start:0, limit:this.myPageSize}}); 

  这里要说明的东西很多。。

  一个网站上面既然用到了Ext肯定不会是静态的，因为我最多的是于服务器交互而不是直接读取XML文件。所以我这里使用了服务器读取资料的例子。

    proxy: new Ext.data.HttpProxy({
      url: 'php/article_list.php',
      disableCaching:false
   })；
  这个很简单了啊。一看就明白。HttpProxy这是向本地的文件中传递数据请求。简单点理解就是这样。核心代码没研究，具体操作过程不名。但是作为类。只需要知道怎么用就成了。

  但这里有个概念，用到了匿名函数。不能说匿名函数吧。。。怎么说呢。。。

  proxy属性是通过一种形式向文件发送请求。。属性赋值可以是已经创建好的实例名，也可以是个以new关键词新建的匿名实例。这样说不知道能否明白。

  后面的属性reader是设定这个数据源的数据读取方式。这个例子是用的jsonReader.还可以用ArreyReader。这个看具体需求了。属性值可以是对象也可以是匿名实例对象。好像也可以是方法。没试过，只是个设想。

 new Ext.data.JsonReader({
    root: 'results',
    totalProperty: 'total',
    id:'id'
   },[
      {name: 'id'},
      {name: 'name'},
      {name: 'typename'},
      {name: 'time'},
   ])

再来说这一部分。这是比较简洁和标准的JsonReader方式了。

先说明Json的数据格式，这个很重要，我在这个上面载了个大跟头，只知道用json数据传送，却不知道是什么格式。

（{"total":"5","results":["id":"28","name":"SamPeng","typename":"这是种类","time":"2008.02.02"]}）

这是一条返回记录。如果是多条。

（{"total":"5","results":["id":"28","name":"SamPeng","typename":"这是种类","time":"2008.02.02"，{第二条}，{第三条}，{第四条}]}）

能看明白吗？呵呵，不明白那我也多打几个字。总结一下。

 如果是自己构建一个json数组给Ext的话。应该是这样的格式。

{test:'test'}

必须背这个大括号扩起来。

前面test就向上面申明的name属性，作为标记符号，告诉JsonReader获取这个数据后该如何截断处理。

我用的php写的返回我上面例子的返回json数据。

Echo $callback.'({"total":"'.$article_NUM.'","results":'.json_encode($result_array).'})';
看见了吗。我必须去构建这个json数组的格式，并且标记符号必须和jsonReader上的一样。

也就是total和results所截取的值是在这个返回里规定好了的。如果格式不同，将读不出数据来。

再回头看root属性，就是绑定results标记符号后面的json数据格式值了。在jsonReader后面的属性

     {name: 'id'},
      {name: 'name'},
      {name: 'typename'},
      {name: 'time'},

就是来对json数组进行截取处理的。

最后进行加载。因为这只是个定义，并且进行实例化。并没对其进行任何操作。

这个很好理解。就像你洗衣服，把衣服仍进洗衣机了，但你不开开关，不接电源，衣服是不会干净的。

由于创建了这个Stroy数据源，所以可以对其进行调用他的方法了。Stroy下有一个方法是load。对其数据进行加载。也就是开始洗衣了。呵呵~

 

接下来回到上面的GridPanel的属性

cm: userCM

这是设定好表的列头。什么。你不知道什么叫列头。。你可以洗洗睡了。

 

		var cm = new Ext.grid.ColumnModel([
			selectBoxModel,
			{header:'文章序号',dataIndex:'id', tooltip: '文章编号'},
			{header:'文章标题',dataIndex:'name',tooltip: '文章名称'},
			{header:'文章类型',dataIndex:'typename',tooltip: '文章类别'},
			{header:'修改时间',dataIndex:'time',tooltip: '修改时间'}
		]);
	    cm.defaultSortable = false;

 不想多说什么。。这里唯一要说明的：tooltip是开启鼠标提示。其他的和创建新实例没什么区别。new->类名->构造构造器->属性

 defaultSortable是设置是否排序。我是设置的假，因为我的Ext没本地化，排序那个按钮按下来是个英文的。所以我设置了假。你也可以单独为列设置。

        tbar: menubar,
        bbar: pagingbar,
这两个属性是用来设置头部工具条和底部工具条的。工具条上可以有按钮。

这是底部和顶部的工具按钮。说明写在程序代码里。。我有写描述的习惯。

 

		var menubar = [{
			text:'添加',
			tooltip:'添加一个新文章',//按钮提醒功能
			iconCls:'addItem',//图标拉。看英文都懂了
			handler: function(){//handler属性后面是跟一个方法，是绑定你单击这个按钮后的事件处理
				var createWin = new SamPeng.account.Create();//我是将文件打成类包的。所以这里直接创建实例。
				createWin.show();//添加页面显示，这个方法就是省略了el绑定问题。
			}
		},'-',{
			id: 'grid-edit-button',
			text:'修改',
			tooltip:'修改这条文章',
			iconCls:'editItem',
			disabled:true,
			handler: function(){
				var record = Ext.getCmp('list-account-panel').getSelectionModel().getSelected();
				var editWin = new SamPeng.Grid.Edit({id: record.id});  
				editWin.show();//修改界面显示
			}
		},'-',{
			id: 'grid-delete-button',
			text:'删除',
			tooltip:'删除选定的文章',
			iconCls:'remove',
			disabled:true,
			handler: function(){
				new SamPeng.Grid.DeleteItem({panel: 'list-account-panel'});
			}
		}];
		var pagingbar = new Ext.PagingToolbar({
			pageSize: this.myPageSize,
			store: this.dataStore,
			displayInfo: true,
			displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
			emptyMsg: "没有数据"
		});  //这是底部按钮，一个分页的底部。呃。。不知道该怎么说明，这个我是写好了直接copy的别人的。觉得这里没什么必要变化。

    ok。基础部分讲完了。。。接下来的文章我会讲解将其封装在类里面并且作为继承GridPanel类的新类。

    再次重复申明。在我这里你不可能得到完整的例子，不是我没有，而是我觉得那是在害你。你更需要的是去查API。知道方法格式，查一下API。剩下的不就是完成你的程序思想了么。感谢大家观看我的教程。谢谢。

    很讨厌速食化的教程，但我不知道入了俗套没有。呵呵。希望对大家有所帮助。

    转载者。。。我知道有这样的转载者的。连内容的实用性不看就转了。

    转载者，请著名作者:SamPeng。谢谢。

  我不想教各位新手什么高级技术，因为我也在研究，只是想教大家一个思考的方向，能够具有举一反三的能力，能够真正学会Ext和开始深入了解。如果你想实现什么特效，这个文字不适合你，但如果你想和我一起学习Ext，我想鄙人的小文非常适合你。

评论

2 楼 wlh269 2009-03-17  

楼主讲的真好

1 楼 llm6101 2008-10-07  

支持个 ! 加油