EXt js 学习笔记总结
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);
???}
});
LoginForm=Ext.extend(Ext.form.FormPanel,{
???constructor:function(_cfg){
???if(_cfg==null){ _cfg={}; }
???Ext.apply(this, _cfg);
???LoginForm.superclass.constructor.call(this, {????....???});
?});
3. ExtJs事件模型
????????Ext.util.Observable???事件抽象基類
????????Ext.EventObject???????處理按鍵
????????Ext.EventManager
????????Ext.lib.Event
?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);
????????????????}
????????????},
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 ，解決 窗口 跟 陰影 同步變化
-------------------------------------
7..Ext.grid 表格
?????高級store：
?????simpleStore = Store +?MemoryProxy + ArrayReader
?????JsonStore??=??Store + HttpProxy + JsonReader
?????Ext.data.GroupingStore對數據進行分組
??????ColumnModel([{},{}...])??是一個數組
??????header??????顯示文本
??????dataIndex???記錄集字段
??????sortable????排序
??????renderer????列渲染方法
??????width???????寬
??????format??????格式化
?????修改某一行樣式：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();
???????}}
});
轉載于:https://www.cnblogs.com/fyq891014/p/3294743.html
總結
以上是生活随笔為你收集整理的EXt js 学习笔记总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle常用语句记录
- 下一篇： fragments lifecycle