extjs一个普通页面里面有什么

    现在又在做一个二次开发.(上回是jeecms，这回是G4Studio)。写这篇文章的目的是理清自己的思路，同时积累些二次开发的心得。

    二次开发一般大家都是找个合适的开源程序加以运用，来实现快速开发的。

    一开始接触，总是喜欢“东张西望”一会，可能是我以前没有做经验总结的原因。首先，我们就要找到核心部分，即最重要的配置文件类似于web.xml（在G4Studio中是struts-config.xml）运气好的话，里面会有注释的，不好的话，一般从那些名字可以看出一些名堂出来的。往小的方向看：关键是要弄懂你自己要做的那部分，对整体的印象要求不是很高。往大的方向看：要基本弄懂这个项目大体框架，怎么实现的，构成的，哪些功能主要是在哪个项目位置，怎么分布的。

    我自己接触地不是很多，只能谈谈自己知道的东西。

    公共部分：一般至少会包含一个常量类，以及公共方法类（像选择弹窗，字典下拉列表）

    页面部分：aaa.js和aaa.jsp

            aaa.jsp里面主要是import一些需要的js，还有一些数据的过度

            页面最重要的内容是在js里面：

                   首先是个Ext.onReady.(在ExtJs库文件及页面内容加载完后，ExtJs就会执行onReady里面的函数)。然后就是那个函数里面就是真正的内容了：（我谈的是我自己接触的，仅供借鉴观赏）

        1.一个Ext.form.Form.FormPanel，一种专门用于管理表单中输入字段的布局，用来提供搜索参数，实现搜索功能。

          

var queryForm = new Ext.form.FormPanel({
		region : 'north',
		title : '<span class="commoncss">查询条件</span>',
		collapsible : true,
		labelWidth : 50,
		labelAlign : 'right',
		bodyStyle : 'padding:3 5 0',
		buttonAlign : 'center',
		height : 95,//65+行数*30
		items : [{}],
                buttons : [{
			text : '查询',
			iconCls : 'previewIcon',
			handler : function() {
				//查询方法
			}
		}, {
			text : '重置',
			iconCls : 'tbar_synchronizeIcon',
			handler : function() {
				xxxForm.getForm().reset();//表单重置
			}
		}]
	});

 

     参数：region ：布局的位置（如north）

                title ：标题

                collapsible ：是否可以折叠

                labelAlign：标签对齐方式

                items ：一个独立的容器（里面可以放置隐藏域，文本框，下拉列表等）

         2.一个Ext.grid.ColumnModel，用来显示搜索出的结果

    

var cm = new Ext.grid.ColumnModel([ rownum, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : 'ID',
		dataIndex : 'id',
		hidden : true,
		sortable : true
	}, {
		header : '备注',
		dataIndex : 'memo',
		hidden : false,
		sortable : true
	}]);

 

            里面的构造参数是一个config组成的数组，参数有：

                header：头部名称

                dataIndex ：store中药绑定的字段名称

                sortable：是否支持排序

                hidden：是否隐藏

                renderer ：function 可以使用这个构造参数格式化数据（不是很懂，直接用上了）

        3.一个Ext.data.Store，是Ext中用来进行数据交换和数据交互的标准中间件，作用是：从后台获取数据并将其转换成Record供页面使用。（即页面的grid等就可以使用了） 创建完毕之后，执行store.load()就是实现这个转换过程。    

    

var store = new Ext.data.Store({
		//获取数据的方式
		proxy : new Ext.data.HttpProxy({
			url :'请求链接'
		}),
		reader : new Ext.data.JsonReader({
			totalProperty : 'TOTALCOUNT',
			root : 'ROOT', //json中列表数据根节点
		}, [{
			name : 'id'//对应字段name
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}, {
			name : 'id'
		}])
	});

 

              通过proxy从某个路径获取原始资源，然后再通过reader转化成record实例（分页的话，用                       totalProperty记录下总条数）

        4.一个new Ext.PagingToolbar 分页工具栏

    

var bbar = new Ext.PagingToolbar({
		pageSize : number,
		store : store,
		displayInfo : true,
		displayMsg : '显示{0}条到{1}条,共{2}条',
		plugins : new Ext.ux.ProgressBarPager(), //分页进度条
		emptyMsg : '没有符合条件的记录',
		items : [ '-', '  ', combo ]//combo为你定义的下拉列表
	});

 

              pageSize : 总条数

              displayMsg : '显示{0}条到{1}条,共{2}条',

              emptyMsg : "没有符合条件的记录",

              items 一般里面包含着个下拉列表

                         对这个下拉列表进行事件监听：

                                      combo.on("select",function(){})实现store的reload

        5.一个Ext.Toolbar表格工具栏 主要属性items，一般是在这里提供，新增，修改，删除，刷新等功能

                          items : 用到的参数有：text、iconCls、id、handler

   

var tbar = new Ext.Toolbar({
		items : [{
			      text : '新增',
			      iconCls : 'addIcon',
			      id : 'id_tbi_add',
			      handler : function() {
			    	  addInt();
			      }
             },{
                  ......//按钮属性
                  handler : function() {
                           //要调用的方法
                  }
             }]
         });

 

        6.一个Ext.grid.GridPanel 最重要的表格实例

                我们在这里将store、cm、tbar、bbar扔进去，当然你还有其他一些属性

         

var grid = new Ext.grid.GridPanel({
          title : '',
          height : 360,
          id : 'id',
          autoScroll : true,
          frame : true,
          region : 'center',
          store : store, // 数据存储
          stripeRows : true, // 斑马线
          cm : cm, // 列模型
          tbar : tbar, // 表格工具栏
          bbar : bbar,// 分页工具栏
          viewConfig : {// 不产横向生滚动条, 适用于列数比较少的情况
          forceFit : true
          },
          loadMask : {
          msg : '正在加载数据,请稍等...'
          }
          });

 

                 剩下的就是一些监听事件，及操作方法的实现像新增、查询、重置、删除等几个基本操作