EXt js 学习笔记总结
1. get 、 fly、 getCmp 、getBody 、getDoc 、getDom、、
???get-----ExtJs獲取節(jié)點、dom、提供緩存機制??Ext.Element類是Ext對DOM的封裝?get是Ext.Element.get的簡寫
???fly-----
???getCmp----用來獲得一個Ext組件，已經(jīng)在頁面中初始化了的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[ {??},{}.... ]???標(biāo)題欄添加按鈕
?????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 標(biāo)簽面板
?????1...動態(tài)創(chuàng)建 標(biāo)簽面板
?????2...關(guān)閉標(biāo)簽面板
?????var tab = tabPanel.getComponent(o);
?????tabPanel.remove(tab);
?????if(p.closable)??closeTab(p);
?????3..標(biāo)簽面板 注冊右鍵菜單
?
6...Ext.Window
????modal:true,最好配置下??shadow: true ，解決 窗口 跟 陰影 同步變化
-------------------------------------
7..Ext.grid 表格
?????高級store：
?????simpleStore = Store +?MemoryProxy + ArrayReader
?????JsonStore??=??Store + HttpProxy + JsonReader
?????Ext.data.GroupingStore對數(shù)據(jù)進行分組
??????ColumnModel([{},{}...])??是一個數(shù)組
??????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)
?????獲得某一行數(shù)據(jù)：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}});
???
?可以指定 每列的寬度數(shù)值，若同時指定了 viewConfig {forceFit:true}???則指定的數(shù)值無效，grid會根據(jù)這些數(shù)值計算出比例，對各列分配寬度。
?autoExpandColumn 只能指定一列的 id ，則該列渲染時會自動延伸，撐起表格、
?2...grid 列時間處理
?????推薦返回 java 的 getTime 整數(shù) ，在 js renderer : 用 Date 格式出字符串
?3...grid 單元格格式化
?????指定列元數(shù)據(jù)的 renderer 函數(shù) ，返回 帶格式的 html
?4...grid 行設(shè)定顏色
?????指定 viewConfig.getRowClass 返回相應(yīng)的的行css
?5.自動顯示行號
?????列元數(shù)據(jù)的第一個數(shù)據(jù)填充 new Ext.grid.RowNumber() ,會自動計數(shù) ,計數(shù)中斷后，可以用 gridView.refresh()重新計數(shù)。
?6...grid 后臺排序
?????設(shè)置 store.remoteSort = true ,會向后臺提交兩個參數(shù) sort , dir
?7...editorgrid
?????store.modified 所有修改過的記錄 ,commit() 會去除 單元綠色標(biāo)記
?8...groupgrid
??????groupstore 關(guān)鍵要設(shè)置 groupField
?9.表格右鍵實現(xiàn)要點
?????監(jiān)控 contextmenu 事件，自己構(gòu)造?menu組件 ，彈出在鼠標(biāo)位置
?10 ...formpanel layout
???????只能是 form?，不能改 ,formpanel 只負(fù)責(zé)布局 ，核心部分由 form成員 處理
?11...anchor
??????用來指定 輸入組件 和 formpanel 的相對寬度 高度。
?12...submit
????????默認(rèn) ajax 提交 ，傳統(tǒng)方式 要 獲得 dom節(jié)點 ，調(diào)用 傳統(tǒng)submit()
?13...使用后臺校驗
???????關(guān)鍵是 設(shè)置 返回 json sucess:false ,errors:{輸入組件名：該組件的錯誤}
?14...嵌入其他html
??????可以設(shè)置 xtype:'panel',html: 隨便
?15...comboBox hiddenName
??????真正value存放的位置，涉及提交，建議設(shè)置
??????getValue 返回真正value
??????getRawValue 返回顯示的text
?16...comboBox??triggerAction
??????防止重新選擇 顯示不全 ，建議設(shè)成 'all'
?17...comboBox radio
???????區(qū)別主要在于 radio 多個要設(shè)同一個 name
?18...樹的后臺生成數(shù)據(jù)
??????設(shè) treeloader 的同時 要設(shè)置 AsyncTreeNode ,后臺會收到 當(dāng)前樹節(jié)點的 id
?19...expand
??????root.expand() 只會擴展一層 expand(true) 則全部擴展了
?20...節(jié)點的默認(rèn)圖片
??????icon : 圖片地址??優(yōu)先級高
??????iconCls :圖片css
?21...節(jié)點提示信息
?????設(shè)置 qtip
?22...節(jié)點的界面修改部分
?????用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：自動適應(yīng)布局,只能使用一個子組件,無法勝任復(fù)雜布局；
注意：子組件 使用autoHeight 會使Fitlayout失效
1.. BorderLayout
----------------
邊框布局：分5個區(qū)域-東 西 南 北 中，中是不能省略的;
在某一區(qū)域添加 split:true,左右,上下拖放，而中不會變化;
collapsible:true激活折疊功能
問題：如何在 西區(qū)域 的標(biāo)題欄 添加額外的功能呢？在折疊位置再添加一些按鈕？
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
--------------------------------------------------
使用 extjs 模板創(chuàng)建 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是在指定容器內(nèi)部生成組件（該元素被用作容器）
??// Ext.QuickTips.init();
??// Ext.form.Field.prototype.msgTarget = 'side';
??// qtip??當(dāng)鼠標(biāo)移動到控件上面時顯示提示
??// title??在瀏覽器的標(biāo)題顯示，但是測試結(jié)果是和qtip一樣的
??// under??在控件的底下顯示錯誤提示
??// side??在控件右邊顯示一個錯誤圖標(biāo)，鼠標(biāo)指向圖標(biāo)時顯示錯誤提示
??// [element id] 錯誤提示顯示在指定id的HTML元件中
//表單驗證 extjs默認(rèn)幾種
alpha??只輸入英文字母
alphanum??只能輸入字母 和 數(shù)字
email????電子郵件
url??????網(wǎng)址
-----------------------------
{
????id:'userName',
????name : 'userName',
????fieldLabel : '帳號',
????vtype:"email",??//email格式驗證
????vtypeText:"不是有效的郵箱地址",//錯誤提示信息
????blankText : '帳號不能為空'
}
------------------------------
minValue 和?maxValue??輸入數(shù)字范圍
allowDecimals??不能輸入小數(shù)點
allowNegative??不能輸入負(fù)數(shù)
=====
regex:/^\d$/, //正則表達(dá)式 這里假設(shè)只允許輸入數(shù)字 如果輸入的不是數(shù)字 就會出現(xiàn)下面定義的提示信息
??regexText:"regexText：只能夠輸入數(shù)字", //定義不符合正則表達(dá)式的提示信息
??validateOnBlur:true,//默認(rèn)是true,失去焦點時驗證
???validationDelay:300,//默認(rèn)是250,驗證延遲時間,毫秒數(shù)
?validationEvent:"click", //驗證事件 默認(rèn)是keyup 可以是String/Boolean
??//自定義的驗證函數(shù) 當(dāng)輸入的數(shù)據(jù)不符合正則表達(dá)式的要求時，就會執(zhí)行這個函數(shù)
??validator:function(){Ext.Msg.alert("提示信息","只能夠輸入數(shù)字");},
=====
# new Ext.form.NumberField({
#?????style:'direction:rtl'//這樣就可以讓輸入框的光標(biāo)定位在右邊了.這就是你要的效果:)
# });
//正則表達(dá)式驗證在EXTJS中的應(yīng)用
regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
regexText: '格式應(yīng)由漢字、數(shù)字、字母或下劃線組成.'
?
?文本框
maxLength: 5, //驗證最大輸入字符數(shù)
maxLengthText: "長度不多于5個字符!",
//?minLength: 2,??//驗證最小輸入字符數(shù)
//?minLengthText: "評論人長度不少于2個字符!",
-------------------------------
使用正則表達(dá)式驗證
regex : /[\u4e00-\u9fa5]/,???//正則表達(dá)式 [\u4e00-\u9fa5] : 只能輸入中文
高級自定義密碼驗證：
//先用Ext.apply方法添加自定義的password驗證函數(shù)（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
????//val指這里的文本框值，field指這個文本框組件
????//confirmTo是我們自定義的配置參數(shù)，一般用來保存另外的組件的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:"確認(rèn)密碼",
????id:"pass2",
????vtype:"password",//自定義的驗證類型
????vtypeText:"兩次密碼不一致！",
????confirmTo:"pass1",//要比較的另外一個的組件的id
}
?
-------------------------------------------------------------------
??draggable:true, 是否允許拖動
??constrain:true, 限制窗口的整體
??constrainHeader:true, 窗口的頂部不能超越瀏覽器邊界
??plain: true,??//渲染窗口的背景顏色
??resizable:false,???//鼠標(biāo)是否可以任意拖動窗口的大小
??border:true ,??????//窗口內(nèi)的邊框
??minimizable:true,??//是否有最小化 按鈕
??maximizable:true,??//是否有max 按鈕
??loadMask:"正在加載......",
??closable:true,?????//是否有close 按鈕
??closeAction:'close', //點擊關(guān)閉 觸法closeAction??hide:是將window隱藏，
??"close"，關(guān)閉window就將它從內(nèi)存中撤銷
Ext.window的closeAction有兩種選擇close/hide（完全關(guān)閉/隱藏）
close就是把此window destroy (默認(rèn)) 如果使用默認(rèn)，點擊關(guān)閉窗口就把窗口對象銷毀
這樣就不能使用show()
closeAction:'hide'
?
5．如果需要定義控件有兩種方法（以gridPanel為例子）
A：new Ext.grid.GridPanel({
})
B:{
???????xtype:’gridpanel’,
}
使用new 的方式是立即創(chuàng)建組件 而使用xtype則是延遲創(chuàng)建 這樣的好處是當(dāng)需要渲染此組件時才創(chuàng)建
類似hibernate的延遲加載 都是為了提高效率！
6．在JS中把JSON字符串轉(zhuǎn)為對象，Ext.decode ( )
???在JS中把對象轉(zhuǎn)為JSON字符串，Ext.encode ( )
7．可以在容器組件中把hideLabels設(shè)置為true，這樣將不會顯示容器中字段的標(biāo)簽了
8.年齡隨著出生日期改變
{
????xtype:"datefield",
????format:"Y-m-d",??????//格式化日期，默認(rèn)：'m/d/Y'
????value:"1981-10-15",
????readOnly:true,???????//設(shè)為只讀
????fieldLabel:"出生日期",
????listeners:{
????????"blur":function(_df){??//監(jiān)聽失去焦點事件，年齡隨著出生日期改變
????????????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：將當(dāng)前對象所生成的HTML對象存放到指定的對象中
????????text:"確 定",
????????handler:function(){????//函數(shù)handler：指定一個函數(shù)句柄，默認(rèn)觸發(fā)click事件
????????????Ext.Msg.alert("提示","歡迎學(xué)習(xí)ExtJS。");
//????????????alert("歡迎學(xué)習(xí)ExtJS。");
????????}
????});
});
第二種listeners：
Ext.onReady(function(){
????new Ext.Button({
????????renderTo:Ext.getBody(),
????????text:"確 定",
????????listeners:{??//函數(shù)listeners：在對象初始化之前就將一系列事件進行定義
????????????"click":function(){
????????????????Ext.Msg.alert("提示","歡迎學(xué)習(xí)ExtJS。");
????????????}
????????}
????});
});
第三種on：
Ext.onReady(function(){
????var _btn = new Ext.Button({
????????renderTo:Ext.getBody(),
????????text:"確 定"
????});
????_btn.on("click",function(){
????????Ext.Msg.alert("提示","歡迎學(xué)習(xí)ExtJS。");
????});
});
====================================================
《》從gridpanel中獲取一行數(shù)據(jù)填充到表單中
??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();
???????}}
});
轉(zhuǎn)載于:https://www.cnblogs.com/fyq891014/p/3294743.html
總結(jié)
以上是生活随笔為你收集整理的EXt js 学习笔记总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle常用语句记录
- 下一篇： fragments lifecycle