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());
	}
}