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

一：经常使用工具条上的定义

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

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

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

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

二：combox的定义使用

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

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

三：定义控件的值获取

Ext.getCmp('cbo').getValue()。
Ext.getCmp('cbo').getRawValue()。

四：Ext.form.Panel

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

五：高速创建简单mvc

AM.view.TestList

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

		this.items = [ myPanle];  

		this.callParent(arguments);
	}
});  

AM.controller.TestController

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