在ExtJS裏最常用的,應該就是Ext.onReady這個方法了,
而且它也可能是你學習ExtJS所接觸的第一個方法,這個方法在當前的DOM加載完畢後自動調用,保證頁面內的所有元素都能被Script所引用.可以嘗
試在這個方法中添加一條語句,看看頁面打開後是什麼反映:
Ext.onReady(function() {
alert('hello world!');
});
上面的代碼將在頁面加載完畢後彈出一對話框,打印出'hello world!'字樣.
獲取元素
還有一個常用的方法,就是獲取頁面上的元素了,ExtJS提供了一個get方法,可以根據ID取到頁面上的元素:
var myDiv = Ext.get('myDiv');
會取到頁面上ID爲'myDiv'的元素.如果使用Element.dom的方法,則可以直接操作底層的DOM節點,Ext.get返回的則是一個Element對象.
在不能使用這種方式來獲取多個DOM的節點,或是要獲取一些ID不一致,但又有相同特徵的時候,可以通過選擇器來進行獲取,比如要獲取頁面上所有的<p>標籤,則可以使用:
var ps = Ext.select('p');
這樣你就可以對所要獲取的元素進行操作了,select()方法返回的是Ext.CompositeElement對象,可以通過其中的each()方法對其所包含的節點進行遍歷:
ps.each(function(el) {
el.highlight();
});
當然,如果你要是對獲取的所有元素進行相同的操作,可以直接應用於CompositeElement對象上,如:
ps.highlight();
或是:
Ext.select('p').highlight();
當然,select參數還可以更復雜一些,其中可以包括W3C Css3Dom選取器,基本的XPath,HTML屬性等,詳細情況,可以查看DomQuery API的文檔,來了解細節.
事件響應
獲取到了元素,則可能會對一些元素的事件進行一些處理,比如獲取一個按鈕,我們爲它添加一個單擊事件的響應:
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert('You clicked the button!');
});
});
當然,你可以把事件的響應加到通過select()方法獲取到的元素上:
Ext.select('p').on('click', function() {
alert('You clicked a paragraph!');
});
Widgets
ExtJS還提供了豐富的UI庫來供大家使用.
消息窗口
將前面的alert()方法替換一種ExtJS提供的方案:
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert('You clicked the button!');
});
});
而且它還可以如桌面開發一樣,來設置消息窗口是否模式的,也就是說在彈出窗口的時候,其他的操作是否可做.這點我很喜歡...^_^
還有非常好用的Grid,Tree,Menu等等,這些稍後會有更加詳細的介紹.
Ajax部分也提供了不錯的支持,稍後都會有詳細的介紹....
Ext.grid.EditorGridPanel
可編輯數據表格
Config {
clicksToEdit : Number //點幾次開始編輯,默認爲2
}
方法
EditorGridPanel()
構造,應爲 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
開始停止編輯
事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )
下面我們擴展一下剛纔的示例應用一下EditorGridPanel
//定義數組
var arr=[
['Bill', 'Gardener','2007-01-02',-10,true],
[ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
['你', 'Gardener','2007-02-02',0,true],
['他', 'Gardener','2007-01-04',13,false],
[ '我', 'Horticulturalist','2007-01-05',15.2,false]
];
var reader = new Ext.data.ArrayReader(
...{},
//定義數組到record的映射關係
[
...{name: 'name'},
...{name: 'occupation', mapping: 1},
...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式轉換日期
...{name:'float',type:'float'},
...{name:'bool',type:'bool'}
]
);
//生成元數據
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);
//自定義可編輯列,從ext的示例抄的,但是卻要init鬱悶
Ext.grid.CheckColumn = function(config)...{
Ext.apply(this, config);
if(!this.id)...{
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
//重寫了三個方法,捕捉mousedown修改數據
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
this.grid = grid;
this.grid.on('render', function()...{
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t)...{
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record)...{
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}
//綁定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
header: "布爾值",
dataIndex: 'bool'
});
/**//*
現在配置列信息,爲了本地化日期選擇器,請包含ext-lang-zh_CN.js,並修改Date.dayNames = ["日","一","二","三","四","五","六"];
在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"確定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序號',width:30}),
...{header:'姓名',sortable: true,dataIndex:'name'},
...{header:'職業',sortable: true,dataIndex:'occupation'},
...{
id:'datacol',
header:'日期',
sortable:true,
dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化顯示
editor:new Ext.form.DateField()
},
...{header:'數值
',sortable:true,dataIndex:'float',renderer:formatFloat,align:
'right',editor:new Ext.form.NumberField()}, //自定義顯示方式,右對齊
checkColumn //這個"選擇框列"看起來的確漂亮些,其實是通過修改背景圖片實現的
]);
//配置視圖信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列顯示/隱藏';
//現在我們看看可編輯的數據表格能用了嗎
var grid=new Ext.grid.EditorGridPanel(...{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});
//爲什麼原例不需要init?
checkColumn.init(grid);
grid.render();
function formatFloat(val)...{
var bgcolor;
if(val>0)...{
bgcolor='#FF0000';
}else if(val<0)...{
bgcolor='#00FF00';
}
else...{
bgcolor='#000000';
}
return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}
Ext.grid.PropertyGrid
屬性表格.繼承自EditorGridPanel,用習慣ide的用戶都會喜歡這個簡單的屬性表格,
config{
customEditors : Object //自定義屬性編輯器
source : Object //數據源
}
方法
PropertyGrid( Object config )
構造
getSource() : Object
setSource( Object source ) : void
得到和設置數據源
事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed
同樣用一個簡單的示例來完成PropertyGrid的學習
var grid=new Ext.grid.PropertyGrid(...{
el:Ext.getBody()
,height:200
,width:400
,viewConfig : ...{forceFit:true}
,customEditors:...{
'年齡':new Ext.grid.GridEditor(new Ext.form.NumberField())
}
,source:...{
'姓名':'blackant'
,'年齡':100
}
});
grid.source['性別']='男';
grid.customEditors['性別']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
editable:false
,triggerAction: 'all'
,store: new Ext.data.SimpleStore(...{
fields: ['gender'],
data : [['男'],['女']]
})
,displayField:'gender'
,forceSelection:true
,mode:'local'
}));
grid.render();
選擇模式都很容易使用,略過,至於其它的擴展,有時間再慢慢研究了,第一步先以學會使用爲主
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/12/19/1953956.aspx
Ext.grid.ColumnModel
用於定義Grid的列
用例
var colModel = new Ext.grid.ColumnModel([
{header: "Ticker", width: 60, sortable: true},
{header: "Company Name", width: 150, sortable: true}
]);
回到ColumnModel,它的構造參數是一個config組成的數組,其中config定義爲{
align : String //css中的對齊方式
dataIndex : String //要綁定的Store之Record字段名
fixed : Boolean //如果爲真列寬不能被改變
header : String //頭部顯示的名稱
hidden : Boolean //隱藏本列
id : String //主要用於樣式選擇,如果已定義此屬性,那麼列所在的單元格會定義class爲 x-grid-td-id
renderer : Function //可以使用這個構造參數格式化數據
resizable : Boolean //可調節尺寸
sortable : Boolean // 可排序
width : Number //寬度
}
另外雖然未經聲明,但config事實上支持editor:Ext.form.Field屬性,這點會在
Ext.grid.EditorGridPanel中看到,另外爲了擴展grid的表現,我們通常也需要自定義列,順便提一個有趣的
列,Ext.grid.RowNumberer,這是Ext爲我們擴展好的一個簡單列,它的構造很簡單,也沒有其它的方法和屬
性,Ext.grid.RowNumberer({ header : String, sortable : Boolean, width :
Number})如果使用它,上例可改爲
var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Ticker", width: 60, sortable: true},
{header: "Company Name", width: 150, sortable: true}
]);
屬性
defaultSortable : Boolean //默認可排序
defaultWidth : Number //默認的寬度
setConfig : Object //返回構造時的config參數
方法
ColumnModel( Object config )
構造
getCellEditor( Number colIndex, Number rowIndex ) : Object
得到指定行列的編輯者
getColumnById( String id ) : Object
得到指定id的列對象
getColumnCount() : Number
得到列數
getColumnHeader( Number col ) : String
得到列頭部文本
getColumnId( Number index ) : String
得到列id
getColumnTooltip( Number col ) : String
得到列提示
getColumnWidth( Number col ) : Number
列寬
getColumnsBy( Function fn, [Object scope] ) : Array
通過fn找到指定的列
getDataIndex( Number col ) : Number
得到指定列的數據綁定對象在store中的序號
getIndexById( String id ) : Number
通過id找序號
getRenderer( Number col ) : Function
得到繪製器
getTotalWidth( Boolean includeHidden ) : Number
總的寬度
hasListener( String eventName ) : Boolean
有事件偵聽者?
isCellEditable( Number colIndex, Number rowIndex ) : Boolean
指定行列可編輯?
isFixed() : void
應該返回Boolean,充滿?
isHidden( Number colIndex ) : Boolean
指定列隱藏?
isResizable() : Boolean
可重寫義大小
isSortable( Number col ) : Boolean
可排序?
setColumnHeader( Number col, String header ) : void
設置指定列列頭
setColumnTooltip( Number col, String tooltip ) : void
設置指定列提示
setColumnWidth( Number col, Number width ) : void
設置指定列寬度
setConfig( Array config ) : void
重設config
setDataIndex( Number col, Number dataIndex ) : void
設置指定列的數據源
setEditable( Number col, Boolean editable ) : void
設置指定列是否可編輯
setEditor( Number col, Object editor ) : void
爲指定列設置編輯器
setHidden( Number colIndex, Boolean hidden ) : void
設置指定列隱藏
setRenderer( Number col, Function fn ) : void
爲指定列設置輸出方法
事件
columnmoved : ( ColumnModel this, Number oldIndex, Number newIndex )
configchanged : ( ColumnModel this )
headerchange : ( ColumnModel this, Number columnIndex, String newText )
hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden )
widthchange : ( ColumnModel this, Number columnIndex, Number newWidth )
Ext.grid.PropertyColumnModel
繼承自Ext.grid.ColumnModel,專爲Ext.grid.PropertyGrid而設計,構造有點不同,不過這個api文檔不知道誰寫的,ext2中好象沒有grid了,
PropertyColumnModel( Ext.grid.Grid grid, Object source )
Ext.grid.GridView
爲GridPanel提供視圖支持
config{
autoFill : Boolean
enableRowBody : Boolean
forceFit : Boolean
}
屬性
columnsText : String //列文本
scrollOffset : Number //滾動步行
sortAscText : String //正序文本
sortClasses : Array //正序和倒序時頭部列使用的樣式,默認爲["sort-asc", "sort-desc"]
sortDescText : String //倒序文本
方法
GridView( Object config )
構造
focusCell( Number row, Number col ) : void
指定第row行第col列得到焦點
focusRow( Number row ) : void
選中第row行
getCell( Number row, Number col ) : HtmlElement
得到指定行列的htmlelement對象
getHeaderCell( Number index ) : HtmlElement
得到指定列的表單頭對象
getRow( Number index ) : HtmlElement
得到指定行的htmlelement對象
getRowClass( Record record, Number index, Object rowParams, Store ds ) : void
//得到指定行的樣式?鬱悶的是沒有能在GridView.js中找到此方法的定義
refresh( [Boolean headersToo] ) : void
涮新顯示
scrollToTop() : void
滾動到頭部
Ext.grid.GroupingView
繼承自Ext.grid.GridView,用於數據分組 ,應用於
config{
emptyGroupText : String //空的分組顯示文本
enableGroupingMenu : Boolean //允許分組菜單
enableNoGroups : Boolean //允許分組/不分組顯示
groupTextTpl : String //這是個模板,分組項的內容依此顯示,語法參見模板,
hideGroupedColumn : Boolean //隱藏分組列
startCollapsed : Boolean //開始時收起,默認爲假
}
另外雖然沒有在api中說明,但groupByText和showGroupsText屬性也是可以在config中指定的
方法
GroupingView( Object config )
構造
getGroupId( String value ) : void
取得指定值的分組id,爲toggleGroup而準備的方法
toggleAllGroups( [Boolean expanded] ) : void
收起或展開所有的分組
toggleGroup( String groupId, [Boolean expanded] ) : void
展開或收起指定的分組,例grid.view.toggleGroup(grid.view.getGroupId('Horticulturalist'));會展開或收起分組字段值爲'Horticulturalist'的分組
Ext.onReady(function()...{
//定義數組
var arr=[ ['Bill', 'Gardener'], [ 'Ben',
'Horticulturalist'],['你', 'Gardener'],['他', 'Gardener'],[ '我',
'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
...{},
//定義數組到record的映射關係
[
...{name: 'name'},
...{name: 'occupation', mapping: 1}
]
);
//生成元數據
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);
//現在配置列信息
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序號',width:30}),
...{header:'姓名',sortable: true,dataIndex:'name'},
...{header:'職業',sortable: true,dataIndex:'occupation'}
]);
//配置視圖信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列顯示/隱藏';
//現在我們有一個可用的grid了,別驕傲這只是第一步
var grid=new Ext.grid.GridPanel(...{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});
grid.render();
//現在我們需要一個GroupingStore
var gstore=new Ext.data.GroupingStore(...{
reader:reader,
groupField:'name',
groupOnSort:true,
sortInfo:...{field: 'occupation', direction: "ASC"} //使用GroupingStore時必須指定sortInfo信息
});
gstore.loadData(arr);
//擴展一下我們的grid,讓他能分組當然會更酷一點
var ggrid = new Ext.grid.GridPanel(...{
ds: gstore,
cm:col,
view: new Ext.grid.GroupingView(...{
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列顯示/隱藏',
groupByText:'依本列分組',
showGroupsText:'分組顯示',
groupTextTpl: '{text} ({[values.rs.length]} 條記錄)'
}),
frame:true,
width: 400,
height: 300,
collapsible: true,
animCollapse: false,
renderTo:Ext.getBody()
});
});
Ext.tree.TreePanel
樹狀控件,繼承自panel
config定義{
animate : Boolean,
containerScroll : Boolean,
ddAppendOnly : String,
/*很顯然這是api的一個錯誤,treepanel.js中惟一用到它的地方是this.dropZone = new
Ext.tree.TreeDropZone(this, this.dropConfig || {
ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
})
只有沒有定義dropConfig纔會影響ddconfig的appendOnly,原api說明是
True if the tree should only allow append drops 只有當值爲真時才允許以追加的方式接受拖曳*/
ddGroup : String,
ddScroll : Boolean,
dragConfig : Object,
dropConfig : Object,
enableDD : Boolean,
enableDrag : Boolean,
enableDrop : Boolean, //以上參數更應該放在Ext.dd中學習
hlColor : String, //高亮顏色
hlDrop : Boolean //曳入時高亮顯示?
lines : Boolean //顯示樹形控件的前導線
loader : Ext.tree.TreeLoader //這是個重要的參數,用於方便的構建樹形菜單,用於遠程調用樹狀數據
pathSeparator : String //默徑分隔符.默認爲/
rootVisible : Boolean //根可見?這是個有趣的屬性,因爲樹只能有且僅有一個根,當我們需要兩個或更多的"根"時就要用它了
selModel : Boolean
/*選擇模式,默認的是一個Ext.tree.DefaultSelectionModel實例,也可以是
Ext.tree.MultiSelectionModel,如果你有興趣,還可以自己定義,當然,它絕對不是一個布爾值
另,雖然內置的兩種選擇方式都支持getSelectedNodes和clearSelections()
方法,但treenode中好象只用到的select/unSelecte/isSelected,如果自己繼承寫SelectionModel應該至少
支持這三個方法
*/
singleExpand : Boolean //在所有的兄弟節點中只能有一個被展開
屬性
dragZone : Ext.tree.TreeDragZone
dropZone : Ext.tree.TreeDropZone
root : Node //最重要的也就是這個屬性了
方法
TreePanel( Object config )
構造
collapseAll() : void
expandAll() : void
收起展開所有節點
expandPath( String path, [String attr], [Function callback] ) : void
由path找到節點,展開樹到此節點
getChecked( [String attribute], [TreeNode startNode] ) : Array
返回一個包含所有選中節點的數組.或者所有選中節點的屬性attribute組成的數組
getEl() : Element
返回當前TreePanel的容器對象
getLoader() : Ext.tree.TreeLoader
當前所使用的TreeLoader對象
getNodeById( String id ) : Node
由指定的節點id找到節點對象
getRootNode() : Node
得到根節點,同屬性root
getSelectionModel() : TreeSelectionModel
得到選擇模式
getTreeEl() : Ext.Element
返回當前tree下面的元素
selectPath( String path, [String attr], [Function callback] ) : void
由path選擇指定的節點,它事實上調用的是expandPath用於展開節點對象
setRootNode( Node node ) : Node
設置根節點
事件
append : ( Tree tree, Node parent, Node node, Number index )
beforeappend : ( Tree tree, Node parent, Node node )
beforechildrenrendered : ( Node node )
beforeclick : ( Node node, Ext.EventObject e )
beforecollapsenode : ( Node node, Boolean deep, Boolean anim )
beforeexpandnode : ( Node node, Boolean deep, Boolean anim )
beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )
beforeload : ( Node node )
beforemove : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )
beforenodedrop : ( Object dropEvent )
beforeremove : ( Tree tree, Node parent, Node node )
checkchange : ( Node this, Boolean checked )
click : ( Node node, Ext.EventObject e )
collapsenode : ( Node node )
contextmenu : ( Node node, Ext.EventObject e )
dblclick : ( Node node, Ext.EventObject e )
disabledchange : ( Node node, Boolean disabled )
dragdrop : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e )
enddrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )
expandnode : ( Node node )
insert : ( Tree tree, Node parent, Node node, Node refNode )]
load : ( Node node )
move : ( Tree tree, Node node, Node oldParent, Node newParent, Number
nodedragover : ( Object dragOverEvent )
nodedrop : ( Object dropEvent )
remove : ( Tree tree, Node parent, Node node )
startdrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )
textchange : ( Node node, String text, String oldText )
Ext.tree.TreeNode
樹狀控件的節點類,繼承自Ext.data.Node
config{
allowChildren : Boolean
allowDrag : Boolean
allowDrop : Boolean
checked : Boolean //無論設爲真還是假都會在前面有個選擇框,默認未設置
cls : String
disabled : Boolean
draggable : Boolean
expandable : Boolean
expanded : Boolean
href : String //超鏈接
hrefTarget : String
icon : String //圖標
iconCls : String
isTarget : Boolean //是拖曳的目標?
qtip : String //提示
qtipCfg : String //
singleClickExpand : Boolean //單擊展開
text : String //文本內容
uiProvider : Function //默認Ext.tree.TreeNodeUI,如果想自己提供ui可以自已再繼承Ext.tree.TreeNodeUI
}
屬性
disabled : Boolean
text : String
ui : TreeNodeUI //此屬性只讀.參見uiProvider
方法
TreeNode( Object/String attributes )
構造
collapse( [Boolean deep], [Boolean anim] ) : void
收起本節點
collapseChildNodes( [Boolean deep] ) : void
收起子節點
disable() : void
enable() : void
禁止允許
ensureVisible() : void
確保所有的父節點都是展開的
expand( [Boolean deep], [Boolean anim], [Function callback] ) : void
展開到當前節點
expand( [Boolean deep], [Boolean anim], [Function callback] ) : void
展開本節點
expandChildNodes( [Boolean deep] ) : void
展開所有的子節點
getUI() : TreeNodeUI
返回ui屬性
isExpanded() : Boolean
當前節點是否展開
isSelected() : Boolean
當前節點是否選擇
select() : void
選擇當前節點
setText( String text ) : void
設置當前節點的文本
toggle() : void
在展開或收起狀態間切換
unselect() : void
取消選擇
事件
beforechildrenrendered : ( Node this )
beforeclick : ( Node this, Ext.EventObject e )
beforecollapse : ( Node this, Boolean deep, Boolean anim )
beforeexpand : ( Node this, Boolean deep, Boolean anim )
checkchange : ( Node this, Boolean checked )
click : ( Node this, Ext.EventObject e )
collapse : ( Node this )
contextmenu : ( Node this, Ext.EventObject e )
dblclick : ( Node this, Ext.EventObject e )
disabledchange : ( Node this, Boolean disabled )
expand : ( Node this )
textchange : ( Node this, String text, String oldText )
Ext.tree.AsyncTreeNode
繼承自Ext.tree.TreeNode,支持異步創建,很顯然除了多個loader與TreeNode沒什麼區別
config{
loader : TreeLoader
}
屬性
loader : TreeLoader
方法
AsyncTreeNode( Object/String attributes )
isLoaded() : Boolean
isLoading() : Boolean
reload( Function callback ) : void
事件
beforeload : ( Node this )
load : ( Node this )
Ext.tree.TreeNodeUI
爲節點輸出而設計,如果想創建自己的ui,應該繼承此類
方法
addClass( String/Array className ) : void
增加樣式類
getAnchor() : HtmlElement
返回<a>元素
getIconEl() : HtmlElement
返回<img>元素
getTextEl() : HtmlNode
返回文本節點
hide() : void
隱藏
isChecked() : Boolean
選中?
removeClass( String/Array className ) : void
移除樣式
show() : void
顯示
toggleCheck( Boolean (optional) ) : void
切換選中狀態
Ext.tree.RootTreeNodeUI
api上說它繼承自object,事實上treenodeui它中繼承自Ext.tree.TreeNodeUI,也只有這樣才合理,用於輸出根節點
Ext.tree.TreeLoader
用於遠程讀取樹狀數據來構造TreeNode的子節點
config{
baseAttrs : Object //構造子節點的基礎屬性
baseParams : Object //請求url的傳入參數
clearOnLoad : Boolean //重新載入前先清空子節點
dataUrl : String //遠程請求時的url
preloadChildren : Boolean //節點第一次載入時遞歸的載入所有子孫節點的children屬性
uiProviders : Object //ui提供者
url : String //等同於dataUrl
}
方法
TreeLoader( Object config )
構造
createNode() : void
創建節點,treeloader.js中定義的是createNode : function(attr),傳入的應該是一個定製的節點
load( Ext.tree.TreeNode node, Function callback ) : void
爲node載入子節點
事件
beforeload : ( Object This, Object node, Object callback )
load : ( Object This, Object node, Object response )
loadexception : ( Object This, Object node, Object response )
Ext.tree.TreeSorter
排序
config{
caseSensitive : Boolean//大小寫敏感,默認爲false
dir : String //正序還是倒序,可選asc/desc.默認asc
folderSort : Boolean //葉節點排在非葉節點之下 ,默認爲真
leafAttr : String //在folderSort中排序時的使用的屬性,默認爲leaf
property : String //用於排序的屬性.默認爲text
sortType : Function //可以通過特定的sortType先轉換再排序
}
方法
TreeSorter( TreePanel tree, Object config )
構造
Ext.tree.TreeFilter
過濾器
clear() : void
清除當前過濾器
filter( String/RegExp value, [String attr], [TreeNode startNode] ) : void
filterBy( Function fn, [Object scope] ) : void
使用過濾器,但正如api中所說的,這是個實驗性的數,還有很多不足,基本上很難真的作用
慣例來個小示例
Ext.onReady(function()...{
//建立樹
var tree=new Ext.tree.TreePanel(...{
el:Ext.getBody(),
autoScroll:true,
animate:true,
height:200,
enableDD:true,
containerScroll: true
});
//建立根
var root = new Ext.tree.TreeNode(...{
text: 'Ext JS',
draggable:false,
id:'root'
});
//設置根
tree.setRootNode(root);
tree.render();
//增加子節點
root.appendChild(new Ext.tree.TreeNode(...{
text: 'csdn',
href:'http://www.csdn.net',
id:'node_csdn'
}));
root.appendChild(new Ext.tree.TreeNode(...{
text: 'duduw',
href:'http://www.duduw.com',
id:'duduw_Node'
}));
//設置屬性
tree.root.attributes.description='這是根節點';
//getNodeById
tree.getNodeById('duduw_Node').attributes.description='這是葉節點';
//選擇第一個子節點
tree.selectPath('/root/node_csdn');
//事件
tree.on('click',function(node,e)...{
e.stopEvent();
if(node.attributes.description)...{
Ext.MessageBox.show(...{title:'您選擇了',
msg:String.format("description:{0}<br/>href:{1}",node.attributes.description,node.attributes.href)
});
}
});
});
Ext.menu.Menu
菜單對象
config{
allowOtherMenus : Boolean
//允許同時顯示其它的菜單?
defaultAlign : String //默認對齊方式:tl-bl?
defaults : Object //默認的菜單項配置,將會應用到所有的items
items : Mixed
//菜單項數組
minWidth : Number //最小寬度.默認120
shadow :
Boolean/String //
subMenuAlign : String //子菜單對齊方式
tl-tr?
}
Menu( Object config )
構造
add( Mixed args ) :
Ext.menu.Item
添加菜單項
可能的參數爲
* 從Ext.menu.Item繼承來的菜單項對象
*
可以被轉換爲menu item的HTMLElement對象
*
一個Ext.menu.Item的構造config對象
*一個字符串,-或separator將爲分隔項,其它的做爲TextItem對象的構造參數
addElement(
Mixed el ) : Ext.menu.Item
添加Element對象
addItem( Ext.menu.Item item ) :
Ext.menu.Item
添加Item 對象
addMenuItem( Object config ) :
Ext.menu.Item
添加Item對象,這回傳入的參數是item構造的config參數
addSeparator() :
Ext.menu.Item
添加間隔項
addText( String text ) :
Ext.menu.Item
添加文本項
getEl() :
Ext.Element
得到當前element對象
hide( [Boolean deep] ) :
void
隱藏
insert( Number index, Ext.menu.Item item ) :
Ext.menu.Item
在index位置插入item
isVisible() : void
可見?
remove(
Ext.menu.Item item ) : void
移除item
removeAll() :
void
移除所有
show( Mixed element, [String position], [Ext.menu.Menu
parentMenu] ) : void
相對於element顯示當前菜單
showAt( Array xyPosition,
[Ext.menu.Menu parentMenu] ) :
void
在絕對位置xyposition顯示當前菜單
Ext.menu.BaseItem
所有菜單項的基類,繼承自Component
config
{
activeClass : String //活躍時的樣式類,默認x-menu-item-active
canActivate : Boolean //能設置活躍?默認爲false
handler : Function
//事件處理句柄
hideDelay : Number //隔多長時間自動隱藏,默認100(毫秒)
hideOnClick :
Boolean //點擊後自動隱藏,默認爲真
}
BaseItem( Object config )
構造
setHandler( Function handler, Object scope ) :
void
設置處理句柄handler
事件:
activate : ( Ext.menu.BaseItem this
)
click : ( Ext.menu.BaseItem this, Ext.EventObject e )
deactivate : (
Ext.menu.BaseItem this
)
Ext.menu.Adapter
這個類是爲了支持將非BaseItem子類的容器轉換爲支持baseitem的適配器,除了構造,與BaseItem無異
Adapter(
Ext.Component component, Object config ),可以自己再繼承它做點實用的事,
他的兩個子類更好用
Ext.menu.ColorMenu
提供顏色選擇
Ext.menu.DateItem
提供日期選擇
Ext.menu.Item
是BaseItem的另一個實用子類,提供一般的菜單項,支持菜單項之間的相互關係
config{
canActivate : Boolean
href : String
hrefTarget : String
icon : String //默認Ext.BLANK_IMAGE_URL,建議更改,extjs.com的確太慢了
iconCls :
String
itemCls : String
showDelay : Number
text :
String
}
方法
Item( Object config )
構造
setIconClass( String cls
) : void
setText( String text ) :
void
Ext.menu.CheckItem
繼承自Item,前面帶有選擇框的菜單項
config{
checked
: Boolean
group : String
groupClass : String
//默認x-menu-group-item
itemCls : String
}
方法
CheckItem(
Object config )
構造
checkHandler( Ext.menu.CheckItem this, Boolean
checked ) : void
選擇處理方法
setChecked( Boolean checked, [Boolean
suppressEvent] ) : void
設置選擇狀態
事件
beforecheckchange : (
Ext.menu.CheckItem this, Boolean checked )
checkchange : ( Ext.menu.CheckItem
this, Boolean checked
)
Ext.menu.Separator
繼承自item,間隔項
Ext.menu.TextItem
繼承自item,文本項
config{
hideOnClick : Boolean
itemCls : String
text :
String
}
下面的示例從ext官方而來,繼續簡單的修改,只有menu相關部分.同樣也都很簡單
Ext.QuickTips.init();
//
日期選擇項點擊事件
var
dateMenu
=
new
Ext.menu.DateMenu(
{
handler :
function
(dp, date)
{
handler : 
Ext.MessageBox.alert(
'
Date Selected
'
, String.format(
'
You chose {0}.
'
, date.format(
'
M j, Y
'
)));
}
}
);
var
colorMenu
=
new
Ext.menu.ColorMenu(
{
handler :
function
(cm,color)
{
Ext.MessageBox.alert(
'
Color Selected
'
, String.format(
'
You chose #{0}.
'
, cm.palette.value));
}
}
);
var
menu
=
new
Ext.menu.Menu(
{
id:
'
mainMenu
'
,
items: [
{
text:
'
I like Ext
'
,
checked:
true
,
checkHandler: onItemCheck
}
,
{
text:
'
Ext for jQuery
'
,
checked:
true
,
checkHandler: onItemCheck
}
,
{
text:
'
I donated!
'
,
checked:
false
,
checkHandler: onItemCheck
}
,
'
-
'
,
{
text:
'
Radio Options
'
,
menu:
{
items: [
'
<b class="menu-title">Choose a Theme</b>
'
,
{
text:
'
Aero Glass
'
,
checked:
true
,
group:
'
theme
'
,
checkHandler: onItemCheck
}
,
{
text:
'
Vista Black
'
,
checked:
false
,
group:
'
theme
'
,
checkHandler: onItemCheck
}
,
{
text:
'
Gray Theme
'
,
checked:
false
,
group:
'
theme
'
,
checkHandler: onItemCheck
}
,
{
text:
'
Default Theme
'
,
checked:
false
,
group:
'
theme
'
,
checkHandler: onItemCheck
}
]
}
}
,
{
text:
'
Choose a Date
'
,
iconCls:
'
calendar
'
,
menu: dateMenu
}
,
{
text:
'
Choose a Color
'
,
menu: colorMenu
}
]
}
);
var
tb
=
new
Ext.Toolbar();
tb.render(Ext.getBody());
tb.add(
{
text:
'
Button w/ Menu
'
,
iconCls:
'
bmenu
'
,
//
<-- icon
menu: menu
//
assign menu by instance
}
);
menu.addSeparator();
//
Menus have a rich api for
//
adding and removing elements dynamically
var
item
=
menu.add(
{
text:
'
Dynamically added Item
'
}
);
//
items support full Observable API
item.on(
'
click
'
, onItemClick);
//
items can easily be looked up
menu.add(
{
text:
'
Disabled Item
'
,
id:
'
disableMe
'
//
<-- Items can also have an id for easy lookup
//
disabled: true <-- allowed but for sake of example we use long way below
}
);
//
access items by id or index
menu.items.get(
'
disableMe
'
).disable();
//
這個增加子菜單的方法照貓畫虎學的,至於add的到底是個什麼?getXType得不到,item有私有的屬性menu?
var
ele
=
menu.add(
{
text:
'
submit
'
,
menu:
{
items:[
{text:
'
submenu1
'
,handler:onItemClick}
,
{text:
'
submenu2
'
,handler:onItemClick}
]
}
}
);
//
functions to display feedback
function
onButtonClick(btn)
{
Ext.MessageBox.alert(
'
Button Click
'
,String.format(
'
You clicked the "{0}" button.
'
, btn.text));
}
function
onItemClick(item)
{
Ext.MessageBox.alert(
'
Menu Click
'
, String.format(
'
You clicked the "{0}" menu item.
'
, item.text));
}
function
onItemCheck(item, checked)
{
Ext.MessageBox.alert(
'
Item Check
'
, String.format(
'
You {1} the "{0}" menu item.
'
, item.text, checked
?
'
checked
'
:
'
unchecked
'
));
}
function
onItemToggle(item, pressed)
{
Ext.MessageBox.alert(
'
Button Toggled
'
, String.format(
'
Button "{0}" was toggled to {1}.
'
, item.text, pressed));
}
Ext.Toolbar
工具欄,使用起來很簡單，add已準備好的元素就行
方法
Toolbar( Object/Array config )
構造
add( Mixed arg1, Mixed arg2, Mixed etc. ) : void
增加元素
可以是
1:Ext.Toolbar.Button 相當於addButton
2:HtmlElement 相當於addElement
3:Field 相當於addField
4:Item 相當於addItem
5:String 相當於addText
6:'separator'或'-' 相當於addSeparator
7:'' 相當於addSpacer
8:'->' 相當於addFill
addButton( Object/Array config ) : Ext.Toolbar.Button/Array
添加Ext.Toolbar.Button/SplitButton對象,其實因爲Ext.Toolbar.Button和Ext.Button用起來沒什麼區別,而且Toolbar兩者都支持，我實驗時沒發現使用上有什麼不同
addDom( Object config ) : Ext.Toolbar.Item
添加DOM節點
addElement( Mixed el ) : Ext.Toolbar.Item
添加Element對象
addField( Ext.form.Field field ) : Ext.ToolbarItem
添加Ext.form.Field對象
addFill() : Ext.Toolbar.Fill
添加一個撐滿工具條的空白元素
addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
添回Ext.Toolbar.Item對象
addSeparator() : Ext.Toolbar.Item
添加一個分隔元素,相當於addItem(new Ext.Toolbar.Separator());
addSpacer() : Ext.Toolbar.Spacer
添加一個空白元素,相當於addItem(new Ext.Toolbar.Spacer());
addText( String text ) : Ext.Toolbar.Item
添加文本元素,相當於addItem(new Ext.Toolbar.TextItem(text));
insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button button ) : Ext.Toolbar.Button/Item
在第index個元素之前插入button對象
Ext.Toolbar.Item
工具欄元素基類
Toolbar.Item( HTMLElement el )
構造
destroy() : void
銷燬
disable() : void
enable() : void
可用／禁用
focus() : void
得到焦點
getEl() : HTMLElement
得到當前DOM對象
setVisible( Boolean visible ) : void
show() : void
hide() : void
顯示隱藏
Ext.Toolbar.Separator
繼承自item,工具欄分隔符
Ext.Toolbar.Spacer
繼承自item,工具欄空白元素
Ext.Toolbar.TextItem
繼承自item,工具欄文本元素
Ext.Toolbar.Fill
繼承自Spacer,工具欄空白元素,撐滿工具欄
簡單的示例
var tb = new Ext.Toolbar(...{width:400});
//在add之前先render,必要,不然會報錯//在add之前先render,必要
tb.render(Ext.getBody());
tb.addText('請選擇時間');
tb.add( new Ext.form.DateField(...{ //DateField
fieldLabel:'DateField',
format:'Y-m-d',
disabledDays:[0,6]
})
);
tb.addButton(
new Ext.Toolbar.Button(...{
text:'button',
handler:function(item)...{
Ext.MessageBox.alert("toolbar","您點擊了"+item.text)
}
})
);
tb.addSpacer();
tb.addSeparator();
tb.addFill();
tb.add(new Ext.SplitButton(...{
handler: function(item)...{
Ext.MessageBox.alert("點擊事件",String.format("您選擇了{0}",item.text));
},
arrowTooltip : "更多",
text:'按我',
menu:new Ext.menu.Menu(...{
id: 'mainMenu',
items: [
...{
text: '菜單項1'
},
...{
text: '菜單項2'
}]
})
})
);
tb.add('右邊結束');
Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberFie
文章分類:Web前端Ext.form.NumberField
繼承自Ext.form.TextField,因爲Ext.form.TextField雖然強大,但寫起來的確還是有點麻煩,後面的類都繼承自Ext.form.TextField,沒有自定義的方法,屬性和事件
config定義爲{
allowDecimals : Boolean //true
allowNegative : Boolean //true
baseChars : String //'0123456789'
decimalPrecision : Number //精度,默認值2
decimalSeparator : String //小數分隔符
fieldClass : String //默認樣式爲x-form-field x-form-num-field
maxText : String
maxValue : Number //默認Number.MAX_VALUE
minText : String
minValue : Number //默認Number.NEGATIVE_INFINITY
nanText : String //NaN時顯示?
}
Ext.form.TextArea
config{
autoCreate : String/Object //{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}
growMax : Number //1000
growMin : Number //60
preventScrollbars : Boolean //如果爲真等於設置overflow: hidden,默認爲false
}
Ext.form.TriggerField
這個類只要text旁邊加了個下拉按鈕,要自己實現onTriggerClick
config{
autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"}
hideTrigger : Boolean //隱藏trigger,就是右邊的那個下拉選擇框
triggerClass : String
}
事件
onTriggerClick( EventObject e ) : void
Ext.form.DateField
繼承自TriggerField,用於日期選擇
config{
altFormats : String //轉換用戶輸入到日期時的格式,默認'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'
autoCreate : String/Object //{tag: "input", type: "text", size: "10", autocomplete: "off"}
disabledDates : Array //禁止選擇的日期:例 ["^03","04/../2006","09/16/2003"],不讓選3月,2006年4月,2003年9月16
disabledDatesText : String //不讓選總得給個理由吧
disabledDays : Array //不讓選星期幾,例[0,6],不讓選週六,週日
disabledDaysText : String //週日要休息,這就是理由
format : String //顯示時的格式
invalidText : String //驗證非法時的提示
maxText : String
maxValue : Date/String
minText : String
minValue : Date/String
triggerClass : String
}
方法,除了構造,多了兩個顧名思義的方法
DateField( Object config )
getValue() : Date
setValue( String/Date date ) : void
Ext.form.ComboBox
config{
allQuery : String //''
autoCreate : Boolean/Object //{tag: "input", type: "text", size: "24", autocomplete: "off"}
displayField : String //顯示字段
editable : Boolean //true當然就是combobox了,如果不可編輯就是一個select了
forceSelection : Boolean
handleHeight : Number //如果resiable爲真時,設置
hiddenName : String
lazyInit : Boolean //除非得到焦點纔開始初始化列表,默認爲真
lazyRender : Boolean //除非請求,纔開始輸出,默認爲假
listAlign : String //對齊方式,參見Ext.Element.alignTo,默認爲'tl-bl'
listClass : String
listWidth : Number
loadingText : String //僅當mode = 'remote'時調用數據時顯示的文本
maxHeight : Number //300
minChars : Number //最少輸入多少個字開始響應,遠程時默認爲4,本地爲0,如果不可編輯則此值無效
minListWidth : Number
mode : String //可選值local/remote之一,從本地還是遠程取數據
pageSize : Number //在遠程模式下,如果此值大於0會在底部顯示一個翻頁工具條
queryDelay : Number //查詢延時,遠程默認爲500,本地10
queryParam : String //查詢參數,默認爲query
resizable : Boolean
selectOnFocus : Boolean
selectedClass : String
shadow : Boolean/String //True或"sides"爲默認風格, "frame" for 4-way shadow, and "drop" for bottom-right
store : Ext.data.Store
title : String
transform : Mixed //對應一個select元素,可以將select轉爲combobox對象
triggerAction : String //點擊按鈕時的動作.默認爲query
triggerClass : String
typeAhead : Boolean //false
typeAheadDelay : Number //250
valueField : String
valueNotFoundText : String //值不存在時的提示信息
}
屬性
view : Ext.DataView
方法
ComboBox( Object config )
構造
clearValue() : void
清除所有文本/值對
collapse() : void
expand() : void
收起/展開下拉列表
doQuery( String query, Boolean forceAll ) : void
執行查詢
getValue() : String
選擇當前字段的值
isExpanded() : void
下拉列表是展開的?
select( Number index, Boolean scrollIntoView ) : void
選中第index列表項
selectByValue( String value, Boolean scrollIntoView ) : Boolean
選中值爲value的列表項
setEditable( Boolean value ) : void
設editable屬性爲value
setValue( String value ) : void
設置當前值爲
事件
beforequery : ( Object queryEvent )
beforeselect : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
collapse : ( Ext.form.ComboBox combo )
expand : ( Ext.form.ComboBox combo )
select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
Ext.form.TimeField
繼承自combobox,用於選擇時間
config{
altFormats : String //
format : String
increment : Number //時間增長間隔,默認15
invalidText : String
maxText : String
maxValue : Date/String
minText : String
minValue : Date/String
}
總的來說Ext.form對input type='text' select
這樣的輸入標籤都有對應的類,並對有些標籤做了簡單的擴展,當然很重要的一點,漂亮多了,vtype屬性也方便了處理,建議有興趣的同胞對
Ext.form.VTypes和Ext.form.HtmlEditor做一些擴展
form中還有兩個類,比如下例中的FormPanel和FieldSet,
都繼承自panel,所以會放在panel中解釋
綜合示例
Ext.QuickTips.init();
var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉燈'] ];
var reader = new Ext.data.ArrayReader(
...{id: 0},
[
...{name: 'value'},
...{name: 'key'}
]);
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);
var htmleditor=new Ext.form.HtmlEditor(...{
fieldLabel:'htmleditor',
width:450,
fontFamilies:['宋體','隸書'],
name:'editor',
id:'editor'
});
var form = new Ext.FormPanel(...{
labelWidth: 75,
url:'post.php',
frame:true,
width: 800,
defaultType: 'textfield',
items: [
new Ext.form.Checkbox(...{ //checkbox
fieldLabel:'checkbox',
name:'cb',
checked:true,
boxLabel:'checkbox'
}),
new Ext.form.FieldSet(...{ //radio
border:false,
title:'radio',
items:[
new Ext.form.Radio(...{
labelSeparator:'',
name:'radio',
checked:true,
boxLabel:'radio 1'
}),
new Ext.form.Radio(...{
labelSeparator:'',
name:'radio',
checked:true,
boxLabel:'radio 2'
})
]
}),
new Ext.form.Hidden(...{ //hidden
name:'hidden'
}),
htmleditor,
new Ext.form.TextField(...{ //text
fieldLabel:'text',
name:'text',
grow:true,
allowBlank:false,
blankText : "這個字段最好不要爲空",
maskRe:/[a-zA-z]/gi
}),
new Ext.form.NumberField(...{ //NumberField
allowNegative:true,
fieldLabel:'number',
name:'number'
}),
new Ext.form.TextArea(...{ //TextArea
fieldLabel:'textarea',
name:'textarea'
}),
new Ext.form.TriggerField(...{ //TriggerField
fieldLabel:'TriggerField',
name:'TriggerField'
}),
new Ext.form.ComboBox(...{ //select
fieldLabel:'select',
editable:false,
triggerAction: 'all',
valueField:'value',
displayField:'key',
mode: 'local',
store:store
}),
new Ext.form.ComboBox(...{ //combobox
fieldLabel:'ComboBox',
displayField:'key',
mode: 'local',
store:store
}),
new Ext.form.DateField(...{ //DateField
fieldLabel:'DateField',
format:'Y-m-d',
disabledDays:[0,6]
}),
new Ext.form.TimeField(...{//TimeField
fieldLabel:'TimeField',
mode: 'local',
increment:60
})
]
});
form.render(document.body);
htmleditor.setRawValue("<h1>hello world</h1>");
htmleditor.syncValue();
Ext.form.BasicForm
對應一個dom中的form,默認是用ajax提交的,如果的確想回傳,可以使用如下方式
var myForm = new Ext.form.BasicForm("form-el-id", {
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
}
});
方法:
BasicForm( Mixed el, Object config )
其中config配置爲
{
baseParams : Object, //請求時的附加參數,格式爲{id: '123', foo: 'bar'}
errorReader : DataReader, //提交時發生驗證錯誤,這個dataReader將會被使用
fileUpload : Boolean, //支持文件上傳
method : String, //GET或者POST
reader : DataReader, //load時使用的數據讀取器
timeout : Number, //超時時間
trackResetOnLoad : Boolean,//支持使用reset方法恢復原始值
url : String //form要提交的url地址
}
add( Field field1, [Field field2], [Field etc] ) : BasicForm
增加字段field1,field2,etc
applyIfToFields( Object values ) : BasicForm
applyToFields( Object values ) : BasicForm
用傳入的values呼叫Ext.applyIf/apply 方法
clearInvalid() : BasicForm
清除當前basicform中所有的非法信息
doAction( String/Object actionName, [Object options] ) : BasicForm
執行預定義的動作actionName,actionName類似"submit","load",也可以是自定義的動作的名字或一個Ext.form.Action的實例,options類似如下對象{
url :String,
method :String,
params :String/Object,
success :Function,
failure :Function,
clientValidation :Boolean
}
findField( String id ) : Field
在當前form中查找id/dataindex/name等於傳入的id的field對象
getEl() : Ext.Element
得到當前form對象的element對象
getValues( Boolean asString ) : Object
得到當前form的fields {name:value,name:values}json對象,如果有同名多值,value將是一個數組
isDirty() : Boolean
從初始載入後,是否有field被修改過
isValid() : Boolean
客戶端驗證成功?
load( Object options ) : BasicForm
等效於doAction('load',options);
loadRecord( Record record ) : BasicForm
從一個record對象取值到當前basicform
markInvalid( Array/Object errors ) : BasicForm
標誌非法,[{id:'fieldId', msg:'The message'},...]這樣格式的數組或者{id: msg, id2: msg2}格式的對象
remove( Field field ) : BasicForm
從basicform中移除field
render() : BasicForm
在basicForm的fields中尋找,利用id屬性檢查他們,然後用id屬性呼叫applyTo方法
reset() : BasicForm
重置所有值
setValues( Array/Object values ) : BasicForm
設置值,參見getValues
submit( Object options ) : BasicForm
提交表單
updateRecord( Record record ) : BasicForm
利用當前更新record對象,參見loadRecord
事件:
actioncomplete : ( Form this, Action action )
actionfailed : ( Form this, Action action )
beforeaction : ( Form this, Action action )
Ext.form.Field
有了form之後,我們當然還需要field
方法:
Field( Object config )
其中config設置爲{
autoCreate : String/Object, //一個{tag: "input", type: "text",
size: "20", autocomplete: "off"}這樣的對象,或者選
擇true,就是前面所說的那個固定內置對象
clearCls : String, //,默認x-form-clear-left
cls : String, //默認樣式
disabled : Boolean,
fieldClass : String //x-form-field
fieldLabel : String
focusClass : String //x-form-focus
hideLabel : Boolean //隱藏前導標籤
inputType : String //input type="???"
invalidClass : String //x-form-invalid
invalidText : String
itemCls :String
labelSeparator : String //分隔符
msgFx : String
msgTarget : String
name : String
readOnly : Boolean
tabIndex : Number
validateOnBlur : Boolean //true
validationDelay : Number //250
validationEvent : String/Boolean //KeyUP
value : Mixed
}
構造很麻煩的,但還好我們一般不會直接使用field
clearInvalid() : void
清除非法信息
getName() : String
getRawValue() : Mixed
getValue() : Mixed
isDirty() : void
isValid( Boolean preventMark ) : Boolean
markInvalid( String msg ) : void
reset() : void
setRawValue( Mixed value ) : void
setValue( Mixed value ) : void
validate() : Boolean
都很簡單也略過了
事件
blur : ( Ext.form.Field this )
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
focus : ( Ext.form.Field this )
invalid : ( Ext.form.Field this, String msg )
specialkey : ( Ext.form.Field this, Ext.EventObject e )
valid : ( Ext.form.Field this )
Ext.form.Checkbox
繼承自Field, 複選框
Checkbox( Object config )
構造,其中config{
autoCreate : String/Object,
boxLabel : String,
checked : Boolean,
fieldClass : String,//x-form-field
focusClass : String,
}
getValue() : Boolean
initComponent() : void
setValue( Boolean/String checked ) : void
事件
check : ( Ext.form.Checkbox this, Boolean checked )
Ext.form.Radio
繼承自Ext.form.Checkbox,單選框
多了一個方法
getGroupValue() : String
如果單選框是一組radio 的一部分,取當前選中的值
Ext.form.Hidden
繼承自Field,隱藏字段,無新特性
Ext.form.HtmlEditor
繼承自Field,這個htmleditor功能太簡單了,什麼人能擴充一下就好了
config定義{
createLinkText : String //
defaultLinkValue : String // http://
enableAlignments : Boolean
enableColors : Boolean
enableFont : Boolean
enableFontSize : Boolean
enableFormat : Boolean
enableLinks : Boolean
enableLists : Boolean
enableSourceEdit : Boolean
fontFamilies : Array //這個當然要用漢字的字體組成的數組了
}
方法
cleanHtml( String html ) : void
createToolbar( HtmlEditor editor ) : void
execCmd( String cmd, [String/Boolean value] ) : void
getDocMarkup() : void
getToolbar() : Ext.Toolbar
insertAtCursor( String text ) : void
pushValue() : void
relayCmd( String cmd, [String/Boolean value] ) : void
syncValue() : void
toggleSourceEdit( [Boolean sourceEdit] ) : void
updateToolbar() : void
要提一點的是,要使用HtmlEditor,別忘了先Ext.QuickTips.init();
Ext.form.TextField
config{
allowBlank : Boolean //允許爲空
blankText : String //如果爲空驗證錯誤時的提示文字 ,默認This field is required
disableKeyFilter : Boolean
emptyClass : String
emptyText : String
grow : Boolean // 自動生長?,如果需要,會加寬當前input type="text"
growMax : Number
growMin : Number
maskRe : RegExp //僅允許輸入與maskRe匹配的按鍵
maxLength : Number
maxLengthText : String //超出最大長度時提示文本
minLength : Number
minLengthText : String //不夠最小長度時提示信息
regex : RegExp //正則匹配
regexText : String //提示
selectOnFocus : Boolean
validator : Function //自定義驗證方法,接受當前字段的值,如果合法,返回真,反之返回自定義信息
vtype : String //Ext.form.VTypes 中定義的vtype類型名,支持簡單的類型驗證
vtypeText : String//如果不是,則提示
}
方法:
TextField( Object config )
構造
autoSize() : void
自動尺寸
reset() : void
重置
selectText( [Number start], [Number end] ) : void
選擇文本
validateValue( Mixed value ) : Boolean
驗證值
Ext.Action
action實現一個脫離了容器的事件,所有它可以在多個容器之間共享,不過好象只有Ext.Toolbar, Ext.Button 和
Ext.menu.Menu支持action接口:),因爲容器要實現下面所有的方法setText(string),
setIconCls(string), setDisabled(boolean), setVisible(boolean) and
setHandler(function)
方法:
Action( Object config )
構造,config定義爲{
disabled : Boolean,//禁止使用
handler : Function,//事件句柄
hidden : Boolean,//隱藏
iconCls : String,//樣式類
scope : Object, //handler將在哪個範圍內執行
text : String //文本
}
disable() : void
enable() : void
setDisabled( Boolean disabled ) : void
禁止/允許
each( Function fn, Object scope ) : void
爲每個實現了此action的componet應用fn
hide() : void
show() : void
setHidden( Boolean hidden ) : void
顯示/隱藏
setHandler( Function fn, Object scope ) : void
setIconClass( String cls ) : void
setText( String text ) : void
重新設置config配置的屬性值
示例:
var action = new Ext.Action(...{
text: 'Do something',
handler: function()...{
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something'
});
var panel = new Ext.Panel(...{
title: 'Actions',
width:500,
height:300,
tbar: [
//將action做爲一個菜單按鈕添加到工具欄
action, ...{
text: 'Action Menu',
//將action做爲文本選擇項添加到menu
menu: [action]
}
],
items: [
//由action構造button,添加到panel
new Ext.Button(action)
],
renderTo: Ext.getBody()
});
// 如果這兒setText.當然button/menu/toolbar中的action文本都變了
action.setText('Something else');
Ext.Button
簡單的按鈕類
公有屬性:
disabled : Boolean
允許?
hidden : Boolean
隱藏?
pressed : Boolean
按下?
方法 [繼承來的忽略]
Button( Object config )
構造可選config{
clickEvent : String, //handler響應的事件,默認是click
cls : String, //樣式
disabled : Boolean, //禁止
enableToggle : Boolean,//允許在按下沒按下之間切換,添加移除x-btn-pressed樣式類
handleMouseEvents : Boolean,//允許使用移入移出按下事件,默認是真
handler : Function, //響應clickEvent定義的事件
hidden : Boolean, //隱藏
icon : String, //圖標文件地址,如果修改x-btn-text-icon樣式類可以重定義默認icon
iconCls : String, //和icon功能類似,但使用設定了background-image屬性的樣式定義
menu : Mixed //如果需要,可以爲按鈕定義菜單
menuAlign : String, //菜單對齊方式,默認值是tl-bl
minWidth : Number, //最小寬度
pressed : Boolean, //是否按下
repeat : Boolean/Object,//是否需要重複定義鼠標按下事件,也可以是一個Ext.util.ClickRepeater配置對象
scope : Object, //handler事件的範圍
tabIndex : Number, //table鍵順序
text : String, //文本
toggleGroup : String, //如果定義一組enableToggle爲真且toggleGroup值相同的button對象,這些對象同一時間內將只有一個處於按下狀態
tooltip : String/Object, //提示信息,可以是一個字符串或QuickTips的配置對象
tooltipType : String, //可選值"qtip"(默認)或"title"之一
type : String //可選值"submit"/"reset"/"button"(默認)之一
}
focus() : void
//得到焦點
getText() : String
//取得文本
hasVisibleMenu() : Boolean
//有可視的菜單?
hideMenu() : void
//隱藏菜單
initComponent() : void
//初始化容器
setHandler( Function handler, [Object scope] ) : void
//設置事件處理方法
setText( String text ) : void
//設置文本
showMenu() : void
//顯示菜單
toggle( [Boolean state] ) : void
//切換按下狀態
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" />
<script type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/scripts/ext-all.js"></script>
<style type="text/css">...
/**//*--加入樣式背景好直觀一點*/
.x-btn-pressed button{...}{
background-color:red;
}
</style>
<script type="text/javascript">...
Ext.onReady(function()...{
//有菜單的按鈕
function onItemCheck(item)...{
Ext.MessageBox.alert("點擊事件",String.format("您選擇了{0}",item.text));
}
var menu = new Ext.menu.Menu(...{
id: 'mainMenu',
items: [
...{
text: 'menu1',
handler: onItemCheck
},
...{
text: 'menu2',
handler: onItemCheck
}]
});
var button=new Ext.Button(...{
renderTo:Ext.getBody(),
text:'按我',
menu:'mainMenu'
});
//有狀態的探鈕
new Ext.Button(...{
renderTo:Ext.getBody(),
text:'toggle button ',
enableToggle:true
});
//分組的有狀態按鈕
new Ext.Button(...{
renderTo:Ext.getBody(),
text:'toggle button 1',
enableToggle:true,
toggleGroup:'toggleGroup',
handler: onItemCheck
});
new Ext.Button(...{
renderTo:Ext.getBody(),
text:'toggle button 2',
enableToggle:true,
toggleGroup:'toggleGroup',
handler: onItemCheck
});
});
</script>
</head>
<body>
</body>
</html>
Ext.SplitButton
上例中的帶菜單按鈕還不專業,於是有了Ext.SplitButton,專門爲帶有下拉菜單的按鈕設計的
方法:
SplitButton( Object config )
構造,config中加入了{
arrowHandler : Function,
arrowTooltip : String
}
setArrowHandler( Function handler, [Object scope] ) : void
設置下拉箭頭的點擊事件
事件:
arrowclick : ( MenuButton this, EventObject e )
使用示例:
比如上例中的菜單按鈕可以改爲
function onItemCheck(item)...{
Ext.MessageBox.alert("點擊事件",String.format("您選擇了{0}",item.text));
}
function showMenu(obj)...{
Ext.MessageBox.alert("點擊下拉",obj.getXTypes() )
}
Ext.QuickTips.init();
var button=new Ext.SplitButton(...{
renderTo:Ext.getBody(),
arrowHandler : showMenu,
handler: onItemCheck,
arrowTooltip : "更多",
text:'按我',
menu:'mainMenu'
});
Ext.CycleButton
這是一個SplitButton的實用子類,用於在多個item之間切換狀態,當然它也會帶有menu可供選擇,也可以直接點擊按鍵在item之間切換
方法:
CycleButton( Object config )
構造,config新增配置項{
changeHandler : Function, //狀態切換時的處理事件
items : Array, //items應該是menu item的數組
prependText : String, //前導text
showText : Boolean, //追加item的text到按鈕顯示
}
getActiveItem() : Ext.menu.CheckItem
setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void
得到/設置活動選項
toggleSelected() : void
切換選擇項,相當於點擊一次按鈕
示例
new Ext.CycleButton(...{
renderTo:Ext.getBody(),
showText: true,
prependText: 'View as ',
items: [...{
text:'text only',
iconCls:'view-text',
checked:true
},...{
text:'HTML',
iconCls:'view-html'
},
...{
text:'XML',
iconCls:'view-html'
}
],
changeHandler:function(btn, item)...{
Ext.MessageBox.alert('Change View', item.text);
}
});
新增事件
arrowclick : ( MenuButton this, EventObject e )
change : ( Ext.CycleButton this, Ext.menu.CheckItem item )
Button還有兩個子類,Ext.Toolbar.button,Ext.Toolbar.SplitButton,用法和Ext.buttom/Ext.SplitButton一樣,只是它們僅適用於工具欄
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/12/03/1913631.aspx?
Ext.data.Tree
繼承自Observable,用於存放樹裝的數據結構
方法
Tree( [Node root] )
以root爲根構造Ext.data.Tree對象
getNodeById( String id ) : Node
由指定id得到節點
getRootNode() : Node
得到根節點,由屬性root得到更方便
setRootNode( Node node ) : Node
設置根節點
事件有
append : ( Tree tree, Node parent, Node node, Number index )
beforeappend : ( Tree tree, Node parent, Node node )
beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )
beforemove : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )
beforeremove : ( Tree tree, Node parent, Node node )
insert : ( Tree tree, Node parent, Node node, Node refNode )
move : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )
remove : ( Tree tree, Node parent, Node node )
Ext.data.Node
節點
屬性
attributes : Object
節點屬性集
childNodes : Array
子節點
firstChild : Node
第一個子節點
id : String
id
lastChild : Node
最後一個子節點
nextSibling : Node
下一個兄弟節點
parentNode : Node
父節點
previousSibling : Node
前一個兄弟節點
Node( Object attributes )
構造節點
appendChild( Node/Array node ) : Node
將node做爲附加在當前節點的lastChild之後
bubble( Function fn, [Object scope], [Array args] ) : void
由當前節點開始一直上溯到根節點,對於每個節點應用fn,直到有一個fn返回假爲止
cascade( Function fn, [Object scope], [Array args] ) : void
由當前節點開始一下對每個子孫節點應用fn.直到返回false爲止
contains( Node node ) : Boolean
當前節點是node的祖先節點?
eachChild( Function fn, [Object scope], [Array args] ) : void
基本同cascade,但只針對子節點應用fn
findChild( String attribute, Mixed value ) : Node
在子節點中找到第一個有屬性attribute值爲value的節點
findChildBy( Function fn, [Object scope] ) : Node
在子節點中找到第一個應用fn返回真的節點
getDepth() : Number
得到當前節點深度,根節點深度爲0
getOwnerTree() : Tree
得到當前節點的Tree對象
getPath( [String attr] ) : String
得到當前節點的路徑,默認attr爲id
indexOf( Node node ) : Number
node在當前節點的子節點中的位置
insertBefore( Node node, Node refNode ) : Node
在參考節點refNode之前插入node節點
isAncestor( Node node ) : Boolean
當前節點是node的祖先節點?
isFirst() : Boolean
isLast() : Boolean
當前節點是父節點的第一/最後一個節點
isLeaf() : Boolean
是葉節點?指不含子節點
item( Number index ) : Node
第index個子節點
removeChild( Node node ) : Node
移除node子節點
replaceChild( Node newChild, Node oldChild ) : Node
用newchild替換oldchild子節點
sort( Function fn, [Object scope] ) : void
用指定的fn排序子節點
事件略
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/30/1909403.aspx?
Ext.data.GroupingStore
繼承自Ext.data.Store,爲Store增加了分組功能.其它用法與Store一致,惟一需要注意的是使用GroupingStore時必須指定sortInfo信息
增加了配置屬性
groupField : String//用於分組的字段
groupOnSort : Boolean//如果爲真,將依排序字段重新分組,默認爲假
remoteGroup : Boolean//遠程排序
當然也會多一個group方法
groupBy( String field, [Boolean forceRegroup] ) : void
顧名思義都是重新排序用的
下面是個簡單的示例
var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉燈'] ];
var reader = new Ext.data.ArrayReader(
...{id: 0},
[
...{name: 'name', mapping: 1},
...{name: 'occupation', mapping: 2}
]);
var store=new Ext.data.GroupingStore(...{
reader:reader,
groupField:'name',
groupOnSort:true,
sortInfo:...{field: 'occupation', direction: "ASC"} //使用GroupingStore時必須指定sortInfo信息
});
store.loadData(arr);
//GridPanel以後會討論,這兒使用它是爲了直觀的表現GroupingStore
var grid = new Ext.grid.GridPanel(...{
ds: store,
columns: [
...{header: "name", width: 20, sortable: true,dataIndex: 'name'},
...{header: "occupation", width: 20,sortable: true, dataIndex: 'occupation'}
],
view: new Ext.grid.GroupingView(...{
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
renderTo: 'Div_GridPanel'
});
Ext.data.JsonStore
也是Store子類,目標是更方便的使用json對象做數據源
構造中多了fields,root,用法如下例所示
/**//*
這是使用遠程對象,返回內容與下面本地對象的data一致
var store=new Ext.data.JsonStore({
url:'jsoncallback.js',
root:'rows',
fields:['id','name','occupation']
});
store.load();
*/
var store=new Ext.data.JsonStore(...{
data:...{ 'results': 2, 'rows': [
...{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
...{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
]},
autoLoad:true,
root:'rows',
fields:['id','name','occupation']
})
//目前請先略過gridpanel,以後再說
var grid = new Ext.grid.GridPanel(...{
ds: store,
columns: [
...{header: "id", width: 200, sortable: true,dataIndex: 'id'},
...{header: "name", width: 200, sortable: true,dataIndex: 'name'},
...{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}
],height:350,
width:620,
title:'Array Grid',
renderTo: 'Div_GridPanel'
});
Ext.data.SimpleStore
從數組對象更方便的創建Store對象,
例
var store=new Ext.data.JsonStore(...{
data:[
[1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist']
],
autoLoad:true,
fields:[...{name: 'name', mapping: 1},...{name:'occupation',mapping:2}]
})
var grid = new Ext.grid.GridPanel(...{
ds: store,
columns: [
...{header: "name", width: 200, sortable: true,dataIndex: 'name'},
...{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}
],height:350,
width:620,
renderTo: 'Div_GridPanel'
});
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/30/1909395.aspx
Ext.data.Store
store是一個爲Ext器件提供record對象的存儲容器,行爲和屬性都很象數據表
方法:不列舉繼承來的方法
Store( Object config )
構造,config定義爲{
autoLoad : Boolean/Object, //自動載入
baseParams : Object, //只有使用httpproxy時纔有意義
data : Array, //數據
proxy : Ext.data.DataProxy,//數據代理
pruneModifiedRecords : boolean,//清除修改信息
reader : Ext.data.Reader, //數據讀取器
remoteSort : boolean, //遠程排序?
sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}這樣的排序對象
url : String, //利用url構造HttpProxy
}
add( Ext.data.Record[] records ) : void
增加記錄records 到store
addSorted( Ext.data.Record record ) : void
增加record到store並排序(僅本地排序時有用)
clearFilter( Boolean suppressEvent ) : void
清除過濾器
collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array
收集由dataIndex指定字段的惟一值
commitChanges() : void
提交Store所有的變更,會引發Update事件
filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void
設定過濾器
field:String //字段名
value:String //RegExp 如果是字符器,檢查field是否以value開始,如果是正則,檢查是否匹配
anyMatch:Boolean //匹配任何部分而不僅令是開始
caseSensitive:Boolean //大小寫敏感?
filterBy( Function fn, [Object scope] ) : void
更強悍的過濾方法.fn接收兩個參數record和id
find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
找到符合條件的第一條記錄,參數同filter
findBy( Function fn, [Object scope], [Number startIndex] ) : Number
參見filterBy
getAt( Number index ) : Ext.data.Record
getById( String id ) : Ext.data.Record
依充號/id得到record對象
getCount() : void
得到記錄數
getModifiedRecords() : Ext.data.Record[]
得到修改過的記錄集
getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]
得到指定範圍的記錄集合
getSortState() : void
得到排序狀態:顯然不是void而是返回一個排序對象,同sortInfo一樣的結構{field: "fieldName", direction: "ASC|DESC"}
getTotalCount() : void
這個對於翻頁信息還是很有用的
indexOf( Ext.data.Record record ) : Number
indexOfId( String id ) : Number
由記錄或id得到序號
insert( Number index, Ext.data.Record[] records ) : void
在指定的位置插入記錄,並引發add事件
isFiltered() : Boolean
當前設置了過濾器則返回真
load( Object options ) : void
由指定的Proxy使用指定的reader讀取遠程數據
options定義爲
{
params :Object, //請求url需要附加的參數
callback :Function//回叫方法,接收三個參數
//r : Ext.data.Record[] //返回的record數組
//options: Options load方法傳入的options
//success: Boolean //成功
scope :Object, //範圍.默認是store本身
add :Boolean 追加還是更新
}
loadData( Object data, [Boolean append] ) : void
用法比load簡單一點,目的是一樣的,只是這次數據由本地讀取
query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection
queryBy( Function fn, [Object scope] ) : MixedCollection
查詢,參數和find類似,但返回所有符合條件的record,而不是第一個符合條件記錄的序號
rejectChanges() : void
放棄所有的變更
reload( [Object options] ) : void
重新載入,相當於 load(options,false),如果連options都沒有傳入,則取最後一次load時使用的參數
remove( Ext.data.Record record ) : void
移除指定記錄
removeAll() : void
移除所有記錄
setDefaultSort( String fieldName, [String dir] ) : void
設置默認排序規則
sort( String fieldName, [String dir] ) : void
排序
sum( String property, Number start, Number end ) : Number
對property字段由start開始到end求和
事件列表
add : ( Store this, Ext.data.Record[] records, Number index )
beforeload : ( Store this, Object options )
clear : ( Store this )
datachanged : ( Store this )
load : ( Store this, Ext.data.Record[] records, Object options )
loadexception : ()
metachange : ( Store this, Object meta )
remove : ( Store this, Ext.data.Record record, Number index )
update : ( Store this, Ext.data.Record record, String operation )
看名字都很簡單,參數也不復雜,略過
用例
//得到遠程json對象
//其中jsoncallback.js內容爲
//{ 'results': 2, 'rows': [
// { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
// { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
//}
//定義proxy
var proxy=new Ext.data.HttpProxy(...{url:'jsoncallback.js'});
//定義reader
var reader=new Ext.data.JsonReader(
...{
totalProperty: "results",//totalRecords屬性由json.results得到
root: "rows", //構造元數據的數組由json.rows得到
id: "id" //id由json.id得到
},[
...{name: 'name', mapping: 'name'},
...{name: 'occupation'} //如果name與mapping同名,可以省略mapping
]
)
//構建Store
var store=new Ext.data.Store(...{
proxy:proxy,
reader:reader
});
//載入
store.load();
示例2
//得到遠程xml文件
//其中xml文件內容爲
<?xml version="1.0" encoding="utf-8" ?>
<dataset>
<results>2</results>
<row>
<id>1</id>
<name>Bill</name>
<occupation>Gardener</occupation>
</row>
<row>
<id>2</id>
<name>Ben</name>
<occupation>Horticulturalist</occupation>
</row>
</dataset>
var proxy=new Ext.data.HttpProxy(...{url:'datasource.xml'});
var reader = new Ext.data.XmlReader(...{
totalRecords: "results",
record: "row",
id: "id"
}, [
...{name: 'name', mapping: 'name'},
...{name: 'occupation'}
]);
var store=new Ext.data.Store(...{
proxy:proxy,
reader:reader
});
store.load();
示例3
//從本地數組得到
var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
...{id: 0},
[
...{name: 'name', mapping: 1},
...{name: 'occupation', mapping: 2}
]);
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/30/1909074.aspx
Ext.data.DataReader
純虛類,從數據源得到結構化數據轉換爲元數據對象,對象包含Record的集合,一般用做Store對象的元數據,
具有如下格式
{
totalRecord:int,
records:Array of Ext.data.Record
}
具體使用參見三個子類
Ext.data.ArrayReader/Ext.data.JsonReader/Ext.data.XmlReader
方法
DataReader( Object meta, Object recordType )
構造
Ext.data.ArrayReader
用於讀數組到一個元數據對象
ArrayReader( Object meta, Object recordType )
構造,第一個參數是配置除了可以指示使用哪個字段做id外,不懂其它的用法,
第二個參數是recordType與record對象的create方法的參數一樣,是一樣config對象數組,具體參見
readRecords( Object o ) : Object
讀取o,返回一個元數據對象
用例示範:
//定義數組
var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
//以第一個元素做爲recordid
{id: 0},
//定義數組到record的映射關係
[
{name: 'name', mapping: 1},
{name: 'occupation', mapping: 2}
]
);
//生成元數據
var data=reader.readRecords(arr);
Ext.data.JsonReader
用於將一個json對象轉換爲元數據對象
JsonReader( Object meta, Object recordType )
JsonReader的構造參數meta可以有更多選擇,
{
id : String,
root : String,
successProperty : String,
totalProperty : String
}
都是對應json對象的屬性名
read( Object response ) : Object
從一個response對象返回,response.responseText屬性應僅含有一個json格式數據塊
readRecords( Object o ) : Object
讀取o,返回一個元數據對象
使用示例:
var json={ 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
};
var reader=new Ext.data.JsonReader(
{
totalProperty: "results",//totalRecords屬性由json.results得到
root: "rows", //構造元數據的數組由json.rows得到
id: "id" //id由json.id得到
},[
{name: 'name', mapping: 'name'},
{name: 'occupation'} //如果name與mapping同名,可以省略mapping
]
)
var data=reader.readRecords(json);
Ext.data.XmlReader
xmlreader對象當然是爲xml而準備的
構造:
XmlReader( Object meta, Mixed recordType )
meta與jsonreader類似,
meta是一個{
id : String,
record : String,
success : String,
totalRecords : String
}對象,只是這些字符串都是相對於文檔根目錄的domquery路徑
read( Object response ) : Object
readRecords( Object doc ) : Object
....
var str=["<?xml version=/"1.0/" encoding=/"utf-8/" ?>",
"<dataset>",
"<results>2</results>",
"<row>",
"<id>1</id>",
"<name>Bill</name>",
"<occupation>Gardener</occupation>",
"</row>",
"<row>",
"<id>2</id>",
"<name>Ben</name>",
"<occupation>Horticulturalist</occupation>",
"</row>",
"</dataset>"].join("");
//生成xmldocument對象
var xmlDocument;
if(Ext.isIE){
xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")
xmlDocument.async=false;
xmlDocument.resolveExternals = false;
xmlDocument.loadXML(str)
}
else{
xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");
}
//然後開始...和其它兩個reader一樣的用法,只是這兒換了一種寫法,recordtype也可以是一個record對象
var record = Ext.data.Record.create([
{name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
{name: 'occupation'} // This field will use "occupation" as the mapping.
])
var reader = new Ext.data.XmlReader({
totalRecords: "results",
record: "row", //row是節點選擇器
id: "id"
}, record);
var data=reader.readRecords(xmlDocument);
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/30/1908963.aspx
Ext.data.DataProxy
數據代理類是一個純虛類，主要用於生成Ext.data.Record對象，沒有公開的屬性和方法，只是歸定子類需要處理三個事件
beforeload : ( Object This, Object params )
load : ( Object This, Object o, Object arg )
loadexception : ( Object This, Object o, Object arg, Object e )
事實上參數也是子類自定義的
Ext.data.HttpProxy
api文檔中說httpProxy是從object繼承來的，事實上source中它和下面的Ext.data.MemoryProxy/Ext.data.ScriptTagProxy都繼承於DataProxy
HttpProxy用於遠程代理,而且服務端返回信息時必須指定Content-Type屬性爲"text/xml".
HttpProxy( Object conn )
構造一個HttpProxy對象,參數可以是一個類似於{url: 'foo.php'}這樣的json對象,也可以是一個Ext.data.Connection對象,如果參數沒有指定，將使用Ext.Ajax對象將被用於發起請求
getConnection() : Connection
得到當前連接對象
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
從配置的connection對象得到record數據塊，並激發callback
params: 發起http請求時所要傳遞到服務端的參數
DataReader: 見DataReader
callback: 回叫方法,第一個參數爲接收到的信息,第二個參數爲arg,第三個是成功標誌
scope: 範圍
arg: 這兒的參數將會傳遞給回叫函數callback
使用示例:
var proxy=new Ext.data.HttpProxy({url:'datasource.xml'});
//關於reader將會在Ext.data.DataReader中講解
var reader = new Ext.data.XmlReader({
totalRecords: "results",
record: "row",
id: "id"
}, [
{name: 'name', mapping: 'name'},
{name: 'occupation'}
]);
//定義回叫方法
var metadata;
function callback(data,arg,success){
if(success){
metadata=data;
}
}
//從connection配置的url中利用reader將返回的xml文件轉爲元數據,並傳遞給callback
proxy.load( null,reader,callback,this);
Ext.data.MemoryProxy
MemoryProxy( Object data )
構造
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
取數據，和HttpProxy類似,只是params參數沒有被使用
使用示例
var proxy=new Ext.data.MemoryProxy([ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]);
var reader = new Ext.data.ArrayReader(
{id: 0},
[
{name: 'name', mapping: 1},
{name: 'occupation', mapping: 2}
]);
var metadata;
function callback(data,arg,success){
metadata=data;
}
proxy.load( null,reader,callback,this);
Ext.data.ScriptTagProxy
這個類和HttpProxy類似，也是用於請求遠程數據,但能用於跨主域調用,如果請求時使用了callback參數
則服務端應指定Content-Type屬性爲"text/javascript"
並返回callback(jsonobject)
反之則應置Content-Type屬性爲"application/x-json"
並直接返回json對象
ScriptTagProxy( Object config )
構造,其中
config定義爲{
callbackParam : String, //回叫參數
nocache : Boolean, //是否緩存
timeout : Number, //超時
url : String //請求數據的url
}
abort() : void
放棄
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
參見HttpProxy
Ext.data.Connection
訪問指定的url,這是個異步調用類,如果想得到服務器信息,請在request參數中指定callback方法或指定偵聽者(對文件上傳無效)
Connection( Object config )
構造,config定義爲{
autoAbort : Boolean,
defaultHeaders : Object,
disableCaching : Boolean,
extraParams : Object,
method : String,
timeout : Number,
url : String
}
對象
方法:由 Observable繼承過來的方法省略
abort( [Number transactionId] ) : void
放棄請求,如果同時有多個請求發生,參數指示請求進程序號,不指定則是放棄最後一個請求
isLoading( [Number transactionId] ) : Boolean
第transactionId個請求是否完成載入,未批定指最後一個
request( [Object options] ) : Number
最實用的當然是這個方法了,返回的正是前面的兩個方法所需要的進程id
其中options定義爲{
url:string, //請求url
params:Object/String/Function, //以post方法請求時傳遞的參數
method:string , //Get/Post
callback:Function,
//回叫方法,不管是成功還是失敗都會呼叫這個方法,有三個參數,由options傳入的options參數,success:Boolean,成
功?response:Object, 含有返回數據的XMLHttpRequest對象
success:Function, //成功時回叫,第一個參數爲XMLHttpRequest對象,第二個參數傳入指定的options
failure:Function, //失敗時回叫,參數同success
scope:Object, //範圍
form:Object/String, //一個form對象或它的id,可以由此自動生成參數params
isUpload:Boolean, //文件上傳?通常可以自動檢測
headers:Object, //要自定義的請求頭信息
xmlData:Object //一個xml文檔對象,它將通過url附加參數的方式發起請求
disableCaching:Boolean //是否禁用緩存?默認爲真
}
Ext.Ajax
由Ext.data.Connection 繼承而來,方法和父類一模一樣,但使用起來更簡單一些,是一個全局惟一靜態類
示例:
Ext.Ajax.request({
url: 'foo.php',
success: someFn,
failure: otherFn,
headers: {
'my-header': 'foo'
},
params: { foo: 'bar' }
});
Ext.Ajax.request({
form: 'some-form',
params: 'foo=bar'
});
//所有的Ext.Ajax請求都會加個這個默認的頭
Ext.Ajax.defaultHeaders = {
'Powered-By': 'Ext'
};
//所有的Ext,Ajax在發起請求前都會調用showSpinner
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.data.Record
基本上可以理解爲.net中的datarow或者sql server中的一行數據，它存放了數據的定義信息和他們的值
[公有屬性]
data : Object 數據內容，一個json對象
dirty : Boolean 是否修改過
id : Object 惟一ID,默認從1000開始以1剃增
modified : Object 如果記錄沒有修改過，爲null如果修改過則存放原始值信息
[公有方法]
Record( Array data, [Object id] )
這個構造方法並不用於創建記錄對象，相反，應該使用create方法來創建record對象,參數data定義見create方法,id默認遞增起始id
beginEdit() : void
開始修改
cancelEdit() : void
放棄所做的修改,參見commit
copy( [String id] ) : Record
//創建當前record的一個克隆值,如果未指定id使用當前id+1
commit( [Boolean silent] ) : void
commit方法一般會被Store對象調用而不是recorde本身,提交自創建或最後一次修改後的所有變更,如果silent爲真將不會通知store對象
create( [Array o] ) : function
靜態構造方法 o是config數組
其中config可以含有如下屬性
{
name : String //字段名
mapping : String //用於reader時的映射關係，如果是用於jsonreader，使用相對當前記錄的javascript表達式
//,如果是用於xmlreader,則是相對於記錄的domquery表達式,對於ArrayReader,則是序號
type:String //可選值 auto /string/int/float/boolean/date,其中auto是默認值，不進行轉換
sortType : Mixed //排序類型,Ext.data.SortTypes成員之一,參見sortTypes
sortDir : String //正序倒序 ASC/DESC值之一
convert : Function //轉換函數,這個功能很有用，可自定義，接收當前value返回處理後的value
dateFormat : String //日期格式化字符串,convert:function的一個特例，使用Date.parseDate方法轉換當前日期
}
endEdit() : void
結束脩改
get( name {String} ) : Object
指定命名字段string的值
getChanges() : Object
返回修改記錄的對象
reject( [Boolean silent] ) : void
和commit相似，當然是拒絕所做的修改
set( String name, Object value ) : void
爲字段name設定新值value
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/30/1908942.aspx
EXT核心API詳解(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetrics/X
文章分類:Web前端Ext.KeyNav
Ext的keyNav類能爲Ext.Element元素提供簡單的按鍵處理方法
例:
var el=Ext.get("textarea");
new Ext.KeyNav(el, {
"left" : function(e){
alert("left key down");
},
scope : el
}
);
它的行爲與KeyMap類似，但功能比KeyMap要弱小的多，只能處理以下已定義鍵
enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end
同情一下KeyNav
方法只有三個,不用多解釋
KeyNav( Mixed el, Object config )
disable() : void
enable() : void
Ext.KeyMap類
則強悍的多,其中最重要的當然是對按鍵的定義更靈活
例:上例用KeyMap來寫可能是
var el=Ext.get("textarea");
new Ext.KeyMap(el, {
key:Ext.EventObject.LEFT,
fn: function(e){
alert("left key down");
},
scope : el
}
);
方法
KeyMap( Mixed el, Object config, [String eventName] )
構造,與KeyNav也相似，但更靈活
它是{
key: String/Array, //可以是數字，字符，也可以是Ext.EventObject.LEFT這樣的助記符,還能是他們組成的數組
shift: Boolean, //ctrl鍵按下?
ctrl: Boolean,
alt : Boolean,
fn : Function, //回叫方法
scope: Object //範圍
}這樣的對象或它們組成的數組
比如{key: 10},{key: [10,13]},{key:'/t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定義
addBinding( Object/Array config ) : void
增加新的綁定動作 config參見構造
disable() : void
enable() : void
isEnabled() : Boolean
允許，靜止和狀態查詢
on( Number/Array/Object key, Function fn, [Object scope] ) : void
只添加一個處理時addBinding的快捷方式,但個人感覺並沒有簡單到哪兒去。
Ext.util.JSON
輪到大名鼎鼎的JSON了，可惜Ext提供的JSON對象功能好弱小，只有encode主decode兩個方法
而且只能編碼String/Array/Date,至少也要搞個 xml2json/json2xml方法呀
Ext.util.Format
主要提供了一些格式化方法
capitalize( String value ) : String
首字母大寫
date( Mixed value, [String format] ) : String
格式化日期輸出,還是Date.format方法好用
dateRenderer( String format ) : Function
返回一個利用指定format格式化日期的方法
defaultValue( Mixed value, String defaultValue ) : String
如果value未定義或爲空字符串則返回defaultValue
ellipsis( String value, Number length ) : String
如果value的長度超過length的,取前length-3個並用...替代，對中國人來說還是垃圾功能，用的字符串長度不是字節長度
fileSize( Number/String size ) : String
簡單的格式化文件長度爲 xxxbytes xxxKB xxxMB,沒有GB喲
htmlEncode( String value ) : String
htmlDecode( String value ) : String
HTML編碼解碼,將& < > “替換爲&<>"
lowercase( String value ) : String
將value轉換爲全小寫
stripScripts( Mixed value ) : String
去除腳本標籤
stripTags( Mixed value ) : String
去除HTML標籤
substr( String value, Number start, Number length ) : String
取子字符串
trim( String value ) : String
去除開頭和結尾的空格
undef( Mixed value ) : Mixed
如果value未定義,返回空字符串，反之返回value本身
uppercase( String value ) : String
轉爲全大寫
usMoney( Number/String value ) : String
轉爲美元表示
Ext.util.DelayedTask
提供一個setTimeout的簡單替代方法
公開的方法也只有三個
DelayedTask( [Function fn], [Object scope], [Array args] )
delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) :
cancel() : void
簡單的示例用法如果
var task=new Ext.util.DelayedTask(Ext.emptuFn);
task.delay(1000);
task.cancel();
Ext.util.TaskRunner
增強版的DelayedTask,能提供多線程的定時服務，
例:
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
四個方法都很簡單
TaskRunner( [Number interval] )
start( [Object task] ) : Object
stop( Object task ) : Object
stopAll() : void
Ext.util.TextMetrics
這個類主要是爲了準備的得到塊狀化文本正確的高度和寬度
例:
var metrics=Ext.util.TextMetrics.createInstance('div');
metrics.setFixedWidth(100);
var size=metrics.getSize("中華人民共和國中華人民共和國中華人民共和國中華人民共和國");
Ext.MessageBox.alert("getsize",String.format("width:{0}px/theight:{1}px",size.width,size.height))
方法
bind( String/HTMLElement el ) : void
綁定到el
createInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance
爲el創建TextMetrics實例
getHeight( String text ) : Number
getSize( String text ) : Object
getWidth( String text ) : Number
得到尺寸
measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object
測算文本text在el中將要佔用的尺寸
setFixedWidth( Number width ) : void
設置指定的寬度
Ext.XTemplate
增強型模板，支持更多功能了，雖然方法不多，但用起來來還真的很麻煩，但並不建議大家學習這樣的自定義語法，不如用xslt
另外這個Xtemplate雖然命名空間在Ext之下，但源文件卻是放在util目錄中的
XTemplate( String/Array html )
XTemplate.from( String/HTMLElement el ) : Ext.XTemplate
apply() : void
applyTemplate( Object values ) : String
compile() : Function
這些方法Ext.Template中都有說明，
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/25/1901694.aspx?
Ext.Fx類
對於我這樣的懶鬼而言，Fx類是核心類庫中最激動人心的一個類，它不是最重要的，卻是最實用的一個類
定義了一些常用的特效方法,不妨自己多動手試試下面的方法，很有趣的
fadeIn( [Object options] ) : Ext.Element
漸顯 options參數有以下屬性
callback:Function 完成後的回叫方法
scope:Object 目標
easing:String 行爲方法 默認值是:easeOut,可選值在ext_base中找到,但沒有說明,以下內容從yahoo ui中找到的
easeNone:勻速
easeIn:開始慢且加速
easeOut:開始快且減速
easeBoth:開始慢且減速
easeInStrong:開始慢且加速,t的四次方
easeOutStrong:開始快且減速,t的四次方
easeBothStrong:開始慢且減速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢體會吧
afterCls:String 事件完成後元素的樣式
duration:Number 事件完成時間（以秒爲單位）
remove:Boolean 事件完成後元素銷燬?
useDisplay:Boolean 隱藏元素是否使用display或visibility屬性?
afterStyle:String/Object/Function 事件完成後應用樣式
block:Boolean 塊狀化?
concurrent:Boolean 順序還是同時執行？
stopFx ：Boolean 當前效果完成後隨合的效果是否將停止和移除
fadeOut( [Object options] ) : Ext.Element
漸隱 fadeOut和fadeIn能使用一個特別的endOpacity屬性以指示結束時的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element
邊框變亮擴展然後漸隱
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element
漸漸滑出視圖,anchor定義
tl 左上角(默認)
t 上居中
tr 右上角
l 左邊界的中央
c 居中
r 右邊界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean
指示元素是否當前有特效正在活動
hasFxBlock() : Boolean
是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element
高亮顯示當前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element
暫停
puff( [Object options] ) : Ext.Element
吹，吹，吹個大氣球，元素漸大並隱沒
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element
縮放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx()
排隊特效
shift( Object options ) : Ext.Element
位移,並可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element
slideOut( [String anchor], [Object options] ) : Ext.Element
滑入/滑出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element
停止特效
switchOff( [Object options] ) : Ext.Element
收起並隱沒
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element
異步特效
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/25/1901458.aspx
EXT核心API詳解(五)-Ext.EventManager/EventObject/CompositeElement/CompositeElementLite
文章分類:Web前端Ext.EventManager
事件管理者中的大部分方法都在Ext中有定義,主要用於事件管理
addListener( String/HTMLElement el, String eventName, Function handler,
on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) : void
onDocumentReady( Function fn, [Object scope], [boolean options] ) : void
removeListener( String/HTMLElement el, String eventName, Function fn ) :
un( String/HTMLElement el, String eventName, Function fn ) : Boolean
參見Ext
onWindowResize( Function fn, Object scope, boolean options ) : void
窗口大小變更時觸發
onTextResize( Function fn, Object scope, boolean options ) : void
活動文本尺寸變更時觸發
Ext.EventObject
這兩個類都定義在EventManager.js中，分開是爲了邏輯上更清晰吧,這個類主要用於描述事件本身，一般用做事件處理方法的參數
另外這個害定義了一些鍵值常量，比ascii碼好記
例
function handleClick(e){ // 這兒的e就是一個EventObject對象
e.preventDefault();
var target = e.getTarget();
...
}
var myDiv = Ext.get("myDiv");
myDiv.on("click", handleClick);
//or
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
getCharCode() : Number
getKey() : Number
在非webkit|khtml類型網頁中這兩個方法是一樣的，得到按鍵的值
getPageX() : Number
getPageY() : Number
getXY() : Array
得到事件座標
getRelatedTarget() : HTMLElement
得到關聯目標?我總是得到null
getTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl] ) :
如果沒有定義selector則直接返回target屬性,如果定義了selector，則利用selector尋找祖先節點
getTime() : Number
得到事件發生的時間?
getWheelDelta() : Number
應該是個過時的方法，反正在ie和火狐下都不知道做什麼用的,原意應該是得到鼠標的按鍵信息？
hasModifier() : Boolean
事件發生時是否同時按下了ctrl/alt/shift鍵之一？
preventDefault() : void
阻止瀏覽器的默認事件？
stopEvent() : void
preventDefault+stopPropagation
stopPropagation() : void
阻止事件冒泡
within( Mixed el, [Boolean related] ) : Boolean
如果事件的目標是el或者它的子節點將返回真
Ext.CompositeElement類
基礎的複合元素類,爲容器中每個元素創建一個Ext.Element對象
雖然不是繼承自Ext.Element，但事實上它幾乎支持Element類的所有方法
例:
var els = Ext.select("#some-el div.some-class", true);
els.setWidth(100);
add( String/Array els ) : CompositeElement
添加 css選擇器els匹配的元素 或 元素組成的數組 到當前對象
clear() : void
清除所有元素
contains() : Boolean
應該是contains(Mixed el):Boolean,當前複合元素中是否含有el
each( Function fn, [Object scope] ) : CompositeElement
通過el,this,index參數爲每個元素調用fn
fill( String/Array els ) : CompositeElement
clear()& add(els)
filter( String selector ) : CompositeElement
過濾
first() : Ext.Element
第一個元素
getCount() : Number
//元素的數量
indexOf() : Boolean
同contains一樣應該有個Mixed參數
item( Number index ) : Ext.Element
第index個元素
last() : Ext.Element
最後一個元素
removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement
刪除el元素
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement
替換
Ext.CompositeElementLite
由Ext.CompositeElement繼承而來，重寫了一些方法，但沒看出與父類有什麼不同
addElements /invoke /item /addListener /each /indexOf /replaceElement
Ext.DomQuery類
selector語法詳見Ext類
compile( String selector, [String type] ) : Function
編寫一個選擇器或xpath查詢到一個方法以方便重用,type取select(默認)或simple值之一
filter( Array el, String selector, Boolean nonMatches ) : Array
過濾el中的元素,保留符合selector的，如果nonMatches爲真，結果相反
is( String/HTMLElement/Array el, String selector ) : Boolean
驗證el是否匹配selector
select( String selector, [Node root] ) : Array
從root中選擇匹配selector的對象數組
selectNode( String selector, [Node root] ) : Element
返回root中第一個匹配selector的對象
selectNumber( String selector, [Node root], Number defaultValue ) : Number
返回root中第一個匹配selector的對象的節點值，轉換爲整數或浮點數
selectValue( String selector, [Node root], String defaultValue ) : void
返回root中第一個匹配selector的對象的節點值，如果爲null,用默認值defaultValue代替
Ext.DomHelper類
append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
創建一個新的DOM元素並添加到el
參數 o 是一個DOM對象或一個原始html塊
applyStyles( String/HTMLElement el, String/Object/Function styles ) : void
應用樣式styles到對象el， 樣式的對象表示方法見Ext.Element
createTemplate( Object o ) : Ext.Template
由o創建一個新的Ext.Template對象，詳見 Ext.Template
insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
創建一個新的DOM對象o並將他們挺入在el之後/之前
insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :
創建一個新的DOM元素並做爲第一個子節點添加到el (看了這個insertFirst，建議將append取一個別名insertLast:))
insertHtml( String where, HTMLElement el, String html ) : HTMLElement
where 可選值beforeBegin/afterBegin/beforeEnd/afterEnd
將html代碼插入到el附近,
markup( Object o ) : String
返回DOM對象o對應的html代碼
overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :
創建一個新的DOM元素o並用它重寫el的內容
Ext.Template類
Template類主要是功能是生產html片斷,例
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
公用方法:
Template( String/Array html )
構造一個Ext.Template對象，參數可以是字符串形式的html代碼或它們組成的數組，
Template.from( String/HTMLElement el, Object config ) : Ext.Template
能過el的value(優先)或innerHTML來構造模板
append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
這組方法提供由 value產生的html 代碼，並添加到dom 做爲el的最後一個子節點/下一個兄弟節點/前一個兄弟節點/第一個子節點
values解釋參見applyTemplate
apply() : void
applyTemplate( Object values ) : String
apply是applyTemplate的簡寫，如果參數是數字values可以是一個數組，或者一個象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}這樣的json對象
compile() : Ext.Template
編譯模板,替換掉模板中的/=>// ,/r/n|/n==>//n, '=/',主要是爲了js自己處理方便
overwrite( Mixed el, Object values, [Boolean returnElement] ) :
利用values生成html替換el的內容
set( String html, [Boolean compile] ) : Ext.Template
設置模板的html,如果compile爲真將調用compile方法
Ext.Element類
Element( String/HTMLElement element, [Boolean forceNew] )
由id或DOM節點創建Element對象
Element.fly( String/HTMLElement el, [String named] ) : Element
由id或DOM節點創建一個全局共享的活動元素,可由named命名以避免可能的衝突
Element.get( Mixed el ) : Element
由id或DOM節點或已存在的Element得到一個Ext.Element對象
addClass( String/Array className ) : Ext.Element
爲元素添加一個或多個css類名
addClassOnClick( String className ) : Ext.Element
爲點擊事件添加和移除css類
addClassOnFocus( String className ) : Ext.Element
爲得到和失去焦點添加和移除css類
addClassOnOver( String className, [Boolean preventFlicker] ) : Ext.Element
爲鼠標移入移出事件添加和移除css類(該方法未實際使用preventFlicker參數)
addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.KeyMap
爲對象添加按鍵偵聽 key由數值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}這樣的對象或他們的數組組成
addKeyMap( Object config ) : Ext.KeyMap
功能同addKeyListener,只是傳參方式不同
例:
el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el });
和
el.addKeyListener({key:"ab",ctrl:true},fn,el);
是等價的,都是在 按下ctral+a或ctrl+b後呼叫fn
addListener( String eventName, Function fn, [Object scope], [Object options] ) : void
定義事件偵聽,eventName:事件名,fn:事件處理方法,scrope:範圍,其中options的定義比較複雜,可以包含以下屬性
scope {Object} : 處理fn的範圍
delegate {String} : 一個簡單選擇器(過濾目標或尋找目標的子孫節點)
stopEvent {Boolean} : 阻止事件,等於preventDefault+stopPropagation
preventDefault {Boolean} : 阻止默認活動
stopPropagation {Boolean} : 阻止事件冒泡
normalized {Boolean} :設爲flase將允許瀏覽器事件替代Ext.EventObject
delay {Number} : 延時多少毫秒後發生
single {Boolean} : 只運行一次
buffer {Number} : 在Ext.util.DelayedTask中預定事件
當然,還可能自定義參數以傳入function
alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element
將el對齊到element,positon,指示對齊的位置,可選以下定義
tl 左上角(默認)
t 上居中
tr 右上角
l 左邊界的中央
c 居中
r 右邊界的中央
bl 左下角
b 下居中
br 右下角
position還可以使用?約束移動不能超出窗口
offsets 偏移量,以象素爲單位
animate 詳見animate定義
例:div1.alignTo('div2','c-bl?',[20,0],true);
採用默認動畫將div1的最中央對齊到div2的左下角,並右移20個象素,且不能超出窗口
anchorTo( Mixed element, String position, [Array offsets],
[Boolean/Object animate], [Boolean/Number monitorScroll], Function
callback ) : Ext.Element
功能和alignTo類似,只是當窗口重定義大小的時候也會引發重對齊事件
monitorScroll參數說明是否需要監視滾動條行爲,如果定義爲數值則是定義的延時,單位爲毫秒,默認是50ms,
callback定義了animate完成後的回叫方法
animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element
執行動畫.
args:目標
duration:時間間隔.默認是0.35
Function:完成後的回叫方法
easing:行爲方法 默認值是:easeOut,可選值在ext_base中找到,但沒有說明,以下內容從yahoo ui中找到的
easeNone:勻速
easeIn:開始慢且加速
easeOut:開始快且減速
easeBoth:開始慢且減速
easeInStrong:開始慢且加速,t的四次方
easeOutStrong:開始快且減速,t的四次方
easeBothStrong:開始慢且減速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢體會吧
animType:定義動畫類型,默認值run 可選值:color/motion/scroll
appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element
添加子元素el(el須已存在)
appendTo( Mixed el ) : Ext.Element
將當前元素添加到el
applyStyles( String/Object/Function styles ) : Ext.Element
應用樣式,styles是"width:100px"這樣的字符串或{width:"100px"}這樣的對象,function是指返回這樣的字串和對象的函數,這是一個沒有用的批示,因爲任何傳參的地方都可以是返回要求類型的function.另見setStyle
autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element
自適應高度,參數都是老相識了,惟一需要注意的是這個方法使用了setTimeout,高度不會馬上變更
blur() : Ext.Element
失去焦點,忽略所有的異常
boxWrap( [String class] ) : Ext.Element
用一個指定樣式class的div將當前元素包含起來,class默認值爲x-box
center( [Mixed centerIn] ) : void
alignTo的簡華版.相當於alignTo(centerIn || document, 'c-c'),當前元素的中心對齊到centerIn元素的中心
child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element
依selector選擇子孫節點,依returnDom不同批示返回html元素還是ext元素,未定義或false時返回Ext.Element
clean( [Boolean forceReclean] ) : void
清除無用的空白文本節點(我喜歡這個想法)
clearOpacity() : Ext.Element
清除當前元素樣式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacity
clearPositioning( [String value] ) : Ext.Element
清除定位,恢復到默認值,相當於
this.setStyle({"left": value,"right": value,"top": value,"bottom": value,"z-index": "","position" : "static"});
clip() : Ext.Element
裁剪溢出部分,用unclip()恢復
contains( HTMLElement/String el ) : Boolean
當前元素中是否存在el
createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.Element
創建一個新的子節點
config :DomHelper元素對象,如果沒有特別指明tag,將使用div做默認tag,詳情參見DomHelper,如果未定義insertBefore,則追加
createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element
創建一個代理元素
config:代理元素的類名或DomHelper config對象
renderTo:將要繪製代理元素的html element或id
matchBox:是否對齊
createShim() : Ext.Element
在當前元素之前創建一個classname爲ext-shim的iframe,有什麼用?
down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element
通過樣式選擇器selector選擇子孫節點
enableDisplayMode( [String display] ) : Ext.Element
setVisibilityMode的簡便方法
findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement
通過簡單選擇器selector尋找祖先節點 ,直到maxDepth(元素maxDepth默認爲10,也可以是指定的DOM 節點),找不到返回null
findParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement
從父元素開始使用簡單選擇器selector選擇DOM節點
first( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
得到第一個符合selector條件的子節點,跳過文本節點
focus() : Ext.Element
得到焦點
getAlignToXY( Mixed element, String position, [Array offsets] ) : Array
得到當前元素按position規則對齊到element時的XY座標值 position/offsets參數參見alignTo方法
getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array
得到當前元素錨點指定的座標值 anchor定義參見alignTo方法,默認爲c
getAttributeNS( String namespace, String name ) : String
得到使用了命名空間namespace的屬性name之值,
getBorderWidth( String side ) : Number
得到side指定的邊框之和,side可以是t, l, r, b或他們的任意組合,比如getBorderWidth("lr")就是得到左邊框和右邊框之和
getBottom( Boolean local ) : Number
得到當前元素的底部縱座標,元素縱座標+元素高度
getBox( [Boolean contentBox], [Boolean local] ) : Object
得到當前元素的box對象:{x,y,width,height}
getCenterXY() : Array
如果當前元素要居中對齊時的橫縱座標值,等價getAlignToXY(document, 'c-c')
getColor( String attr, String defaultValue, [String prefix] ) : void
得到當前元素指定attr的顏色值,如果沒指定,返回defualtValue,比較鬱悶的是明明不是void爲什麼api中批示是一個void?應該是個字符串
getComputedHeight() : Number
得到計算過的高度,得到offsetHeight或css中定義的height值之一,如果使用了padding/borders,也會計算進去
getComputedWidth() : Number
見getComputedHeight
getFrameWidth( String sides ) : Number
得到sides定義的border寬度和padding定義的寬度之和,side定義見getBorderWidth
getHeight( [Boolean contentHeight] ) : Number
返回元素的offsetHeight
getLeft( Boolean local ) : Number
得到橫座標
getMargins( [String sides] ) : Object/Number
如果沒有定義sides,則返回一個含有{left,top,width,height}對象,反之返回side指定的寬度,side定義見getBorderWidth
getOffsetsTo( Mixed element ) : Array
計算從element到當前元素的偏移量
getPadding( String side ) : Number
得到由side指定的padding之和
getPositioning() : Object
得到當前元素的位置信息 返回含以下屬性的對象{position,left,right,top,bottom,z-index}
getRegion() : Region
得到當前元素的區域信息 返回含有以下屬性的Ext.lib.Region對象{top, left, bottom, right}
getRight( Boolean local ) : Number
右邊界值
getScroll() : Object
得到一個批示滾動條位置的對象{left, top}
getSize( [Boolean contentSize] ) : Object
得到寬度和高度組成的對象信息{width,height}
getStyle( String property ) : String
得到指定的樣式值 getStyles簡化版
getStyles( String style1, String style2, String etc. ) : Object
得到由參數組成的對象
例:el.getStyles('color', 'font-size', 'width')
可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}
getTop( Boolean local ) : Number
得到頂點縱坐 標
getUpdater() : Ext.Updater
得到當前元素的Updater對象,參見Ext.Updater類
getValue( Boolean asNumber ) : String/Number
得到value屬性的值
getViewSize() : Object
得到clientHeight和clientWidth信息給成的對象{width,height}
getWidth( [Boolean contentWidth] ) : Number
..這樣的方法真多
getX() : Number
getXY() : Array
getY() : Array
得到頁面偏移量,也就是絕對座標
hasClass( String className ) : Boolean
樣式類className 存在於當前元素的dom 節點中
hide( [Boolean/Object animate] ) : Ext.Element
隱藏當前元素
hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element
設置鼠標移入移出事件
initDD( String group, Object config, Object overrides ) : Ext.dd.DD
initDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxy
initDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget
這個要放到 Ext.dd去專門搞了,用於拖曳
insertAfter( Mixed el ) : Ext.Element
insertBefore( Mixed el ) : Ext.Element
insertFirst( Mixed/Object el ) : Ext.Element
在DOM中el元素之前之後...插入當前元素
insertHtml( String where, String html, Boolean returnEl )
插入html內容 where 可選beforeBegin, afterBegin, beforeEnd, afterEnd
insertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :
插入或創建el做爲當前元素的兄弟節點,where可選before/after,默認爲before
is( String selector ) : Boolean
驗證當前節點是否匹配簡單選擇器selector
isBorderBox()
測試不同的樣式規則以決定當前元素是否使用一個有邊框的盒子
isDisplayed() : Boolean
只要不是指定display屬性none都會返回真
isMasked() : Boolean
僅有當前元素有mask並且可見時爲真,mask譯爲蒙片?就是有些輸入框沒得到值之前會有一行模糊的提示的那種東西
isScrollable() : Boolean
可以滾動?
isVisible( [Boolean deep] ) : Boolean
可見?
last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
見first
load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element
直接應用當前updater的update方法
mask( [String msg], [String msgCls] ) : Element
爲當前對象創建蒙片
move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element
相前元素相對於當前位置移動,
direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".
distance,指示要移動的距離,以像素爲單位
moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element
稱動到指定的位置
next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
下一個符合selector的兄弟節點,
on( String eventName, Function fn, [Object scope], [Object options] ) : void
詳見addListener
position( [String pos], [Number zIndex], [Number x], [Number y] ) : void
初始化當前元素的位置 pos可選擇relative/absolute/fixed
prev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
前一個符合selector的兄弟節點
query( String selector ) : Array
通過樣式選擇器選擇子節點
radioClass( String/Array className ) : Ext.Element
添加樣式或樣式數組到當前元素，並移除兄弟節點中的指定樣式
relayEvent( String eventName, Object object ) : void
將當前元素的eventName事件同時轉發給object對象
remove() : void
從當前DOM中刪除元素,並從緩存中移除
removeAllListeners() : Ext.Element
移除所有的偵聽者
removeClass( String/Array className ) : Ext.Element
移除樣式類
removeListener( String eventName, Function fn ) : Ext.Element
移除事件eventName的fn偵聽器
repaint() : Ext.Element
強制瀏覽器重繪當前元素
replace( Mixed el ) : Ext.Element
用當前元素替換el
replaceClass( String oldClassName, String newClassName ) : Ext.Element
替換樣式類
replaceWith( Mixed/Object el ) : Ext.Element
用el替換當前元素
scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean
滾動,scroll會保證元素不會越界,direction和distance參數見move
scrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element
滾動到container內的視圖
scrollTo( String side, Number value, [Boolean/Object animate] ) : Element
基本與scroll方法相同,但不保證元素不越界
select( String selector, [Boolean unique] ) :
與query不同的是,通過樣式選擇器selector,select方法會返回一個複合元素對象(CompositeElement)或CompositeElementLite,
set( Object o, [Boolean useSet] ) : Ext.Element
設置屬性，例
el.set({width:'200px',height:'200px'});
setBottom( String bottom ) : Ext.Element
setLeft( String left ) : Ext.Element
setRight( String right ) : Ext.Element
setTop( String top ) : Ext.Element
setLeftTop( String left, String top ) : Ext.Element
設置css 對象的屬性值
setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element
馬上改變當前元素的位置和尺寸
setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element
爲當前元素設置一個盒子box:{x, y, width, height},adjust指示是否馬上調整尺寸
setDisplayed( Boolean value ) : Ext.Element
設置可見性
setHeight( Number height, [Boolean/Object animate] ) : Ext.Element
setWidth( Number width, [Boolean/Object animate] ) : Ext.Element
setSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element
設置高度和寬度
setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element
設置當前元素相對於頁面的橫縱座標
setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element
設置透明度，opacity爲1完全不透明,0完全透明
setPositioning( Object posCfg ) : Ext.Element
爲當前元素指定位置信息,參數posCfg參見getPositioning說明
setRegion( Ext.lib.Region region, [Boolean/Object animate] ) : Ext.Element
爲當前元素指定區域信息 region定義 見getRegion
setStyle( String/Object property, [String value] ) : Ext.Element
設置樣式
setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element
指示是使用Element.VISIBILITY還是Element.DISPLAY屬性來定義可見性
setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element
設置可見性
setX( Number The, [Boolean/Object animate] ) : Ext.Element
setXY( Array pos, [Boolean/Object animate] ) : Ext.Element
setY( Number The, [Boolean/Object animate] ) : Ext.Element
設置當前元素相對於page的位置
show( [Boolean/Object animate] ) : Ext.Element
顯示當前元素
swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element
阻止eventName事件冒泡，並視preventDefault阻斷默認行爲
toggle( [Boolean/Object animate] ) : Ext.Element
切換元素的visibility 或display屬性,依賴於setVisibilityMode設定的
toggleClass( String className ) : Ext.Element
如果樣式名存在於當前元素對應的dom 節點，移除，反之應用
translatePoints( Number/Array x, Number y ) : Object
返回一個{left,top}結構
un( String eventName, Function fn ) : Ext.Element
解除事件偵聽，參見 removeListener
unclip() : Ext.Element
見clip;
unmask() : void
見mask;
unselectable(): Ext.Element
禁止文本選擇
up( String selector, [Number/Mixed maxDepth] ) : Ext.Element
通過樣式選擇器selector選擇祖先節點
update( String html, [Boolean loadScripts], Function callback ) : Ext.Element
利用html更新當前節點內容，loadScripts指示html中如果有script，是否需要運行,這是一個innerHTML的一個老老老問題了
wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element
用另一個元素config包含自己
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/24/1900876.aspx
Array類
indexOf( Object o ) : Number
object是否在數組中,找不到返回-1;找到返回位置
remove( Object o ) : Array
從數組中刪除指定的對象object,如果找不到object則數組無變化
Number類
constrain( Number min, Number max ) : Number
檢查數值是否介於min與max之間, 如果大於max 返回max,如果小於min返回min, 否則返回當前值
String類
escape( String string ) : String
將string中的'和/替換爲/' //
format( String string, String value1, String value2 ) : String
格式化字符串,例:
var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls,
text);// 結果 <div class="my-class">Some text</div>
leftPad( String string, Number size, [String char] ) : String
以char將string補齊爲size長度,char默認定義空格
toggle( String value, String other ) : String
交換值,如果當前值等於value,則被賦值other,反之等於value,例:
sort = sort.toggle('ASC', 'DESC');
trim() : String
去除開頭或結尾多餘的空格
Date類
Date.parseDate( String input, String format ) : Date
將字符串string依指定的格式format轉換爲時間,其中格式定義詳見format方法
例:dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d h:i:s A" );
add( String interval, Number value ) : Date
增加時間段,String interval在Data類中已定義
Date.MILLI = "ms";
Date.SECOND = "s";
Date.MINUTE = "mi";
Date.HOUR = "h";
Date.DAY = "d";
Date.MONTH = "mo";
Date.YEAR = "y";
例var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
between( Date start, Date end ) : Boolean
是否在兩個指定的時間之間
clearTime( Boolean clone ) : Date
清除時間信息,如果clone爲真,則克隆自已並返回新Date,本身的值並不改變,反之則修改自身的值
clone() : Date
克隆
format( String format ) : String
格式化時間
d 兩位數的日期 01 至 31
D 三字母的星期名 Mon 至 Sun
j 一位數的日期 1 至 31
l 完整的星期名 Sunday 至 Saturday
S 日期的英文順序刻詞尾,兩個字符 st, nd, rd or th.
w 一週中的第幾天 0 (星期天) 至 6 (星期六)
z 一年中的第幾天 0 至 364 (閏年365 )
W ISO-8601 星期數, 週一算一個星期的開始 1 至 53
F 月的完整英文名 January 至 December
m 月,以0前導 01 至 12
M 三字母的簡寫月名 Jan 至 Dec
n 月 1 至 12
t 本月有多少天 28 至 31
L 是否閏年 1/0
Y 完整的年份 例: 1999 或 2003
y 年的後兩位 例: 99 或 03
a 上午/下午小寫 am 或 pm
A 上午/下午大寫 AM 或 PM
g 小時/12小時制 1 至 12
G 小時/24小時制 0 至 23
h 小時/12小時制 01 至 12
H 小時/24小時制 00 至 23
i 分鐘 00 至 59
s 秒 00 至 59
u 毫秒 001 至 999
O 時區,與格林威治標準時間之差 例: +0200
T 時區簡寫 例: EST, MDT ...
Z 時區間距 -43200 至 50400
其中Date類內置了幾種格式
Date.patterns = {
ISO8601Long:"Y-m-d H:i:s",
ISO8601Short:"Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d//TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};
當然ISO8601Long和ISO8601Short還是非常招人喜歡的
例:
dt.format(Date.patterns.ISO8601Long);
dt.format('Y-m-d H:i:s');
getDayOfYear() : Number
一年中的第幾天,從0開始
getDaysInMonth() : Number
本月有多少天,
getElapsed( [Date date] ) : Number
當前日期對象與date之間相差的毫秒數
getFirstDateOfMonth() : Date
本月的第一天
getFirstDayOfMonth() : Number
本月第一天是星期幾
getGMTOffset() : String
時區信息(見格式定義中的'O')
getFirstDateOfMonth() : Date
本月最後一天
getFirstDayOfMonth() : Number
本月最後一天是星期幾
getSuffix() : String
日期後導符(見格式定義中的S)
getTimezone() : String
時區(見T)
getWeekOfYear() : Number
一年中的第幾周(見W)
isLeapYear() : Boolean
是否閏年
Function類
createCallback(/*args...*/) : Function
創建回叫方法
createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) :
創建委託
這兩個記法除了傳參方式不同,看不出有什麼差異都是調用method.apply,createCallback可以看作一個簡化版的createDelegate
createCallback==>return method.apply(window, args);
createDelegate==>return method.apply(obj || window, callArgs);
前者參數比較簡單,直接傳過去了,後者的規則比較複雜點,如果appendArgs爲真,args將附加在參數列表之後,如果是數值,args將在參數列表的appendargs位置插入,其它情況下原參將不起作用
例:
var fn = func1.createDelegate(scope, [arg1,arg2], true)
//fn(a,b,c) === scope.func1(a,b,c,arg1,arg2);
var fn = func1.createDelegate(scope, [arg1,arg2])
//fn(a,b,c) === scope.func1(arg1,arg2);
var fn = func1.createDelegate(scope, [arg1,arg2], 1)
//fn(a,b,c) === scope.func1(a,arg1,arg2,b,c);
var fn = func1.createCallback(arg1, arg2);
//fn() === func1(arg1, arg2)
createCallback : function(/*args...*/)
createInterceptor( Function fcn, [Object scope] ) : Function
創建阻斷方法,如果fcn返回false,原方法將不會被執行
createSequence( Function fcn, [Object scope] ) : Function
創建組合方法,執行原方法+fcn
defer( Number millis, [Object obj], [Array args], [Boolean/Number appendArgs] ):Number
定時執行，隔millis毫秒後執行原方法
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/blackant2/archive/2007/11/24/1900874.aspx?
Ext類
addBehaviors( Object obj ) : void
對選擇的元素 應用事件偵聽器,事件名以@附加在結尾,例如
addBehaviors({
// id=foo下所有的a標籤加入click事件
'#foo a@click' : function(e, t){
// do something
},
// 用,分隔多個選擇器
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
apply( Object obj, Object config, Object defaults ) : Object
從config拷貝所有的屬性到obj,如果有defaults參數,也將拷貝其屬性到obj
applyIf( Object obj, Object config ) : Object
從config拷貝所有屬性至obj(如果obj未定義相應屬性)
decode(Object obj) : String
編碼一個對象/數組或其它值爲一個json格式字符串(支持對象,數組,日期,字符串)
destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
嘗試去移除每個傳入的對象,包括DOM,事件偵聽者,並呼叫他們的destroy方法(如果存在)
each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
利用array中的每個元素迭代調用fn.直到fn返回假,調用格式fn.call(scope || array[i], array[i], i, array);
encode(String json) : Object
將一個json格式字符串反序列化爲對象
escapeRe( String str ) : String
爲字符串正則編碼將.在*+?^${}()|[]//字符前加/
extend( Object subclass, Object superclass, [Object overrides] ) : void
從superclass類繼承subclass,overrides參數是要重載的方法列表,詳見override
fly( String/HTMLElement el, [String named] ) : Element
得到全局共享的一個浮動元素el,如果有多個浮動元素可以使用命名以避免潛在的衝突
get( Mixed el ) : Element
得到一個Element對象,參數可以是id或DOM節點或已存在的Element對象
getBody() : Element
得到當前文檔的body對象
getCmp( String id ) : Component
通過id得到一個Component對象
getDoc() : Element
得到當前文檔
getDom( Mixed el ) : HTMLElement
通過id或節點或Element對象返回一個DOM節點
id( [Mixed el], [String prefix] ) : String
爲對象el生成一個惟一id,如果對象本身已有id,將不會被改變(可以使用前導符prefix)
isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
判斷值是否爲空,null, undefined或空字符串將返回真,如果allowBlank定義爲真,空字符串將不被視爲空
namespace( String namespace1, String namespace2, String etc ) : void
創建一個命名空間,例
Ext.namespace('Company', 'Company.data');
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
num( Mixed value, Number defaultValue ) : Number
將value轉爲數值,如果value不是合法的數值類型,將返回defaultValue,其實defaultValue並不一定要求是數值類型,只要你願意
onReady( Function fn, Object scope, boolean override ) : void
當文檔準備好了之後引發fn,發生在page的onload事件之前,並且圖片此時都還沒有載入,scope定義執有者,override定義scope是否有默認的選擇
override( Object origclass, Object overrides ) : void
利用overrides重寫origclass的方法,例
Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});
query( String path, [Node root] ) : Array
通過path,在root中選擇節點數組,path可以是以下四種選擇器之一
[元素選擇器] 例:
* 任意節點
E 一個E標籤元素
E F 祖先節點爲E的F節點
E > F 或 E/F 父節點爲E的F節點
E + F 前一個兄弟節點爲E的F節點
E ~ F 前面的兄弟節點中有E的F節點
[屬性選擇器] 例:
E[foo] 有foo屬性的E節點
E[foo=bar] 有foo屬性值爲bar的E節點
E[foo^=bar] foo屬性以bar開始的E節點
E[foo$=bar] foo屬性以bar結尾的E節點
E[foo*=bar] foo屬性中有bar字符串的E節點
E[foo%=2] foo屬性能被2整除的E節點
E[foo!=bar] foo屬性值不爲bar的E節點
[僞類選擇器] 例:
E:first-child E節點是父節點中第一個子節點
E:last-child E節點是父節點中最後一個子節點
E:nth-child(n) E是父節點中每n個節點
E:nth-child(odd) E是父節點中的奇數節點
E:nth-child(even) E是父節點中的偶數節點
E:only-child E是父節點中惟一的子節點
E:checked checked屬性爲真的節點
E:first 子孫節點中的第一個E節點
E:last 子孫節點中的最後一個E節點
E:nth(n) 子孫節點中的第n個E節點
E:odd E:nth-child(odd)的簡寫
E:even E:nth-child(even)的簡寫
E:contains(foo) innerHTML屬性中含有foo的E節點
E:nodeValue(foo) E節點中包含一個值爲foo的文本節點
E:not(S) 不匹配簡單選擇器S的E節點
E:has(S) 有能匹配簡單選擇器S的子節點的E節點
E:next(S) 下一個兄弟節匹配簡單選擇器S的E節點
E:prev(S) 前一個兄弟節匹配簡單選擇器S的E節點
type( Mixed object ) : String
判斷對象類型,如果不是下列值之一將返回false
[樣式選擇器] 例:
E{display=none} display屬性值爲none的E節點
E{display^=none} display屬性值以none開始的E節點
E{display$=none} display屬性值以none結束的E節點
E{display*=none} display屬性值含有none子字串的E節點
E{display%=2} display屬性值能被2整除的E節點
E{display!=none} display屬性值不等於none的E節點
select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) :CompositeElementLite/CompositeElement
在root內通過樣式選擇器或元素數組selector選擇元素或元素列表,unique指示是否只選擇惟一值
urlDecode( String string, [Boolean overwrite] ) : Object
將url格式字符串string解碼爲json對象,overwrite參數指示是否不重寫已存在的對象,例
Ext.urlDecode("foo=1&bar=2"); //返回 {foo: 1, bar: 2}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4"); //返回 {foo: 1, bar: 4}.
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); //返回 {foo: 1, bar: [2, 3, 4]}.
urlEncode( Object o ) : String
將json對象編碼爲url格式字符串,參見urlDecode
type( Mixed object ) : String
得到object類型,如果不爲以下列舉值之一則返回false
string/number/boolean/function/object/array/regexp/element/nodelist/textnode/whitespace
Ext.form中封裝了是輸入組件。input、textArea、frameSet、form等元素都被包裝起來了。我剛纔發了點時間對它的類圖分析了一下，用StartUML做了圖如下：
Ext.form中的組件太多，實在不大方便一一研究，哪來的時間。還好，有示例，照着用吧。不明白的再去看代碼、看文檔。
ExtJs對JavaScript的內建對象進行了擴展，對什麼
Object、Date、Array、Function、String的擴展，擴展方法想必諸位都爛熟於心了：用prototype的辦法。這一篇講一講
Function擴展的精妙之處，之所以突然研究這個問題，是因爲我在研究 Ext.data.Store的源代碼時，看到一行代碼：
this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
當初，我在研究Ext.js中的代碼時，對於Function的幾個擴展想不透、看不明，今日大悟。且見擴展的源代碼：
createDelegate : function(obj, args, appendArgs){
var method = this;
return function() {
var callArgs = args || arguments;
if(appendArgs === true){
callArgs = Array.prototype.slice.call(arguments, 0);
callArgs = callArgs.concat(args);
}else if(typeof appendArgs == "number"){
callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
var applyArgs = [appendArgs, 0].concat(args); // create method call params
Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
}
return method.apply(obj || window, callArgs);
};
},
createDelegate函數的作用是，爲指定函數創建一個回調函數，注意是創建一個新的函數返回，它返回的是一個新函數。我以前一直不明白，爲什麼要這麼做，就像上面紅色的那行代碼，相信大夥與我一樣，都在想，爲什麼不是寫成這樣：
this.reader.onMetaChange=this.onMetaChange;
不是應當這樣寫的嗎？如果用過dotnet，那麼委託一定是曉得了，javascript中的函數跟c#的委託一樣，有很相近的意義，爲什麼c#中能這樣寫，JavaScript中不能這樣寫呢？
一切都因爲this，this這個東西見風使舵，像上面onMetaChange這函數，實際調用時是在reader中，那麼如果
onMetaChange中使用了this關鍵字，那麼，this是指向reader的，而不是指向onMetaChange的定義環境所對應的
this。而事實上，我們往往想把這個this指向函數的定義環境，這也正是回調的最招人喜歡的地方，然而，因爲this的問題，回調就不能像上面那樣直
接賦值。還得做些手腳，得讓函數調用時scope爲當前定義環境。
改變一個函數執行的scope，熟翻JavaScript的兄弟一定曉得要用：call、apply。至此，createDelegate的產生背景、作用都作了個交代。
createDelegate(this)，調用時，一般直接傳個this就行了，當真是妙啊。事實上，我上面講的一通道理清楚了，這個函數的代碼就沒有祕密可言了。關鍵就是一個this。我現在感嘆，你對JavaScript的造詣與你對this的領悟層次成正比。
既然講了createDelegate，其他幾個擴展函數一併講了。
createCallback : function(/*args...*/){
// make args available, in function below
var args = arguments;
var method = this;
return function() {
return method.apply(window, args);
};
}
也是創建調用者的回調，不過，回調函數的scope爲window。相當於createDelegate(window)。沒什麼講的。
defer : function(millis, obj, args, appendArgs){
var fn = this.createDelegate(obj, args, appendArgs);
if(millis){
return setTimeout(fn, millis);
}
fn();
return 0;
},
此函數調用一次就讓函數延遲調用一次。對setTimeout的封裝罷了。如果沒有定義延時參數，那麼就馬上執行。這個函數也沒有技術性可言。
createSequence : function(fcn, scope){
if(typeof fcn != "function"){
return this;
}
var method = this;
return function() {
var retval = method.apply(this || window, arguments);
fcn.apply(scope || this || window, arguments);
return retval;
};
},
這個函數就有點意思了，剛開始研究ext.js的時候還沒有看明白，它的作用是在返回一個函數，此函數先調用“調用函數”，後調用傳遞進來的函數。這句話可能還沒說清，見示例如下：
function A(){alert("第一個執行！");return 1;}
function B(){alert("第二個執行！");return 2;}
function C(){alert("第三個執行！");return 3;}
var D=A.createSequence(B).createSequence(C);
var result=D();
上面代碼產生的效果是：
第一彈出框顯示：第一個執行！
第二彈出框顯示：第二個執行！
第三彈出框顯示：第三個執行！
result的值爲：3。
這下子諸位都明白了吧。用過dotnet的知道，委託變量有這種類似的功能。就是累加執行的效果。
createInterceptor : function(fcn, scope){
if(typeof fcn != "function"){
return this;
}
var method = this;
return function() {
fcn.target = this;
fcn.method = method;
if(fcn.apply(scope || this || window, arguments) === false){
return;
}
return method.apply(this || window, arguments);
};
}
這個函數也有點意思，有創意，它返回被調用函數的回調，這個回調是條件執行的，執行條件是createInterceptor傳入的那個函數返回真。示例代碼如下：
function A(){}
var B=A.createInterceptor(function(i){return i>0;});
B(1)，則A被執行，如果調用B(-1)，A則不被執行。B的作用就是如果傳入的第一個參數的值大於0時A才被執行，否則不執行。
相當於原有函數的功能不變，只是加個執行條件。這個想法着實巧妙。這一招現在想來，也可以用到c#中
Ext.TabPanel這個東西是最常用的組件之一，它繼承自Ext.Panel。看了一個下午的源代碼，對它的一些基本原理有所瞭解了。
下面要講一些問題，這些問題絕對是本人獨門祕笈，非入室弟子不傳。哈哈哈。
一、組件的組成：
因爲繼承自Ext.Panel，所以，它也是由header、tbar、body、bbar、footer這幾個部分構成，有人問：TabPanel
的面板標籤是在哪兒呢(就是你點擊換頁的東西)？它默認是放在header中的。但是，如果設置了：tabPosition的話就不一定
了，tabPosition可取兩個值：top、bottom。所以，標籤可以是放在下面，但是，Ext目前還不支技放在左邊、右邊。
那麼，不同的標籤是用什麼元素來組織的呢？用ul。一頁對應一個li。li的id的取值有規律哦，它的取值公式如
下：tabpanel.id+tabpanel.idDelimiter+面板的id。正是因爲有了這個規律，才能根據點擊的標籤而找到對應的面板。這個
問題是一大主題，在下面講。
這是面板的標籤，下面的面板呢？簡單！！！一個Ext.Panel對應一個面板，注意：這兒的面板是沒有header的，如果你想
tab.items.get(1).header，在這兒，header===undefined。爲什麼爲面板定義的title會對應到標籤中去呢？這
個是TabPanel的特意處理的。至於換頁效果是怎麼出來的？CardLayout。這下組件的大概結構都清楚了。還有不明白，自己new
Ext.TabPanel({……})一個，然後在FireBug下面去查看dom結構，就一清二楚了。
二、處理標籤的事件
爲什麼要研究這個問題？有需求的，如何在鼠標移到標籤上時就顯示對應的面板呢？默認情況下，TabPanel是不支持這個功能的，但是，這個功能有時是需要的。這兒有點小技巧。
看Ext.TabPanel源代碼中關於標籤的事件處理：
this.strip.on('mousedown', this.onStripMouseDown, this);
this.strip.on('click', this.onStripClick, this);
this.strip.on('contextmenu', this.onStripContextMenu, this);
if(this.enableTabScroll){
this.strip.on('mousewheel', this.onWheel, this);
}
這段代碼寫在initEvents函數中，先解釋一下，this.strip是指頭部放標籤的那個ul元素，相信，98%的讀者會想，要註冊事件也應
當是爲li元素註冊，怎麼會統統註冊到ul這個父容器上面呢？原理就是事件冒泡。關於事件傳遞的原理，本人在下一文中有詳細的實驗、明確的結論，不再贅
言。
ul元素捕獲了事件，怎樣在事件處理函數中得知倒底是哪個li發生了事件呢？Ext寫了個函數：findTargets。詳情請見如下代碼：
findTargets : function(e){
var item = null;
var itemEl = e.getTarget('li', this.strip);
if(itemEl){
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
if(item.disabled){
return {
close : null,
item : null,
el : null
};
}
}
return {
close : e.getTarget('.x-tab-strip-close', this.strip),
item : item,
el : itemEl
};
},
// private
onStripMouseDown : function(e){
e.preventDefault();
if(e.button != 0){
return;
}
var t = this.findTargets(e);
if(t.close){
this.remove(t.item);
return;
}
if(t.item && t.item != this.activeTab){
this.setActiveTab(t.item);
}
},
一切的關鍵就在於li元素的id的命名規則，從中取出對應的面板的id，這樣就能getComponent，從而獲得對應的面板引用，再
setActiveTab就辦成了。至於getTarget這個是EventObject中封裝的函數，作用是在事件傳播路徑上查找滿足指定選擇條件的元
素。這個函數的詳情見它的源碼。
到了這裏，之前所講的鼠標懸停問題只要依照方面方法解決就是了，切記，不要處理mouseout事件，不然，事情就麻煩了，詳情見我以前寫過的關於mouseover事件的一篇文章。
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662926.aspx
有了上一篇中所講內容，一般情況下就可以應付了，不過，JsonReader有一些細節問題，還要細究。待某家一一道來。
構造函數已講，下面依代碼順序講解了。
read : function(response){
var json = response.responseText;
var o = eval("("+json+")");
if(!o) {
throw {message: "JsonReader.read: Json object not found"};
}
return this.readRecords(o);
},
這個是整個JsonReader的關鍵所在了。君可找到Ext.data.HttpProxy中的loadResponse函數，裏面有這麼一行代碼：
result = o.reader.read(response);
可見，是proxy裏面調用reader.read方法才得以取出結果集的。這是要表明：read乃JsonReader三軍中軍之所在。
read又調用readRecords，read把json字符串轉化爲對象然後交給readRecords。這個本無不妥，但是，asp.net中，它
的結果有點曲折，結果是放在o.d中，而不能直接從o中取得。所以，事實上應當這麼寫：this.readRecords(o.d)。這就成了。繼續往下
面看：
onMetaChange : function(meta, recordType, o){
}
這個函數說是要由store實現的，現在不知道它的用處。還往下看：
simpleAccess: function(obj, subsc) {
return obj[subsc];
},
getJsonAccessor: function(){
var re = /[/[/.]/;
return function(expr) {
try {
return(re.test(expr))
? new Function("obj", "return obj." + expr)
: function(obj){
return obj[expr];
};
} catch(e){}
return Ext.emptyFn;
};
}(),
取一對象的屬性有兩種方法，前面都已提及：
一、obj.xxxx
二、obj[xxxx]
這兩種都行。但是，如果傳過來一個對象，已知其對象的引用obj，但是有的只是它的屬性名的字符串，這時就可以用第二種方法取出，但是，如屬性名中含
[]，那麼就不大方便了，又或者是屬性又帶屬性，這事也只能用第一種方法。這兩個函數正是爲事而來。且看那getJsonAccessor，着實巧妙，函
數返回一函數，這不是巧妙之處，這個我以前就見識了，關鍵在於new Function("obj","return
"obj."+expr)。多麼巧妙啊。此之中巧，不足以言語道哉。
這下面就是真正的好戲了，看一看readRecords函數。
this.jsonData = o;
if(o.metaData){
delete this.ef;
this.meta = o.metaData;
this.recordType = Ext.data.Record.create(o.metaData.fields);
this.onMetaChange(this.meta, this.recordType, o);
}
定義一個jsonData屬性以保存原始json對象。然後如果傳過的json對象中就有metaData。那麼，就用它自帶的meta來取代JsonReader構造函數中所傳入的meta。以原來自帶的爲主。這個功能方檔未曾提及，但我輩不可不察也。
var s = this.meta, Record = this.recordType,
f = Record.prototype.fields, fi = f.items, fl = f.length;
有人不理解了，爲什麼非得這樣呢？這是節省帶寬啊。如果這些東西以後多說現幾次，那麼每個用戶都要多下載一些東西，成千上萬人能節省多少啊。
if (!this.ef) {
if(s.totalProperty) {
this.getTotal = this.getJsonAccessor(s.totalProperty);
}
if(s.successProperty) {
this.getSuccess = this.getJsonAccessor(s.successProperty);
}
this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
if (s.id) {
var g = this.getJsonAccessor(s.id);
this.getId = function(rec) {
var r = g(rec);
return (r === undefined || r === "") ? null : r;
};
} else {
this.getId = function(){return null;};
}
this.ef = [];
for(var i = 0; i < fl; i++){
f = fi[i];
var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
this.ef[i] = this.getJsonAccessor(map);
}
}
因爲要根據meta.id、meta.root。這兩值都是字符串，這就要用到前面定義的getJsonAccessor函數了。這兒正是來生成幾個
取json對象中屬性的函數，如：getTotal、getSuccess、getRoot、getId、ef數組，一個ef數組就解決了屬性映射的問
題，真是漂亮。
var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
if(s.totalProperty){
var v = parseInt(this.getTotal(o), 10);
if(!isNaN(v)){
totalRecords = v;
}
}
if(s.successProperty){
var v = this.getSuccess(o);
if(v === false || v === 'false'){
success = false;
}
}
這兒是求totalRecords、success。有一事要注意：其中：
c = root.length, totalRecords = c
這上c後面要用來循環的，而totalRecords是要返回的，而後，又求了totalRecords，這個意思是：如果結果中沒有
totalProperty這一屬性，那麼就自動求取，如果存在，則以定義的totalProperty爲主，由此可見，totalProperty是可
有可無的。這個問題文檔不曾見之。諸位可無憂矣。
var records = [];
for(var i = 0; i < c; i++){
var n = root[i];
var values = {};
var id = this.getId(n);
for(var j = 0; j < fl; j++){
f = fi[j];
var v = this.ef[j](n);
values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, n);
}
var record = new Record(values, id);
record.json = n;
records[i] = record;
}
return {
success : success,
records : records,
totalRecords : totalRecords
};
這是剩餘的代碼了，由for(var i = 0; i < c;
i++)可知，循環的時候還是用root.length的。而不是totalProperty。這個要分清，事實上，totalProperty只是直接
返回罷了，未做任何改動。裏面就轉化成Record了。其中，這個ef數組用得巧妙。類型轉化用了convert。這個東西前文已講，不足道哉。
var record = new Record(values, id);
id=this.getId(n)，可見啦，id並非前文所說的主鍵，它只是一個用來做客戶端唯一編號的東西，如對此有疑，可見於Ext.data.Record類。
record.json =
n，json這個屬性我在Ext.data.Record類中並未曾得見，諸君注意了，這個東西也許會有用。另外，readRecords返回的不只是一
個records數組，而是一個json對象，包含success、records、totalRecords。
至此，JsonReader源代碼分析完畢，呵呵，因爲這個類代碼量較少，故講得詳細。
Ext.data.Store，這個東西是JavaScript版的DataTable啊。貌似其他Ajax框架都沒有這個玩意啊。可見啦，Ext是真的打算把b/s開發重新變成c/s開發啊。哈哈哈。便宜我等了。待某細研之。
Store類提供對記錄集(Record)的包裝，通過前面的研究可知，DataProxy取數據(url或數組或xml或json)，DataReader用於從不規範的數據取出並格式化指定結構的記錄集。記錄的結構由Record.create創建。
DataProxy通過對Connection的調用取得數據(Response)後，在回調中調用DataReader的read函數，從而把
response中的數據解析成記錄集，這個記錄集將再以回調參數的形式傳出來，store實現這個回調，並把裏面的Recodrd[]取出來，放到
data這個成員中。store.data是一個MixedCollection對象，MixedCollection作什麼用的前面也講過，它本質就是
一個容器，ExtJs確實很好，連容器類都寫了。
有了store.data，數據進了這兒，就好辦了，store調用MixedCollection的功能，實現了一些通用的函數，如取指定成員、查
詢、遍歷、事務等等，這些都不足道。什麼提交修改、取消修改的功能卻是根源於Record。Record類自身就封裝了這個功能，Store中只是再次封
裝罷了，這個原理也很簡單。看代碼即知。
上面講的是通用原理，是大概，下面揀緊要的代碼說一下。
它定義了構造函數，繼承自Ext.Observable。第一行代碼就是個重點：
this.data = new Ext.util.MixedCollection(false);
這是定義data，所有記錄都將保存在它裏面。
this.baseParams = {};
// private
this.paramNames = {
"start" : "start",
"limit" : "limit",
"sort" : "sort",
"dir" : "dir"
};
baseParams將在調用HttpProxy時用到，它將作爲params附加到url末尾。這個東西沒有懸念。至於
paramsNames用於保存參數名，start、limit應當用於分頁，sort、dir用於排序，不過，我看了通篇的代碼，發現，Store本身
不提供任何其他分頁、排序功能的實現，還是得依靠服務器端的。只不過，這兒提供一種統一的方式罷了。
if(config && config.data){
this.inlineData = config.data;
delete config.data;
}
意思是說，如果創建store時，設了config，且config.data存在，那麼，將直接從config.data中loadData。構造函數後面一點就有。inlineData這個屬性沒活多久就被delete了。
if(this.url && !this.proxy){
this.proxy = new Ext.data.HttpProxy({url: this.url});
}
if(this.reader){ // reader passed
if(!this.recordType){
this.recordType = this.reader.recordType;
}
if(this.reader.onMetaChange){
this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
}
}
if(this.recordType){
this.fields = this.recordType.prototype.fields;
}
就是根據config中的情況，創建成員：proxy，reader，recordType，onMetaChange。這了這四個，就好方便在下面定義的load中加載數據並完全記錄集的封裝。說出來一文不值。
this.modified = [];
這個東西用於保存那些有修改過的記錄的舊值。之所以能取消修改，正是源於此啊。
關於addEvents那個語句，就沒必要講了，大夥都懂。
if(this.proxy){
this.relayEvents(this.proxy, ["loadexception"]);
}
this.sortToggle = {};
if(this.sortInfo){
this.setDefaultSort(this.sortInfo.field, this.sortInfo.direction);
}
Ext.data.Store.superclass.constructor.call(this);
if(this.storeId || this.id){
Ext.StoreMgr.register(this);
}
if(this.inlineData){
this.loadData(this.inlineData);
delete this.inlineData;
}else if(this.autoLoad){
this.load.defer(10, this, [
typeof this.autoLoad == 'object' ?
this.autoLoad : undefined]);
}
第一個語句中主要就是一個relayEvents，意爲延遲事件，這個延遲不是時間延遲哦。它是將當前對像的某些事件處理函數作爲另一個對象的處理函
數，同者共享，事實上，它的作用就是利用另一對象的事件來觸發本對象的事件，從而引發事件處理函數的執行(說得太拗口了吧)。
那個inlineData上面講了的，現在應驗了，不多講。從這兒可以看出，如果已從config中傳過來數據，那麼以直接傳的數據爲準，如果沒有直接傳數據，而是通過url，且autoLoad爲true，這時就在構造函數中加載數據且完全數據的封裝。
重點代碼至此講了一半，另一半就是load、loadRecords了。
嘿，別看關鍵就在這兒，事實上，它的代碼很少的哦。加上註釋才219行。研究研究。
有個事要說一下：DataProxy的子類呢，都有一個load來加載數據，DataReader的子類呢，都有一個read來讀取數據。
而Ext.data.JsonReader有兩個關鍵函數：read、readRecords。好了。來研究一下。
Ext.data.JsonReader = function(meta, recordType){
meta = meta || {};
Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
這是構造函數。簡單。meta是數據格式定義，recordType是記錄類型。其中recordType可以是一個定義記錄的數組，也可以不傳，而把記錄的各個字段的定義放到meta中的fields字段中。且看它對父類構造函數的調用：
Ext.data.DataReader = function(meta, recordType){
this.meta = meta;
this.recordType = Ext.isArray(recordType) ?
Ext.data.Record.create(recordType) : recordType;
};
Ext.data.DataReader.prototype = { };
這下全明白了吧。recordType可以是記錄類型，可以是字段定義數組，還可以不傳。
所以，構造函數就是定義兩個屬性：meta、recordType。這兩東西后面有用。
這個meta、recordType組成如何？這個必須說明，不然，這個類也就沒法用了。
meta:
totalProperty json數據中，保存總記錄數的屬性
successProperty json數據中，保存是否返回成功的屬性名
root json數據中，保存記錄集的屬性的屬性名
id json數據中，記錄中主鍵所對應的列的屬性名
recordType：
這個東西，事實上要去看Ext.data.Record的create函數的文檔，我且把它翻譯一下，如下：
create( [Array o] ) : function
創建包含指定字段結構的繼承自Ext.data.Record的類。靜態方法。
參數：
o : Array
一個定義記錄結構的字段信息數組。每個數組元素包含name，其他可選的有：mapping、type。通過它們，可以讓Ext.data.Reader從一個數據對象中獲取各字段的值。每個字段定義對象都可能包含如下屬性：
name : String
在記錄中標誌一個字段的名字。它通常用於引用指定字段，例如，在定義Ext.grid.ColumnModel的dataIndex屬性時，要傳過去的。
mapping : String
當在Ext.data.Reader中創建記錄時，如何將json對象中指定屬性值映射到此字段。
type : String
字段的類型，可能值爲：
auto(默認值，沒有任何轉化)、string、int、float、boolean、date
sortType : Mixed
Ext.data.SortTypes中的一個成員。
sortDir : String
排序方式，"ASC"或者"DESC"。
convert : Function
如果要對這個字段的值進行一些物殊處理，這時需要一個能定製的回調，用它來手工處理值。它的參數如下：
v : Mixed
通過mapping映射找到的值。已從json中取出來的。
rec : Mixed
在json中的，對應於此記錄的json對象。
dateFormat : String
用於Date.parseDate函數的格式化字符串。
defaultValue : Mixed
當字段值在原數據中不存在時所取的默認值，默認爲空字符串。
用法：
var TopicRecord = Ext.data.Record.create([
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]);
var myNewRecord = new TopicRecord({
title: 'Do my job please',
author: 'noobie',
totalPosts: 1,
lastPost: new Date(),
lastPoster: 'Animal',
excerpt: 'No way dude!'
});
myStore.add(myNewRecord);
好了，這一篇差不多了，未盡內容放下一篇中了。
關於Ext.data中各個類的關係圖我在前面已經做了一個，不用多言。其實啊。關於數據的顯示，一般要經歷三個流程：DataProxy－－>DataReader－－>Store。當然，三個部分都得是具體的類，這三個是抽象類。
如果按照一般性的理解，那麼應當先從Proxy開始了。
出人意料：DataProxy的代碼就是一空架子。且看：
Ext.data.DataProxy = function(){
this.addEvents(
'beforeload',
'load'
);
Ext.data.DataProxy.superclass.constructor.call(this);
};
Ext.extend(Ext.data.DataProxy, Ext.util.Observable);
就是加兩事件，從Observable繼承了。如此而己，看代碼就看晴晰了。再看一看HttpProxy，它的代碼也就一百來行。比起其他類來說，真是小巫見大巫了。
先爲Ext.data.HttpProxy給個描述吧：從一個Ext.data.Connection中讀取數據到一個數據對象、從Ext.data.DataProxy繼承的類。這個類不能跨站出數據，記住了。
此類構函數的文檔中說：
HttpProxy( Object conn )
conn是一個connection對象或者是一個傳給Ext.Ajax.request的options。如果傳給它的是一個options，那麼，將使用Ext.Ajax.request獲取數據。
這個地方要注意一下。
下面來講一下load函數，HttpProxy的一切精髓皆在於此。HttpProxy唯一的一個公開的函數。
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
從一個配置好的Ext.data.Connection中讀取數據，它通過傳遞過來的實現自Ext.data.DataReader的對象來讀取數據放到一個Ext.data.Records中。並且，在callback中處理這個結果數據。
參數：
params : Object
用於Ext.data.connection.request的options中的params。
reader : Ext.data.DataReader
被用來轉化數據的。把數據轉化成Ext.data.Records的形式。
callback : Function
用於處理最終結果的回調，當HttpProxy取得connection中的數據，然後交給reader轉化了數據後，所得結果集就會交給callback。它的參數如下：
object result
一個記錄集對象。
object arg
就是load函數中傳過來的arg。
boolean success
是否請求數據成功。
scope : Object
用於callback的scope。
arg : Object
用於callback的arg。
本來看文檔沒看出明堂來，一結合代碼就明白了。原來callback就是用來處理數據的。如果正常的話，這個callback應當是由
store來提供吧。它實現這個接口，然後把數據從HttpProxy中接手過來。然後就後就得包裝成store了。這還只是我的猜測，具體情況就要看
store的代碼了。
現在，一切都明顯了，取數據是connection的事，不用我們費心了，轉換數據成記錄集，這個是reader的事，也不用我們費心了。HttpProxy的作用事實就是二者的外觀類。現在就要研究一下Ext.data.JsonReader了。
全 稱:Ext.Updater
命名空間:Ext
定義 於:UpdateManager.js
類 名:Updater
父 類:Observable
爲Element對象提供Ajax式的更新能力。Updater能用於更新Element一次或者使用startAutoRefresh讓Element具備定時更新的能力。
用法：
//從一個Ext.Element對象獲得Updater的引用
var el = Ext.get("foo");
var mgr = el.getUpdater();
mgr.update({
url: "http://myserver.com/index.php",
params: {
param1: "foo",
param2: "bar"
}
});
...
mgr.formUpdate("myFormId", "http://myserver.com/index.php");
//或者直接通過Updater構造函數來創建
var mgr = new Ext.Updater("myElementId");
mgr.startAutoRefresh(60, "http://myserver.com/index.php");
mgr.on("update", myFcnNeedsToKnow);
//從element對象的簡捷調用方式
Ext.get("foo").load({
url: "bar.php",
scripts: true,
params: "param1=foo¶m2=bar",
text: "Loading Foo..."
});
總結上一面共計有四種更新方法：
updater.update({……});
updater.formUpdate(formname,url);
updater.startAutoRefresh(second,url);
Element.load({……});
公共屬性：
defaultUrl : String
保存updater上一次更新時使用的url。
disableCaching : Boolean
是否在url後面上一個唯一標誌的參數(當前時間，見Ext.data.Connection),默認值爲：Ext.Updater.defaults.disableCaching.
el : Ext.Element
updater使用的element。
formUpdateDelegate : Function
相當於dotnet中的delegate。在別的地方定義，到這兒來調用。回調啦。內部使用方法如下：myUpdater.formUpdateDelegate.createCallback(arg1, arg2)
indicatorText : String
指示器文本(正在加載的時候)，默認值爲：Ext.Updater.defaults.indicatorText。
loadScripts : Boolean
輸出的時候是不是加過腳本(?)，默認值爲：Ext.Updater.defaults.loadScripts。
refreshDelegate : Function
用於refresh()內的委託，scope使用this。內部使用方法如下：myUpdater.refreshDelegate.createCallback(arg1, arg2)。
renderer : Object
Updater的呈現器(默認值爲：Ext.Updater.BasicRenderer)
showLoadIndicator : String
是否在加載過程中顯示指示器文本，默認值爲：Ext.Updater.defaults.showLoadIndicator。文檔有誤，應當是boolean類型。
sslBlankUrl : String
空頁面url，用於SSL文件上傳。默認值爲：Ext.Updater.defaults.sslBlankUrl。
timeout : Number
請求超時。單位是秒。默認值爲：Ext.Updater.defaults.timeout。
transaction : Object
當前事務對象，如果沒有當前事務則爲null。
updateDelegate : Function
用於更新(update())的委託。內部使用方式爲：myUpdater.updateDelegate.createCallback(arg1, arg2)
公共方法：
Updater( Mixed el, [Boolean forceNew] )
直接創建一個新的Updater對象。
Updater.updateElement( Mixed el, String url, [String/Object params], [Object options] ) : void
不贊成. 一個靜態方法. 反對用此函數取代el.load({url:'foo.php', ...})
用法：Ext.Updater.updateElement("my-div", "stuff.php");
abort() : void
取消當前正在執行的事務。
formUpdate( String/HTMLElement form, [String url], [Boolean reset], [Function callback] ) : void
執行一個異步form post。用返回的響應數據更新element。如果form有一個屬性：enctype="multipart/form-data"，它表示這是上傳文件，將使用this.sslBlankUrl來阻止IE安全警告。
參數：
form : String/HTMLElement
form的id或者是element。
url : String
用於form.action。即提交的網址。
reset : Boolean
是否在更新完後重置表單。
callback : Function
當事務完畢後執和，它有如下參數：
el : Ext.Element
正在執行更新的元素
success : Boolean
是否更新成功。
response : XMLHttpRequest
響應結果。。
getEl() : Ext.Element
獲得要更新的元素。
getRenderer() : void
取得當前內容呈現器。到Ext.Updater.BasicRenderer.render看更多的細節。
isAutoRefreshing() : void
是否是定時更新。。
isUpdating() : Boolean
是否處於正在更新中。
refresh( [Function callback] ) : void
用上一次更新的地址(defaultUrl)再次更新一下。如果沒有就馬上返回。
callback : Function
更新完畢後調用。
setDefaultUrl( String/Function defaultUrl ) : void
設置defaultUrl。
setRenderer( Object renderer ) : void
設置呈現器。
showLoading() : void
顯示指示器。
startAutoRefresh( Number interval, [String/Object/Function url],
[String/Object params], [Function callback], [Boolean refreshNow] ) :
void
把這個元素設置爲自動更新。通過使用stopAutoRefresh來停止自動更新。
stopAutoRefresh() : void
停止自動更新。
update( Object options ) : void
發起一次異步請求，使用請求的響應結果來更新元素內容。
注意：由於異步請求的一般是遠程主機，所以元素不會在此函數返回時更新。要處理返回的數據，請使用回調或事件。
參數：
options : Object
一個包含如下屬性的配置對象。
url : String/Function
請求所需要的url或能返回url的函數。
method : String
Post或者是GET。全爲大寫。
params : String/Object/Function
見Ext.data.Connection中的options.params的說明。
scripts : Boolean
當響應數據中包含<script>……</script>，即包含腳本或腳本引用時，是否提取並執行。爲真則執行。默
認值爲：Ext.Updater.defaults.loadScripts。如果這個屬性在options中設置了，那麼回調將在此script執行完
後再執行。
callback : Function
當響應結果已返回時調用，它有如下參數：
el : Ext.Element
正在更新的元素的引用。
success : Boolean
是否更新成功。
response : XMLHttpRequest
包含響應數據的XMLHttpRequest。
options : Object
傳給update方法的options。
scope : Object
回調使用的scope。
discardUrl : Boolean
是否拋棄當前更新的url，不保存到defaultUrls。
timeout : Number
超時設置，單位爲秒。默認值爲：Ext.Updater.defaults.timeout。
text : String
這個text與indicatorText的區別在於，請見代碼：
this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";
nocache : Boolean
用於Ext.data.Connection.disableCaching。
示例代碼：
um.update({
url: "your-url.php",
params: {param1: "foo", param2: "bar"}, // or a URL encoded string
callback: yourFunction,
scope: yourObject, //(optional scope)
discardUrl: true,
nocache: true,
text: "Loading...",
timeout: 60,
scripts: false // Save time by avoiding RegExp execution.
});
公共事件：
beforeupdate : ( Ext.Element el, String/Object/Function url, String/Object params )
在更新之前觸發。。
failure : ( Ext.Element el, Object oResponseObject )
更新失敗時觸發。
update : ( Ext.Element el, Object oResponseObject )
更新成功時觸發。