Extjs4.0一些常见入门学习范例带注释详解

Ext.onReady(function() {
/**
* 1.创建一个window窗体
*/
Ext.define('MyApp.MyWindow', {
extend : 'Ext.Window',
title : 'welcome!',
initComponent : function() {
this.items = [{
xtype : 'textfield',
name : 'tfName',
fieldLabel : 'Enter your name'
}], this.callParent(arguments);
}
});
var win = Ext.create('MyApp.MyWindow');
win.show();


/**
* 2 类似java里的重写，调用父类，
*/


Ext.define('MyApp.mixins.log', {
startLogging : function() {
console.log('called function startyLogging');
}
});
Ext.define('MyApp.MyWindow2', {
extend : 'Ext.Window',
mixins : {
console : 'MyApp.mixins.log'// 调用上面定义的MyApp.mixns.log
}
});
var win2 = Ext.create('MyApp.MyWindow2');
win2.startLogging();


/**
* 自动setter和getter值
*/
Ext.define('MyApp.MyWindow3', {
extend : 'Ext.Window',
config : {
title : 'Welcome!'
},
applyTitle : function(newTitle) {
this.title = '修改为' + newTitle;
}
});


var win3 = Ext.create('MyApp.MyWindow3');
// win3.setTitle('I change the title');//设置标题


win3.applyTitle('little boy');
win3.show();


/**
* 4.require:动态类加载
*/


Ext.require('Ext.Window', function() {
var win4 = new Ext.Window({
title : 'hello',
width : 100,
height : 50
});
win4.show();
});


/**
* 5. statics:定义静态方法，可以通过类名.方法名称()调用
*/


Ext.define('MyApp.Math', {
statics : {
count : 0,
appName : 'Math',
sum : function(number1, number2) {
return number1 + number2;
}
},
constructor : function() {
this.statics().count++, console
.log('You instantiated the class '
+ this.self.appName);


console.log('App Name:' + this.statics().appName);
console.log('count:' + this.statics().count);
}
});
/*
* console.log(MyApp.Math.count); console.log(MyApp.Math.appName);
* console.log(MyApp.Math.sum(1, 2));
*/


Ext.define('MyApp.MoreMath', {
extend : 'MyApp.Math',
statics : {
appName : 'MoreMath',


multiply : function(number1, number2) {


return number1 * number2;
}
},
constructor : function() {
this.callParent();
}


});


var math1 = new MyApp.Math();
var math2 = new MyApp.Math();
var moreMath = new MyApp.MoreMath();


/**
* 6 数据模型与数据的绑定、验证
*/


// 第一种创建数据模型的方式
/* Ext.define('Patient', {
extend : 'Ext.data.Model',
fields : [{
name : 'name'
}, {
name : 'age',
type : 'int'
}, {
name : 'phone',
type : 'string'
}, {
name : 'gender',
type : 'string'
}, {
name : 'birthday',
type : 'date',
dateFormat : 'd/m/Y'
}, {
name : 'alive',
type : 'boolean',
defaultValue : true
}, {
name : 'weight',
type : 'float'
}, {
name : 'weightKg',
type : 'float',
convert : function(value, record) {
var weightPounds = record.get('weight');
return Math.round(weightPounds
* 0.45359237)
}
}


]
});*/


// 第二种创建数据模型的方式


Ext.define('Patient', {
extend : 'Ext.data.Model',
fields : [{
name : 'name'
}, {
name : 'age',
type : Ext.data.Types.INT
}, {
name : 'phone',
type : Ext.data.Types.STRING
}, {
name : 'gender',
type : Ext.data.Types.STRING
}, {
name : 'birthday',
type : Ext.data.Types.DATE,
dateFormat : 'd/m/Y'
}, {
name : 'alive',
type : Ext.data.Types.BOOLEAN,
defaultValue : true
}, {
name : 'weight',
type : Ext.data.Types.FLOAT
}, {
name : 'weightKg',
type : Ext.data.Types.FLOAT,
convert : function(value,record) {
var weightPounds = record.get('weight');
return Math.round(weightPounds
* 0.45359237);
}
}],
getBasicInfo:function(){
var info='Name: '+this.get('name');
info+='-Gender:'+this.get('gender');
info+='-age:'+this.get('age');
return info;
},
validations:[
{type:'presence',field:'age'},
{type:'presence',field:'name'},
{type:'length',field:'name',min:2,max:60},
{type:'format',field:'name',mathcher:/([a-z]+)/},
{type:'inclusion',field:'gender',list:['M','F']},
{type:'exclusion',field:'weight',list:[0]}
]


});


/*var patient = Ext.ModelMgr.create({
name : 'Loiane Groner',
age : 25,
phone : '9876-5432',
gender : 'F',
birthday : '05/26/1986',
weight : 150
}, 'Patient');
console.log('name===>' + patient.get('name'));
console.log('age===>' + patient.get('age'));
console.log('*****' + patient.getBasicInfo());*/
var patient=Ext.create('Patient',{
name:'L',
phone:'9876-5432',
gender:'Unkown',
birthday:'05/26/1986'
});
var errors=patient.validate();
//Ext.MessageBox.alert(errors.items);
// Ext.MessageBox.alert(errors.isValid());

/**
* 7客户端与服务器端数据交换
* 
*/
Ext.define('Blog',{
extend:'Ext.data.Model',
fields:[
{name:'id',type:'int'},
{name:'name',type:'string'},
{name:'url',type:'string'}
],
proxy:{
type:'rest',//请求RestProxy代理,通过restful方式数据交换
url:'data/blogs',//请求地址
format:'json',//返回数据格式为json
reader:{
type:'json',
root:'blogs'
}
}
});
Blog.load(1,{
success:function(blog){
console.log("blog: "+blog.get('url'));
}
});


});