ExtJs Base:
------------------------------------------------------------------------------
1. get 、 fly、 getCmp 、getBody 、getDoc 、getDom、、
get-----ExtJs獲取節點、dom、提供緩存機制 Ext.Element類是Ext對DOM的封裝 get是Ext.Element.get的簡寫
fly-----
getCmp----用來得到一個Ext組件，已經在頁面中初始化了的Component或其子類的對象，getCmp方法實際上是Ext.ComponentMgr.get方法的簡寫
...
2. Ext.extend 繼承
LoginWindow=Ext.extend(Ext.Window,{
initComponent : function(){
LoginWindow.superclass.initComponent.call(this);
}
});css
LoginForm=Ext.extend(Ext.form.FormPanel,{
constructor:function(_cfg){
if(_cfg==null){ _cfg={}; }
Ext.apply(this, _cfg);
LoginForm.superclass.constructor.call(this, { .... });
});html
3. ExtJs事件模型
Ext.util.Observable 事件抽象基類
Ext.EventObject 處理按鍵
Ext.EventManager
Ext.lib.Eventjava
4.Panel面板 mixed 混合型
1..tools[ { },{}.... ] 標題欄添加按鈕
2..面板 顯示/隱藏 show() / hide()
3..面板的拖拽---------------------------------
draggable: {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getX();
this.y = pel.getY();
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
},ajax
5..tabPanel 標籤面板
1...動態建立 標籤面板
2...關閉標籤面板
var tab = tabPanel.getComponent(o);
tabPanel.remove(tab);
if(p.closable) closeTab(p);
3..標籤面板 註冊右鍵菜單正則表達式
6...Ext.Window
modal:true,最好配置下 shadow: true ，解決 窗口 跟 陰影 同步變化json
-------------------------------------
7..Ext.grid 表格
高級store：數組
simpleStore = Store + MemoryProxy + ArrayReader
JsonStore = Store + HttpProxy + JsonReader
Ext.data.GroupingStore對數據進行分組瀏覽器
ColumnModel([{},{}...]) 是一個數組緩存
header 顯示文本
dataIndex 記錄集字段
sortable 排序
renderer 列渲染方法
width 寬
format 格式化app
修改某一行樣式：grid.getView().addRowClass(r, css) 或 grid.getView().getRow(r).style.backgroundColor='red'
修改某一行的單元格樣式：grid.getView().getCell(r,c).addRowClass(css)
得到某一行數據：store.getAt(1)
刷新:grid.view.refresh()
獲取某一行字段：grid.getStore().getAt(i).get('username')
1...grid列寬問題：
若是GridPanel 配置viewConfig: {forceFit:true}, 則 ColumnModel按照 width比例分配寬度
var cm = new Ext.grid.ColumnModel([{ header:'編號', dataIndex:'id' ,width:3}]);
var grid = new Ext.grid.GridPanel({ viewConfig: {forceFit:true}});
能夠指定 每列的寬度數值，若同時指定了 viewConfig {forceFit:true} 則指定的數值無效，grid會根據這些數值計算出比例，對各列分配寬度。
autoExpandColumn 只能指定一列的 id ，則該列渲染時會自動延伸，撐起表格、
2...grid 列時間處理
推薦返回 java 的 getTime 整數 ，在 js renderer : 用 Date 格式出字符串
3...grid 單元格格式化
指定列元數據的 renderer 函數 ，返回 帶格式的 html
4...grid 行設定顏色
指定 viewConfig.getRowClass 返回相應的的行css
5.自動顯示行號
列元數據的第一個數據填充 new Ext.grid.RowNumber() ,會自動計數 ,計數中斷後，能夠用 gridView.refresh()從新計數。
6...grid 後臺排序
設置 store.remoteSort = true ,會向後臺提交兩個參數 sort , dir
7...editorgrid
store.modified 全部修改過的記錄 ,commit() 會去除 單元綠色標記
8...groupgrid
groupstore 關鍵要設置 groupField
9.表格右鍵實現要點
監控 contextmenu 事件，本身構造 menu組件 ，彈出在鼠標位置
10 ...formpanel layout
只能是 form ，不能改 ,formpanel 只負責佈局 ，核心部分由 form成員 處理
11...anchor
用來指定 輸入組件 和 formpanel 的相對寬度 高度。
12...submit
默認 ajax 提交 ，傳統方式 要 得到 dom節點 ，調用 傳統submit()
13...使用後臺校驗
關鍵是 設置 返回 json sucess:false ,errors:{輸入組件名：該組件的錯誤}
14...嵌入其餘html
能夠設置 xtype:'panel',html: 隨便
15...comboBox hiddenName
真正value存放的位置，涉及提交，建議設置
getValue 返回真正value
getRawValue 返回顯示的text
16...comboBox triggerAction
防止從新選擇 顯示不全 ，建議設成 'all'
17...comboBox radio
區別主要在於 radio 多個要設同一個 name
18...樹的後臺生成數據
設 treeloader 的同時 要設置 AsyncTreeNode ,後臺會收到 當前樹節點的 id
19...expand
root.expand() 只會擴展一層 expand(true) 則所有擴展了
20...節點的默認圖片
icon : 圖片地址 優先級高
iconCls :圖片css
21...節點提示信息
設置 qtip
22...節點的界面修改部分
用tree.ui 來修改 ，mvc分層了
8...Ext.grid.GroupingGrid
var store = new Ext.data.GroupingStore({
autoLoad : true,
groupField:'department',
sortInfo:{field:'id',direction:'ASC'},
proxy: new Ext.data.MemoryProxy(datas),
reader: new Ext.data.ArrayReader({idIndex: 0},[ {name:'id'}]
});
grid = new Ext.grid.GridPanel({ view : new Ext.grid.GroupingView(),... });
======================
= extjs 經常使用佈局
======================
1.. FitLayout
-------------
FitLayout：自動適應佈局,只能使用一個子組件,沒法勝任複雜佈局；
注意：子組件 使用autoHeight 會使Fitlayout失效
1.. BorderLayout
----------------
邊框佈局：分5個區域-東 西 南 北 中，中是不能省略的;
在某一區域添加 split:true,左右,上下拖放，而中不會變化;
collapsible:true激活摺疊功能
問題：如何在 西區域 的標題欄 添加額外的功能呢？在摺疊位置再添加一些按鈕？
--------------------------------------------------
使用 extjs 模板建立 dom：
var bd = Ext.getDom('checkCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild([{tag:'span',html:' '},{tag: 'img',id:'randImage',onclick:'loadimage()', src: '/demos/WindowDemo/image.jsp',align:'absbottom'}]);
-----------------
checkbox
boxLabel : String ==The text that appears beside the checkbox
inputValue : String
////////////////////////////////////////////////////
//applyTo是直接使用指定元素來生成組件
//renderTo是在指定容器內部生成組件（該元素被用做容器）
// Ext.QuickTips.init();
// Ext.form.Field.prototype.msgTarget = 'side';
// qtip 當鼠標移動到控件上面時顯示提示
// title 在瀏覽器的標題顯示，可是測試結果是和qtip同樣的
// under 在控件的底下顯示錯誤提示
// side 在控件右邊顯示一個錯誤圖標，鼠標指向圖標時顯示錯誤提示
// [element id] 錯誤提示顯示在指定id的HTML元件中
//表單驗證 extjs默認幾種
alpha 只輸入英文字母
alphanum 只能輸入字母 和 數字
email 電子郵件
url 網址
-----------------------------
{
id:'userName',
name : 'userName',
fieldLabel : '賬號',
vtype:"email", //email格式驗證
vtypeText:"不是有效的郵箱地址",//錯誤提示信息
blankText : '賬號不能爲空'
}
------------------------------
minValue 和 maxValue 輸入數字範圍
allowDecimals 不能輸入小數點
allowNegative 不能輸入負數
=====
regex:/^d$/, //正則表達式 這裏假設只容許輸入數字 若是輸入的不是數字 就會出現下面定義的提示信息
regexText:"regexText：只可以輸入數字", //定義不符合正則表達式的提示信息
validateOnBlur:true,//默認是true,失去焦點時驗證
validationDelay:300,//默認是250,驗證延遲時間,毫秒數
validationEvent:"click", //驗證事件 默認是keyup 能夠是String/Boolean
//自定義的驗證函數 當輸入的數據不符合正則表達式的要求時，就會執行這個函數
validator:function(){Ext.Msg.alert("提示信息","只可以輸入數字");},
=====
# new Ext.form.NumberField({
# style:'direction:rtl'//這樣就可讓輸入框的光標定位在右邊了.這就是你要的效果:)
# });
//正則表達式驗證在EXTJS中的應用
regex: /^[a-zA-Z0-9_u4e00-u9fa5]+$/,
regexText: '格式應由漢字、數字、字母或下劃線組成.'
文本框
maxLength: 5, //驗證最大輸入字符數
maxLengthText: "長度很少於5個字符!",
// minLength: 2, //驗證最小輸入字符數
// minLengthText: "評論人長度很多於2個字符!",
-------------------------------
使用正則表達式驗證
regex : /[u4e00-u9fa5]/, //正則表達式 [u4e00-u9fa5] : 只能輸入中文
高級自定義密碼驗證：
//先用Ext.apply方法添加自定義的password驗證函數（也能夠取其餘的名字）
Ext.apply(Ext.form.VTypes,{
//val指這裏的文本框值，field指這個文本框組件
//confirmTo是咱們自定義的配置參數，通常用來保存另外的組件的id值
password:function(val,field){
if(field.confirmTo){
//取得confirmTo的那個id的值
var pwd=Ext.get(field.confirmTo);
return (val==pwd.getValue());
}
return true;
}
});
------------
items:[{
fieldLabel:"密碼",
id:"pass1",
},{
fieldLabel:"確認密碼",
id:"pass2",
vtype:"password",//自定義的驗證類型
vtypeText:"兩次密碼不一致！",
confirmTo:"pass1",//要比較的另一個的組件的id
}
-------------------------------------------------------------------
draggable:true, 是否容許拖動
constrain:true, 限制窗口的總體
constrainHeader:true, 窗口的頂部不能超越瀏覽器邊界
plain: true, //渲染窗口的背景顏色
resizable:false, //鼠標是否能夠任意拖動窗口的大小
border:true , //窗口內的邊框
minimizable:true, //是否有最小化 按鈕
maximizable:true, //是否有max 按鈕
loadMask:"正在加載......",
closable:true, //是否有close 按鈕
closeAction:'close', //點擊關閉 觸法closeAction hide:是將window隱藏，
"close"，關閉window就將它從內存中撤銷
Ext.window的closeAction有兩種選擇close/hide（徹底關閉/隱藏）
close就是把此window destroy (默認) 若是使用默認，點擊關閉窗口就把窗口對象銷燬
這樣就不能使用show()
closeAction:'hide'
5．若是須要定義控件有兩種方法（以gridPanel爲例子）
A：new Ext.grid.GridPanel({
})
B:{
xtype:’gridpanel’,
}
使用new 的方式是當即建立組件 而使用xtype則是延遲建立 這樣的好處是當須要渲染此組件時才建立
相似hibernate的延遲加載 都是爲了提升效率！
6．在JS中把JSON字符串轉爲對象，Ext.decode ( )
在JS中把對象轉爲JSON字符串，Ext.encode ( )
7．能夠在容器組件中把hideLabels設置爲true，這樣將不會顯示容器中字段的標籤了
8.年齡隨着出生日期改變
{
xtype:"datefield",
format:"Y-m-d", //格式化日期，默認：'m/d/Y'
value:"1981-10-15",
readOnly:true, //設爲只讀
fieldLabel:"出生日期",
listeners:{
"blur":function(_df){ //監聽失去焦點事件，年齡隨着出生日期改變
var _age = _df.ownerCt.findByType("textfield")[1];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1);
}
}
}
-----------------------------------------------
第一種handler：
//document.body == Ext.getBody().dom
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),//屬性renderTo：將當前對象所生成的HTML對象存放到指定的對象中
text:"確 定",
handler:function(){ //函數handler：指定一個函數句柄，默認觸發click事件
Ext.Msg.alert("提示","歡迎學習ExtJS。");
// alert("歡迎學習ExtJS。");
}
});
});
第二種listeners：
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:"確 定",
listeners:{ //函數listeners：在對象初始化以前就將一系列事件進行定義
"click":function(){
Ext.Msg.alert("提示","歡迎學習ExtJS。");
}
}
});
});
第三種on：
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(),
text:"確 定"
});
_btn.on("click",function(){
Ext.Msg.alert("提示","歡迎學習ExtJS。");
});
});
====================================================
《》從gridpanel中獲取一行數據填充到表單中
grid.on('click', function(){
var selections = grid.getSelectionModel().getSelections();
for(var i = 0;i <selections.length ; i++){
var record = selections[i];
formPanel.getForm().loadRecord(record);
winP.show();
}}
});