Ext4.0常用代码整理（一）

一：常用工具条上的定义

// 工具条
var toolbar = Ext.create("Ext.Toolbar", {
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; items : [ yearCbo,zoneCbo,indexCbo,srchBtn]
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; });

// 年度
var yearCbo = {
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; xtype : &＃39;numberfield&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; id : &＃39;toolbar_year&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; name : &＃39;year&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; fieldLabel : &＃39;年度&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; labelWidth : 40,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; allowBlank : false,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; blankText : &＃39;请选择年度&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; width : 100,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; value : new Date().getFullYear()-1,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; maxValue : new Date().getFullYear(),
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; minValue : 2013
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; &＃160;
&＃160;&＃160;&＃160; };


// 月份
var mOnthCbo={
&＃160;&＃160;&＃160; xtype : &＃39;numberfield&＃39;,
&＃160;&＃160;&＃160; id : "mounth",
&＃160;&＃160;&＃160; fieldLabel : &＃39;月份&＃39;,
&＃160;&＃160;&＃160; labelWidth : 40,
&＃160;&＃160;&＃160; editable :false,
&＃160;&＃160;&＃160; allowbBlank : true,
&＃160;&＃160;&＃160; width : 100,
&＃160;&＃160;&＃160; maxValue : 12,
&＃160;&＃160;&＃160; minValue : 1,
&＃160;&＃160;&＃160; value : new Date().getMonth()+1
}

// 查询按钮
var srchBtn = {
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; xtype : &＃39;button&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; id : &＃39;srchBtn&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; text : &＃39;查询&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; iconCls : &＃39;searchicon&＃39;,
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; listeners:{
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; click:function(){
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; alert(123456) ;
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; }
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; }
};   

二：combox的定义使用

// store定义
var indexStore = new Ext.data.Store({
&＃160;&＃160; &＃160;fields:["value","name"],
&＃160;&＃160; &＃160;proxy: { 
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; type: &＃39;ajax&＃39;, 
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; url: &＃39;Summary_getEnmuList?ENMU_CODE=24&＃39;
&＃160;&＃160;&＃160;&＃160;&＃160; }, 
&＃160;&＃160;&＃160;&＃160;&＃160; autoLoad: false, 
&＃160;&＃160;&＃160;&＃160;&＃160; remoteSort:true,
&＃160;&＃160;&＃160;&＃160;&＃160; reader:{
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;type:&＃39;json&＃39;
&＃160;&＃160; &＃160;}
});
// 改变store的值（这里增加一项）
indexStore.load({
&＃160;&＃160;&＃160; callback: function(records, operation, success) {
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; // do something after the load finishes
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;var allIndexRecord = {name:"测试首项",&＃160; value: -99 };
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;indexStore.insert(0,allIndexRecord);
&＃160;&＃160;&＃160; },
&＃160;&＃160;&＃160; scope: this
});


// 定义combox
var indexCbo = {
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;xtype : &＃39;combobox&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;id : &＃39;toolbar_indexCbo&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;name : &＃39;indexCbo&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;fieldLabel : &＃39;11 项指标&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;labelWidth : 70,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;width : 220,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;value : &＃39;01&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;queryMode : &＃39;local&＃39;,// [local|remote]
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;store : indexStore,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;editable : false,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;emptyText : &＃39;---请选择---&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;allowBlank : false,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;blankText : &＃39;请选择指标&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;displayField : &＃39;name&＃39;,
&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;&＃160;&＃160; &＃160;valueField : &＃39;value&＃39;
};

三：定义控件的&＃20540;获取

Ext.getCmp(&＃39;cbo&＃39;).getValue()；
Ext.getCmp(&＃39;cbo&＃39;).getRawValue()；

四：Ext.form.Panel

var form=Ext.create(&＃39;Ext.form.Panel&＃39;,{
    		items:[toolbar]
    	});
var myform = form.getForm();
if(myform.isValid()){
	myform.submit({
			url : &＃39;test.action&＃39;,
			method : &＃39;POST&＃39;,
			type : &＃39;ajax&＃39;,
			waitTitle : "提示",// 等待的标题
			waitMsg : &＃39;正在提交数据...&＃39;,// 等待的信息
			success : function(fp, o) {
				if (o.result.success == &＃39;true&＃39;) {
					myGrid.store.loadPage(1);
				}
				Ext.Msg.alert(&＃39;提示&＃39;,o.result.message);
			},
			// 404或者500错误就会执行
			failure : function(fp, o) {
				Ext.Msg.alert(&＃39;提示&＃39;,&＃39;出现异常&＃39;);
			}
		});
}

五：快速创建简单mvc

AM.view.TestList

Ext.define(&＃39;AM.view.TestList&＃39;, {  
        extend : &＃39;Ext.form.Panel&＃39;,  
        alias : &＃39;widget.testList&＃39;,  
        frame : true,// 面板渲染  
        columnLines : true, // 行线  
        multiSelect : true,// 运行多选  
        forceFit : true,// 自动填充panel空白处  
        autoScroll: true,  
        initComponent : function() {  
		this.id = &＃39;testList&＃39;;  
		var myPanle = new Ext.Panel({    
			bodyStyle:&＃39;background-color:#FFFFFF&＃39;,    
			html:&＃39;测试页面&＃39;,  
			height:&＃39;100%&＃39;  
		}) ;  

		this.items = [ myPanle];  

		this.callParent(arguments);  
	}  
});  

AM.controller.TestController

Ext.define(&＃39;AM.controller.TestController&＃39;, {
	extend : &＃39;Ext.app.Controller&＃39;,
	views : [&＃39;testList&＃39;],
	init : function() {
		this.control({
		});
	}
});