Extjs4------define使用之自定义toolbar

Extjs中3和4的版本是一个分水岭，3中很多语法在4中已经消除。并且4以及以上版本，定义函数等等语法发生巨大改变。

此文章主要是针对新手以及那些对define使用不熟练的人。

自定义toolbar原因，用于toolbar原来的功能不定满足需要，因此需要自定义toolbar，并且与后台（java）进行交互数据，并展现。

下面的例子有注释，就不过多介绍了

Ext.define('com.scy.menu.toolbar', {
	extend : 'Ext.toolbar.Toolbar',
	initComponent : function() {
		
		//经过测试在这里是不能用Ext.data.Store的，只能使用它的子类
		if(!this.store) {
			 this.store = new Ext.data.JsonStore({
			    storeId: 'myStore',
			    proxy: {
			        type: 'ajax',
			        url: 'http://localhost:8080/extjs/servlet/ToobarServlet',
			        reader: {
			            type: 'json',
			            root: 'menus'
			        }
			    },
			    fields: ['id','code','leaf','name','parentNode']
			});
		}
		
		this.store.on('load', this.loadRecords, this);
		this.store.load();
		this.callParent(arguments); // 调用你模块的initComponent函数  
	},
	
	loadRecords : function() {
		this.menuCache = {};  //暂时性存储对象
		this.store.sort('code');
		this.store.each(function(record) {
			if (record.get('leaf') == "0" && record.get('parentNode') == "0") {
				var menu = new Ext.menu.Menu({  
                    code: record.get('code')
                });
				this.add({
					width:70,
					text:record.get('name'),
					menu : menu
				},'-');
				this.menuCache[record.get('code')] = menu;
			} else if(record.get('leaf') == "0"){
				var menu = new Ext.menu.Menu({  
                    code: record.get('code')
                });
				this.menuCache[record.get('parentNode')].add({
					width:70,
					text:record.get('name'),
					menu:menu
				});
				this.menuCache[record.get('code')] = menu;
			} else {
				this.menuCache[record.get('parentNode')].add({
					width:70,
					text:record.get('name'),
					handler:function()　{
						alert(record.get('name'));
					}
				});
			}
			
		},this); //each方法中传递两个参数，一个是function方法，另一个是可选项scope，其实function中record为json对象
		
		//此时toolbar创建完成没有存在价值，删除掉
		delete this.menuCache;
		//强制性手动的加载这个布局
		this.doLayout();
	}
});

后台数据格式

package com.sun.toolbar;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ToolbarServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
	
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("limit:"+request.getParameter("limit")+"   "+"start:"+request.getParameter("start"));
		
		response.setContentType("text/html;charset=utf-8");
			StringBuffer sb = new StringBuffer();
			sb.append("{menus:");
			sb.append("["); 
			sb.append("{\"id\":1,\"code\":\"01\",\"leaf\":\"0\",\"name\":\"北京\",\"parentNode\":\"0\"},");
			sb.append("{\"id\":2,\"code\":\"02\",\"leaf\":\"0\",\"name\":\"上海\",\"parentNode\":\"0\"},");
			sb.append("{\"id\":3,\"code\":\"03\",\"leaf\":\"0\",\"name\":\"济南\",\"parentNode\":\"0\"},");
			sb.append("{\"id\":4,\"code\":\"04\",\"leaf\":\"0\",\"name\":\"青岛\",\"parentNode\":\"0\"},");
			sb.append("{\"id\":5,\"code\":\"05\",\"leaf\":\"1\",\"name\":\"朝阳区\",\"parentNode\":\"01\"},");
			sb.append("{\"id\":6,\"code\":\"06\",\"leaf\":\"1\",\"name\":\"海淀区\",\"parentNode\":\"01\"},");
			sb.append("{\"id\":7,\"code\":\"07\",\"leaf\":\"1\",\"name\":\"浦东区\",\"parentNode\":\"02\"},");
			sb.append("{\"id\":8,\"code\":\"08\",\"leaf\":\"1\",\"name\":\"历下区\",\"parentNode\":\"03\"},");
			sb.append("{\"id\":9,\"code\":\"09\",\"leaf\":\"1\",\"name\":\"历城区\",\"parentNode\":\"03\"},");
			sb.append("{\"id\":10,\"code\":\"10\",\"leaf\":\"0\",\"name\":\"平度市\",\"parentNode\":\"04\"},");
			sb.append("{\"id\":11,\"code\":\"11\",\"leaf\":\"1\",\"name\":\"万家镇\",\"parentNode\":\"10\"},");
			sb.append("{\"id\":12,\"code\":\"12\",\"leaf\":\"1\",\"name\":\"市南区\",\"parentNode\":\"04\"},");
			sb.append("{\"id\":13,\"code\":\"13\",\"leaf\":\"1\",\"name\":\"四方区\",\"parentNode\":\"04\"}");
			sb.append("]");
		
			sb.append("}");
		
		response.getWriter().print(sb.toString());
	}
}