一:常用工具条上的定义
// 工具条
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({
});
}
});
Ext.define('AM.controller.TestController', {
extend : 'Ext.app.Controller',
views : ['testList'],
init : function() {
this.control({
});
}
});