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

来源：互联网发布：企查查怎么看数据编辑：程序博客网时间：2024/05/22 05:00

一：常用工具条上的定义

// 工具条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});// 定义comboxvar 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({});}});

0 0