ExtJs学习笔记(第一步)

学习了一段时间的ExtJs,谈谈自已的理解.
拿例子来说一下吧:(select 的加载)
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
//select准备的数据
var combo = new Ext.data.JsonStore({
url:'/a/Site/selectCate.html',
fields: ['id','name','priority']});

combo.load(); //加载数据
var form1 = new Ext.FormPanel({
labelWidth: 150, // label settings here cascade unless overridden
url:'/a/Site/save.html',
frame:true,
title: '网页内容编辑',
bodyStyle:'padding:5px 5px 0',
width: 800,
defaults: {width: 500},
defaultType: 'textfield',
waitMsgTarget: true,
trackResetOnLoad : true,

reader: new Ext.data.JsonReader(
{root:'data'},
[
{name:'sitePage.id',mapping:'id'},
{name:'sitePage.siteTitle',mapping:'siteTitle'},
{name:'sitePage.priority',mapping:'priority'},
{name:'sitePage.siteContent',mapping:'siteContent'},
{name:'sitePage.siteId',mapping:'siteId'}
]),
items: [
new Ext.form.Hidden({ //hidden
name:'sitePage.id'
}),
new Ext.form.ComboBox({
fieldLabel: '網頁分組',
hiddenName:'sitePage.siteId',
store:combo,
valueField:'id',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
editable:false,
allowBlank:false,
blankText : "網頁分組是必填項",
width:20
}),
{
fieldLabel: '網頁標題',
name: 'sitePage.siteTitle',
allowBlank:false,
blankText : "網頁標題是必填項"
},{
xtype:'htmleditor',
id:'sitePage.siteContent',
fieldLabel:'網頁內容',
allowBlank:false,
blankText : "網頁內容是必填項"
}
, {
fieldLabel: '自定序號',
name: 'sitePage.priority',
xtype: "numberfield",
type: "int",
width:40
}
],

buttons: [{
text: '儲存',
type:'button',
id:'save',
handler: function(){
//表单验证通过
if (form1.form.isValid()){
//提交form
form1.form.submit({
waitMsg:"正在儲存...",
success: function(form,action){
if (action.result.success) {
//Ext.MessageBox.hide();
Ext.Msg.alert("成功",action.result.data);
} else {
Ext.Msg.alert("错误","儲存失敗");
}
},
failure: function(){
Ext.Msg.alert("错误", "服务器错误，请稍候再试！");
}
});
}
}
},{
text: '取消',
type:'reset',
id:'clear',
handler: function(){
form1.form.reset();
}
}
]
});

form1.render(document.body);
form1.getForm().load({url:'/a/Site/load.html?id='+Ext.getDom("sitePage.id").value,waitMsg:'Loading'});

});