解决Ҏ(gu)Q把ext-all.css里面?x-grid3-header-offset{padding-left:1px;width:10000px;}注释掉就解决?br />
]]>
java里面旉cd转换成json数据成q样?/p>
"modifyTime":{"date":30,"day":3,"hours":15,"minutes":14,"month":3,"nanos":0,"seconds"
:38,"time":1209539678000,"timezoneOffset":-480,"year":108}
在gridpanel里面׃(x)昄成[object,object]
在store里面q样?/p>
{
name : 'createTime',
type : 'date',
mapping : 'createTime.time',
dateFormat : 'time'
}
在ColumnModel里面q样?/p>
{
header : "创徏旉",
sortable : true,
dataIndex : 'createTime',
renderer : Ext.util.Format.dateRenderer('Y-m-d H:i:s')
}
׃(x)昄成你惌的格式不用在后台处理成字W串啦?/p>
用于定义Grid的列
用例
var colModel = new Ext.grid.ColumnModel([
{header: "Ticker", width: 60, sortable: true},
{header: "Company Name", width: 150, sortable: true}
]);
回到ColumnModel,它的构造参数是一个configl成的数l?其中config定义为{
align : String //css中的寚w方式
dataIndex : String //要绑定的Store之Record字段?br /> fixed : Boolean //如果为真列宽不能被改?br /> header : String //头部昄的名U?br /> hidden : Boolean //隐藏本列
id : String //主要用于样式选择,如果已定义此属?那么列所在的单元g(x)定义class?x-grid-td-id
renderer : Function //可以使用q个构造参数格式化数据
resizable : Boolean //可调节尺?br /> sortable : Boolean // 可排?br /> width : Number //宽度
}
? 外虽然未l声?但config事实上支持editor:Ext.form.Field属?q点?x)在Ext.grid.EditorGridPanel 中看?另外Z扩展grid的表?我们通常也需要自定义?Z提一个有的?Ext.grid.RowNumberer,q是Ext为我们扩展好 的一个简单列,它的构造很?也没有其它的Ҏ(gu)和属?Ext.grid.RowNumberer({ header : String, sortable : Boolean, width : Number})如果使用?上例可改?br /> var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Ticker", width: 60, sortable: true},
{header: "Company Name", width: 150, sortable: true}
]);
属?br /> defaultSortable : Boolean //默认可排?br /> defaultWidth : Number //默认的宽?br /> setConfig : Object //q回构造时的config参数
Ҏ(gu)
ColumnModel( Object config )
构?br />
getCellEditor( Number colIndex, Number rowIndex ) : Object
得到指定行列的编辑?br /> getColumnById( String id ) : Object
得到指定id的列对象
getColumnCount() : Number
得到列数
getColumnHeader( Number col ) : String
得到列头部文?br /> getColumnId( Number index ) : String
得到列id
getColumnTooltip( Number col ) : String
得到列提C?br /> getColumnWidth( Number col ) : Number
列宽
getColumnsBy( Function fn, [Object scope] ) : Array
通过fn扑ֈ指定的列
getDataIndex( Number col ) : Number
得到指定列的数据l定对象在store中的序号
getIndexById( String id ) : Number
通过id扑ֺ?br /> getRenderer( Number col ) : Function
得到l制?br /> getTotalWidth( Boolean includeHidden ) : Number
ȝ宽度
hasListener( String eventName ) : Boolean
有事件侦听?
isCellEditable( Number colIndex, Number rowIndex ) : Boolean
指定行列可编?
isFixed() : void
应该q回Boolean,充满?
isHidden( Number colIndex ) : Boolean
指定列隐?
isResizable() : Boolean
可重写义大小
isSortable( Number col ) : Boolean
可排?
setColumnHeader( Number col, String header ) : void
讄指定列列?br /> setColumnTooltip( Number col, String tooltip ) : void
讄指定列提C?br /> setColumnWidth( Number col, Number width ) : void
讄指定列宽?br /> setConfig( Array config ) : void
重设config
setDataIndex( Number col, Number dataIndex ) : void
讄指定列的数据?br /> setEditable( Number col, Boolean editable ) : void
讄指定列是否可~辑
setEditor( Number col, Object editor ) : void
为指定列讄~辑?br /> setHidden( Number colIndex, Boolean hidden ) : void
讄指定列隐?br /> setRenderer( Number col, Function fn ) : void
为指定列讄输出Ҏ(gu)
事g
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
l承自Ext.grid.ColumnModel,专ؓ(f)Ext.grid.PropertyGrid而设?构造有点不?不过q个api文档不知道谁写的,ext2中好象没有grid?
PropertyColumnModel( Ext.grid.Grid grid, Object source )
Ext.grid.GridView
为GridPanel提供视图支持
config{
autoFill : Boolean
enableRowBody : Boolean
forceFit : Boolean
}
属?br /> columnsText : String //列文?br /> scrollOffset : Number //滚动步行
sortAscText : String //正序文本
sortClasses : Array //正序和倒序时头部列使用的样?默认为["sort-asc", "sort-desc"]
sortDescText : String //倒序文本
Ҏ(gu)
GridView( Object config )
构?br /> focusCell( Number row, Number col ) : void
指定Wrow行第col列得到焦?br /> focusRow( Number row ) : void
选中Wrow?br /> getCell( Number row, Number col ) : HtmlElement
得到指定行列的htmlelement对象
getHeaderCell( Number index ) : HtmlElement
得到指定列的表单头对?br /> getRow( Number index ) : HtmlElement
得到指定行的htmlelement对象
getRowClass( Record record, Number index, Object rowParams, Store ds ) : void
//得到指定行的样式?郁闷的是没有能在GridView.js中找到此Ҏ(gu)的定?br /> refresh( [Boolean headersToo] ) : void
涮新昄
scrollToTop() : void
滚动到头?br />
Ext.grid.GroupingView
l承自Ext.grid.GridView,用于数据分组 ,应用?br /> config{
emptyGroupText : String //I的分组昄文本
enableGroupingMenu : Boolean //允许分组菜单
enableNoGroups : Boolean //允许分组/不分l显C?br /> groupTextTpl : String //q是个模?分组的内容依此昄,语法参见模板,
hideGroupedColumn : Boolean //隐藏分组?br /> startCollapsed : Boolean //开始时收v,默认为假
}
另外虽然没有在api中说?但groupByText和showGroupsText属性也是可以在config中指定的
Ҏ(gu)
GroupingView( Object config )
构?br /> getGroupId( String value ) : void
取得指定值的分组id,为toggleGroup而准备的Ҏ(gu)
toggleAllGroups( [Boolean expanded] ) : void
收v或展开所有的分组
toggleGroup( String groupId, [Boolean expanded] ) : void
展开或收h定的分组,例grid.view.toggleGroup(grid.view.getGroupId('Horticulturalist'));?x)展开或收起分l字Dgؓ(f)'Horticulturalist'的分l?br /> Ext.onReady(function(){
//定义数组
var arr=[ ['Bill', 'Gardener'], [ 'Ben', 'Horticulturalist'],['?/span>', 'Gardener'],['?/span>', 'Gardener'],[ '?/span>', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
{},
//定义数组到record的映关p?/span>
[
{name: 'name'},
{name: 'occupation', mapping: 1}
]
);
//生成元数?/span>
var store=new Ext.data.Store({
reader:reader
});
store.loadData(arr);
//现在配置列信?nbsp;
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='列显C?隐藏';
//现在我们有一个可用的grid?别骄(jing)傲这只是W一?nbsp;
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时必L定sortInfo信息
});
gstore.loadData(arr);
//扩展一下我们的grid,让他能分l当然会(x)更酷一?nbsp;
var ggrid = new Ext.grid.GridPanel({
ds: gstore,
cm:col,
view: new Ext.grid.GroupingView({
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列显C?隐藏',
groupByText:'依本列分l?/span>',
showGroupsText:'分组昄',
groupTextTpl: '{text} ({[values.rs.length]} 条记?'
}),
frame:true,
width: 400,
height: 300,
collapsible: true,
animCollapse: false,
renderTo:Ext.getBody()
});
});
]]>
可编辑数据表?br /> Config {
clicksToEdit : Number //点几ơ开始编?默认?
}
Ҏ(gu)
EditorGridPanel()
构?应ؓ(f) EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编?br />
事g
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )
下面我们扩展一下刚才的CZ应用一下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的映关p?br /> [
...{name: 'name'},
...{name: 'occupation', mapping: 1},
...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期
...{name:'float',type:'float'},
...{name:'bool',type:'bool'}
]
);
//生成元数?br /> 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>';
}
}
//l定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
header: "布尔?,
dataIndex: 'bool'
});
/**//*
现在配置列信?Z本地化日期选择?请包含ext-lang-zh_CN.js,q修改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('Yqm月d?),//格式化显C?br /> editor:new Ext.form.DateField()
},
...{header:'数? ',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定义显C方?叛_?br /> checkColumn //q个"选择框列"看v来的漂亮些,其实是通过修改背景囄实现?br /> ]);
//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显C?隐藏';
//现在我们看看可编辑的数据表格能用了吗
var grid=new Ext.grid.EditorGridPanel(...{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});
//Z么原例不需要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
属性表?l承自EditorGridPanel,用习(fn)惯ide的用户都?x)喜Ƣ这个简单的属性表?
config{
customEditors : Object //自定义属性编辑器
source : Object //数据?br /> }
Ҏ(gu)
PropertyGrid( Object config )
构?br />
getSource() : Object
setSource( Object source ) : void
得到和设|数据源
事g
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed
同样用一个简单的CZ来完成PropertyGrid的学?br /> var grid=new Ext.grid.PropertyGrid(...{
el:Ext.getBody()
,height:200
,width:400
,viewConfig : ...{forceFit:true}
,customEditors:...{
'q龄':new Ext.grid.GridEditor(new Ext.form.NumberField())
}
,source:...{
'姓名':'blackant'
,'q龄':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();
选择模式都很Ҏ(gu)使用,略过,至于其它的扩?有时间再慢慢研究?W一步先以学?x)用?f)?/div>
]]>
Ҏ(gu)
Toolbar( Object/Array config )
构?br />
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
dExt.Toolbar.Button/SplitButton对象,其实因ؓ(f)Ext.Toolbar.Button和Ext.Button用v来没什么区?而且Toolbar两者都支持Q我实验时没发现使用上有什么不?br />
addDom( Object config ) : Ext.Toolbar.Item
dDOM节点
addElement( Mixed el ) : Ext.Toolbar.Item
dElement对象
addField( Ext.form.Field field ) : Ext.ToolbarItem
dExt.form.Field对象
addFill() : Ext.Toolbar.Fill
d一个撑满工h的空白元?br />
addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
dExt.Toolbar.Item对象
addSeparator() : Ext.Toolbar.Item
d一个分隔元?相当于addItem(new Ext.Toolbar.Separator());
addSpacer() : Ext.Toolbar.Spacer
d一个空白元?相当于addItem(new Ext.Toolbar.Spacer());
addText( String text ) : Ext.Toolbar.Item
d文本元素,相当于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
工具栏元素基c?br />
Toolbar.Item( HTMLElement el )
构?br />
destroy() : void
销?br />
disable() : void
enable() : void
可用Q禁?br />
focus() : void
得到焦点
getEl() : HTMLElement
得到当前DOM对象
setVisible( Boolean visible ) : void
show() : void
hide() : void
昄隐藏
Ext.Toolbar.Separator
l承自item,工具栏分隔符
Ext.Toolbar.Spacer
l承自item,工具栏空白元?br />
Ext.Toolbar.TextItem
l承自item,工具栏文本元?br />
Ext.Toolbar.Fill
l承自Spacer,工具栏空白元?撑满工具?br />
单的CZ
var tb = new Ext.Toolbar({width:400});
//在add之前先render,必要,不然?x)报?/在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","(zhn)点M"+item.text)
} }));tb.addSpacer();tb.addSeparator();tb.addFill();tb.add(new Ext.SplitButton({ handler: function(item){ Ext.MessageBox.alert("点击事g",String.format("(zhn)选择了{0}",item.text)); }, arrowTooltip : "更多", text:'按我', menu:new Ext.menu.Menu({ id: 'mainMenu', items: [ { text: '菜单?' }, { text: '菜单?' }] }) }));]]>
config{
allowOtherMenus : Boolean //允许同时昄其它的菜?
defaultAlign : String //默认寚w方式:tl-bl?
defaults : Object //默认的菜单项配置,会(x)应用到所有的items
items : Mixed //菜单Ҏ(gu)l?br /> minWidth : Number //最宽?默认120
shadow : Boolean/String //
subMenuAlign : String //子菜单对齐方?tl-tr?
}
Menu( Object config )
构?br />
add( Mixed args ) : Ext.menu.Item
d菜单?br /> 可能的参Cؓ(f)
* 从Ext.menu.Iteml承来的菜单对?br /> * 可以被{换ؓ(f)menu item的HTMLElement对象
* 一个Ext.menu.Item的构造config对象
*一个字W串,-或separatorؓ(f)分隔?其它的做为TextItem对象的构造参?br />
addElement( Mixed el ) : Ext.menu.Item
dElement对象
addItem( Ext.menu.Item item ) : Ext.menu.Item
dItem 对象
addMenuItem( Object config ) : Ext.menu.Item
dItem对象,q回传入的参数是item构造的config参数
addSeparator() : Ext.menu.Item
d间隔?br />
addText( String text ) : Ext.menu.Item
d文本?br />
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
U除item
removeAll() : void
U除所?br />
show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void
相对于element昄当前菜单
showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void
在绝对位|xyposition昄当前菜单
Ext.menu.BaseItem
所有菜单项的基c?l承自Component
config {
activeClass : String //z跃时的样式c?默认x-menu-item-active
canActivate : Boolean //能设|活?默认为false
handler : Function //事g处理句柄
hideDelay : Number //隔多长时间自动隐?默认100(毫秒)
hideOnClick : Boolean //点击后自动隐?默认为真
}
BaseItem( Object config )
构?br />
setHandler( Function handler, Object scope ) : void
讄处理句柄handler
事g:
activate : ( Ext.menu.BaseItem this )
click : ( Ext.menu.BaseItem this, Ext.EventObject e )
deactivate : ( Ext.menu.BaseItem this )
Ext.menu.Adapter
q个cLZ支持非BaseItem子类的容器{换ؓ(f)支持baseitem的适配?除了构?与BaseItem无异
Adapter( Ext.Component component, Object config ),可以自己再承它做点实用的事, 他的两个子类更好?br />
Ext.menu.ColorMenu
提供颜色选择
Ext.menu.DateItem
提供日期选择
Ext.menu.Item
是BaseItem的另一个实用子c?提供一般的菜单?支持菜单之间的怺关系
config{
canActivate : Boolean
href : String
hrefTarget : String
icon : String //默认Ext.BLANK_IMAGE_URL,更改,extjs.com的确太慢?br /> iconCls : String
itemCls : String
showDelay : Number
text : String
}
Ҏ(gu)
Item( Object config )
构?br />
setIconClass( String cls ) : void
setText( String text ) : void
Ext.menu.CheckItem
l承自Item,前面带有选择框的菜单?br /> config{
checked : Boolean
group : String
groupClass : String //默认x-menu-group-item
itemCls : String
}
Ҏ(gu)
CheckItem( Object config )
构?br />
checkHandler( Ext.menu.CheckItem this, Boolean checked ) : void
选择处理Ҏ(gu)
setChecked( Boolean checked, [Boolean suppressEvent] ) : void
讄选择状?br />
事g
beforecheckchange : ( Ext.menu.CheckItem this, Boolean checked )
checkchange : ( Ext.menu.CheckItem this, Boolean checked )
Ext.menu.Separator
l承自item,间隔?br />
Ext.menu.TextItem
l承自item,文本?br /> config{
hideOnClick : Boolean
itemCls : String
text : String
}
下面的示例从ext官方而来,l箋单的修改,只有menu相关部分.同样也都很简?br />
Ext.QuickTips.init();
//日期选择点M?br />
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
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();
//q个增加子菜单的Ҏ(gu)照猫画虎学的,至于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));
}
]]>
对应一个dom中的form,默认是用ajax提交?如果的确惛_?可以使用如下方式
var myForm. = new Ext.form.BasicForm("form-el-id", {
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
}
});
Ҏ(gu):
BasicForm( Mixed el, Object config )
其中config配置?br /> {
baseParams : Object, //h时的附加参数,格式为{id: '123', foo: 'bar'}
errorReader : DataReader, //提交时发生验证错?q个dataReader会(x)被?br /> fileUpload : Boolean, //支持文g上传
method : String, //GET或者POST
reader : DataReader, //load时用的数据d?br /> timeout : Number, //时旉
trackResetOnLoad : Boolean,//支持使用resetҎ(gu)恢复原始?br /> 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 Ҏ(gu)
clearInvalid() : BasicForm
清除当前basicform中所有的非法信息
doAction( String/Object actionName, [Object options] ) : BasicForm
执行预定义的动作actionName,actionNamecM"submit","load",也可以是自定义的动作的名字或一个Ext.form.Action的实?optionscM如下对象{
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是一个数l?br />
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'},...]q样格式的数l或者{id: msg, id2: msg2}格式的对?br />
remove( Field field ) : BasicForm
从basicform中移除field
render() : BasicForm
在basicForm的fields中寻?利用id属性检查他?然后用id属性呼叫applyToҎ(gu)
reset() : BasicForm
重置所有?br />
setValues( Array/Object values ) : BasicForm
讄?参见getValues
submit( Object options ) : BasicForm
提交表单
updateRecord( Record record ) : BasicForm
利用当前更新record对象,参见loadRecord
事g:
actioncomplete : ( Form. this, Action action )
actionfailed : ( Form. this, Action action )
beforeaction : ( Form. this, Action action )
Ext.form.Field
有了form之后,我们当然q需要field
Ҏ(gu):
Field( Object config )
其中config讄为{
autoCreate : String/Object, //一个{tag: "input", type: "text", size: "20", autocomplete: "off"}q样的对?或者?nbsp; 择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 //分隔W?br /> msgFx : String
msgTarget : String
name : String
readOnly : Boolean
tabIndex : Number
validateOnBlur : Boolean //true
validationDelay : Number //250
validationEvent : String/Boolean //KeyUP
value : Mixed
}
构造很ȝ(ch)?但还好我们一般不?x)直接用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
都很单也略过?br /> 事g
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
l承自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
事g
check : ( Ext.form.Checkbox this, Boolean checked )
Ext.form.Radio
l承自Ext.form.Checkbox,单选框
多了一个方?br /> getGroupValue() : String
如果单选框是一lradio 的一部分,取当前选中的?br />
Ext.form.Hidden
l承自Field,隐藏字段,无新Ҏ(gu)?br />
Ext.form.HtmlEditor
l承自Field,q个htmleditor功能太简单了,什么h能扩充一下就好了
config定义{
createLinkText : String //
defaultLinkValue : String // http://
enableAlignments : Boolean
enableColors : Boolean
enableFont : Boolean
enableFontSize : Boolean
enableFormat : Boolean
enableLinks : Boolean
enableLists : Boolean
enableSourceEdit : Boolean
fontFamilies : Array //q个当然要用汉字的字体组成的数组?br /> }
Ҏ(gu)
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 // 自动生长?,如果需??x)加宽当前input type="text"
growMax : Number
growMin : Number
maskRe : RegExp //仅允许输入与maskRe匚w的按?br /> maxLength : Number
maxLengthText : String //出最大长度时提示文本
minLength : Number
minLengthText : String //不够最长度时提示信息
regex : RegExp //正则匚w
regexText : String //提示
selectOnFocus : Boolean
validator : Function //自定义验证方?接受当前字段的?如果合法,q回?反之q回自定义信?br /> vtype : String //Ext.form.VTypes 中定义的vtypecd?支持单的cd验证
vtypeText : String//如果不是,则提C?br /> }
Ҏ(gu):
TextField( Object config )
构?br />
autoSize() : void
自动寸
reset() : void
重置
selectText( [Number start], [Number end] ) : void
选择文本
validateValue( Mixed value ) : Boolean
验证?img src ="http://www.aygfsteel.com/super2/aggbug/237578.html" width = "1" height = "1" />
]]>
l承自Ext.form.TextField,因ؓ(f)Ext.form.TextField虽然强大,但写h的确q是有点ȝ(ch),后面的类都承自Ext.form.TextField,没有自定义的Ҏ(gu),属性和事g
config定义为{
allowDecimals : Boolean //true
allowNegative : Boolean //true
baseChars : String //'0123456789'
decimalPrecision : Number //_ֺ,默认?
decimalSeparator : String //数分隔W?br /> 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时显C?
}
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
q个cd要text旁边加了个下拉按?要自己实现onTriggerClick
config{
autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"}
hideTrigger : Boolean //隐藏trigger,是双的那个下拉选择?br /> triggerClass : String
}
事g
onTriggerClick( EventObject e ) : void
Ext.form.DateField
l承自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"],不让??2006q??2003q??6
disabledDatesText : String //不让选dl个理由?br /> disabledDays : Array //不让选星期几,例[0,6],不让选周?周日
disabledDaysText : String //周日要休?q就是理?br /> format : String //昄时的格式
invalidText : String //验证非法时的提示
maxText : String
maxValue : Date/String
minText : String
minValue : Date/String
triggerClass : String
}
Ҏ(gu),除了构?多了两个思义的方?br /> 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?br /> forceSelection : Boolean
handleHeight : Number //如果resiable为真?讄
hiddenName : String
lazyInit : Boolean //除非得到焦点才开始初始化列表,默认为真
lazyRender : Boolean //除非h,才开始输?默认为假
listAlign : String //寚w方式,参见Ext.Element.alignTo,默认?tl-bl'
listClass : String
listWidth : Number
loadingText : String //仅当mode = 'remote'时调用数据时昄的文?br /> maxHeight : Number //300
minChars : Number //最输入多个字开始响?q程旉认ؓ(f)4,本地?,如果不可~辑则此值无?br /> minListWidth : Number
mode : String //可选值local/remote之一,从本地还是远E取数据
pageSize : Number //在远E模式下,如果此值大??x)在底部昄一个翻工h
queryDelay : Number //查询延时,q程默认?00,本地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转ؓ(f)combobox对象
triggerAction : String //点击按钮时的动作.默认为query
triggerClass : String
typeAhead : Boolean //false
typeAheadDelay : Number //250
valueField : String
valueNotFoundText : String //g存在时的提示信息
}
属?br /> view : Ext.DataView
Ҏ(gu)
ComboBox( Object config )
构?br />
clearValue() : void
清除所有文?值对
collapse() : void
expand() : void
收v/展开下拉列表
doQuery( String query, Boolean forceAll ) : void
执行查询
getValue() : String
选择当前字段的?br />
isExpanded() : void
下拉列表是展开?
select( Number index, Boolean scrollIntoView ) : void
选中Windex列表?br />
selectByValue( String value, Boolean scrollIntoView ) : Boolean
选中gؓ(f)value的列表项
setEditable( Boolean value ) : void
设editable属性ؓ(f)value
setValue( String value ) : void
讄当前gؓ(f)
事g
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
l承自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 q样的输入标{N有对应的c?q对有些标签做了单的扩展,当然很重要的一?漂亮多了,vtype属性也方便了处?有兴的同胞(yu)? Ext.form.VTypes和Ext.form.HtmlEditor做一些扩?br /> form中还有两个类,比如下例中的FormPanel和FieldSet,
都承自panel,所以会(x)攑֜panel中解?br />
l合CZ
Ext.QuickTips.init();
var arr=[ [1, '?拉登'], [2, 'W?拉登'],[3, 'W?拉灯'] ];
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,
,
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 : "q个字段最好不要ؓ(f)I?,
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.syncValue();
]]>
action实现一个脱M?器的事g,所有它可以在多个容器之间共?不过好象只有Ext.Toolbar, Ext.Button ? Ext.menu.Menu支持action接口:),因ؓ(f)容器要实C面所有的Ҏ(gu)setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function)
Ҏ(gu):
Action( Object config )
构?config定义为{
disabled : Boolean,//止使用
handler : Function,//事g句柄
hidden : Boolean,//隐藏
iconCls : String,//样式c?br /> scope : Object, //handler在哪个范围内执?br /> text : String //文本
}
disable() : void
enable() : void
setDisabled( Boolean disabled ) : void
止/允许
each( Function fn, Object scope ) : void
为每个实C此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配置的属性?br />
CZ:
function onItemCheck(item){
Ext.MessageBox.alert("点击事g",String.format("(zhn)选择了{0}",item.text));
}
function showMenu(obj){
Ext.MessageBox.alert("点击下拉",obj.getXTypes() )
}
Ext.MessageBox.alert("点击事g",String.format("(zhn)选择了{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'
});
var button=new Ext.SplitButton({
renderTo:Ext.getBody(),
arrowHandler : showMenu,
handler: onItemCheck,
arrowTooltip : "更多",
text:'按我',
menu:'mainMenu'
});
Ext.Button
单的按钮c?br />
公有属?
disabled : Boolean
允许?
hidden : Boolean
隐藏?
pressed : Boolean
按下?
Ҏ(gu) [l承来的忽略]
Button( Object config )
构造可选config{
clickEvent : String, //handler响应的事?默认是click
cls : String, //样式
disabled : Boolean, //止
enableToggle : Boolean,//允许在按下没按下之间切换,dU除x-btn-pressed样式c?br /> handleMouseEvents : Boolean,//允许使用UdUd按下事g,默认是真
handler : Function, //响应clickEvent定义的事?br /> hidden : Boolean, //隐藏
icon : String, //图标文g地址,如果修改x-btn-text-icon样式cd以重定义默认icon
iconCls : String, //和icon功能cM,但用设定了background-image属性的样式定义
menu : Mixed //如果需?可以为按钮定义菜?br /> menuAlign : String, //菜单寚w方式,默认值是tl-bl
minWidth : Number, //最宽?br /> pressed : Boolean, //是否按下
repeat : Boolean/Object,//是否需要重复定义鼠标按下事?也可以是一个Ext.util.ClickRepeater配置对象
scope : Object, //handler事g的范?br /> tabIndex : Number, //table键顺?br /> text : String, //文本
toggleGroup : String, //如果定义一lenableToggle为真且toggleGroup值相同的button对象,q些对象同一旉内将只有一个处于按下状?br /> tooltip : String/Object, //提示信息,可以是一个字W串或QuickTips的配|对?br /> tooltipType : String, //可选?qtip"(默认)?title"之一
type : String //可选?submit"/"reset"/"button"(默认)之一
}
focus() : void
//得到焦点
getText() : String
//取得文本
hasVisibleMenu() : Boolean
//有可视的菜单?
hideMenu() : void
//隐藏菜单
initComponent() : void
//初始化容?br /> setHandler( Function handler, [Object scope] ) : void
//讄事g处理Ҏ(gu)
setText( String text ) : void
//讄文本
showMenu() : void
//昄菜单
toggle( [Boolean state] ) : void
//切换按下状?br />
CZ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<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("点击事g",String.format("(zhn)选择了{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'
});
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 ',
enableToggle:true
});
//分组的有状态按?br />
new Ext.Button({
renderTo:Ext.getBody(),
text:'toggle button 1',
enableToggle:true,
toggleGroup:'toggleGroup',
handler: onItemCheck
});
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>
</script>
</head>
<body>
</body>
</html>
</html>
Ext.SplitButton
上例中的带菜单按钮还不专?于是有了Ext.SplitButton,专门为带有下拉菜单的按钮设计?br />
Ҏ(gu):
SplitButton( Object config )
构?config中加入了{
arrowHandler : Function,
arrowTooltip : String
}
setArrowHandler( Function handler, [Object scope] ) : void
讄下拉头的点M?br />
事g:
arrowclick : ( MenuButton this, EventObject e )
使用CZ:
比如上例中的菜单按钮可以改ؓ(f)
function onItemCheck(item){
Ext.MessageBox.alert("点击事g",String.format("(zhn)选择了{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
q是一个SplitButton的实用子c?用于在多个item之间切换状?当然它也?x)带有menu可供选择,也可以直接点?yn)L键在item之间切换
Ҏ(gu):
CycleButton( Object config )
构?config新增配置{
changeHandler : Function, //状态切换时的处理事?br /> items : Array, //items应该是menu item的数l?br /> prependText : String, //前导text
showText : Boolean, //q加item的text到按钮显C?br /> }
getActiveItem() : Ext.menu.CheckItem
setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void
得到/讄zd选项
toggleSelected() : void
切换选择?相当于点Mơ按?br />
CZ
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);
}
});
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);
}
});
]]>
增加了配|属?br /> groupField : String//用于分组的字D?br /> groupOnSort : Boolean//如果为真,依排序字段重新分组,默认为假
remoteGroup : Boolean//q程排序
当然也会(x)多一个groupҎ(gu)
groupBy( String field, [Boolean forceRegroup] ) : void
思义都是重新排序用的
下面是个单的CZ
var arr=[ [1, '?, '拉登'], [2, 'W?, '拉登'],[3, 'W?, '拉灯'] ];
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时必L定sortInfo信息
});
store.loadData(arr);
//GridPanel以后?x)讨?q儿使用它是Z直观的表现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,用法如下例所C?br /> /**//*
q是使用q程对象,q回内容与下面本地对象的data一?br /> 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
从数l对象更方便的创建Store对象,
?br /> 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'
});
]]>
l承自Observable,用于存放?wi)装的数据结?br />
Ҏ(gu)
Tree( [Node root] )
以root为根构造Ext.data.Tree对象
getNodeById( String id ) : Node
由指定id得到节点
getRootNode() : Node
得到根节?由属性root得到更方?br />
setRootNode( Node node ) : Node
讄根节?br />
事g?br /> 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
节点
属?br /> attributes : Object
节点属性集
childNodes : Array
子节?br />
firstChild : Node
W一个子节点
id : String
id
lastChild : Node
最后一个子节点
nextSibling : Node
下一个兄弟节?br />
parentNode : Node
父节?br />
previousSibling : Node
前一个兄弟节?br />
Node( Object attributes )
构造节?br />
appendChild( Node/Array node ) : Node
node做ؓ(f)附加在当前节点的lastChild之后
bubble( Function fn, [Object scope], [Array args] ) : void
由当前节点开始一直上溯到根节?对于每个节点应用fn,直到有一个fnq回假ؓ(f)?br />
cascade( Function fn, [Object scope], [Array args] ) : void
由当前节点开始一下对每个子孙节点应用fn.直到q回false为止
contains( Node node ) : Boolean
当前节点是node的祖先节?
eachChild( Function fn, [Object scope], [Array args] ) : void
基本同cascade,但只针对子节点应用fn
findChild( String attribute, Mixed value ) : Node
在子节点中找到第一个有属性attributegؓ(f)value的节?br />
findChildBy( Function fn, [Object scope] ) : Node
在子节点中找到第一个应用fnq回真的节点
getDepth() : Number
得到当前节点深度,根节Ҏ(gu)度ؓ(f)0
getOwnerTree() : Tree
得到当前节点的Tree对象
getPath( [String attr] ) : String
得到当前节点的\?默认attr为id
indexOf( Node node ) : Number
node在当前节点的子节点中的位|?br />
insertBefore( Node node, Node refNode ) : Node
在参考节点refNode之前插入node节点
isAncestor( Node node ) : Boolean
当前节点是node的祖先节?
isFirst() : Boolean
isLast() : Boolean
当前节点是父节点的第一/最后一个节?br />
isLeaf() : Boolean
是叶节点?指不含子节点
item( Number index ) : Node
Windex个子节点
removeChild( Node node ) : Node
U除node子节?br />
replaceChild( Node newChild, Node oldChild ) : Node
用newchild替换oldchild子节?br />
sort( Function fn, [Object scope] ) : void
用指定的fn排序子节?img src ="http://www.aygfsteel.com/super2/aggbug/237576.html" width = "1" height = "1" />
]]>
store是一个ؓ(f)Ext器g提供record对象的存储容?行ؓ(f)和属性都很象数据?br />
Ҏ(gu):不列丄承来的方?br /> Store( Object config )
构?config定义为{
autoLoad : Boolean/Object, //自动载入
baseParams : Object, //只有使用httpproxy时才有意?br /> data : Array, //数据
proxy : Ext.data.DataProxy,//数据代理
pruneModifiedRecords : boolean,//清除修改信息
reader : Ext.data.Reader, //数据d?br /> remoteSort : boolean, //q程排序?
sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}q样的排序对?br /> url : String, //利用url构造HttpProxy
}
add( Ext.data.Record[] records ) : void
增加记录r(sh)ecords 到store
addSorted( Ext.data.Record record ) : void
增加record到storeq排?仅本地排序时有用)
clearFilter( Boolean suppressEvent ) : void
清除qo(h)?br />
collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array
攉由dataIndex指定字段的惟一?br />
commitChanges() : void
提交Store所有的变更,?x)引发Update事g
filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void
讑֮qo(h)?br /> field:String //字段?br /> value:String //RegExp 如果是字W器,(g)查field是否以value开?如果是正?(g)查是否匹?br /> anyMatch:Boolean //匚wM部分而不仅o(h)是开?br /> caseSensitive:Boolean //大小写敏?
filterBy( Function fn, [Object scope] ) : void
更强(zhn)的qo(h)Ҏ(gu).fn接收两个参数record和id
find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
扑ֈW合条g的第一条记?参数同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
得到记录?br />
getModifiedRecords() : Ext.data.Record[]
得到修改q的记录?br />
getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]
得到指定范围的记录集?br />
getSortState() : void
得到排序状?昄不是void而是q回一个排序对?同sortInfo一L(fng)l构{field: "fieldName", direction: "ASC|DESC"}
getTotalCount() : void
q个对于页信息q是很有用的
indexOf( Ext.data.Record record ) : Number
indexOfId( String id ) : Number
p录或id得到序号
insert( Number index, Ext.data.Record[] records ) : void
在指定的位置插入记录,q引发add事g
isFiltered() : Boolean
当前讄了过滤器则返回真
load( Object options ) : void
由指定的Proxy使用指定的readerdq程数据
options定义?br /> {
params :Object, //hurl需要附加的参数
callback :Function//回叫Ҏ(gu),接收三个参数
//r : Ext.data.Record[] //q回的record数组
//options: Options loadҎ(gu)传入的options
//success: Boolean //成功
scope :Object, //范围.默认是store本n
add :Boolean q加q是更新
}
loadData( Object data, [Boolean append] ) : void
用法比load单一?目的是一L(fng),只是q次数据由本地读?br />
query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection
queryBy( Function fn, [Object scope] ) : MixedCollection
查询,参数和findcM,但返回所有符合条件的record,而不是第一个符合条件记录的序号
rejectChanges() : void
攑ּ所有的变更
reload( [Object options] ) : void
重新载入,相当?load(options,false),如果qoptions都没有传?则取最后一ơload时用的参数
remove( Ext.data.Record record ) : void
U除指定记录
removeAll() : void
U除所有记?br />
setDefaultSort( String fieldName, [String dir] ) : void
讄默认排序规则
sort( String fieldName, [String dir] ) : void
排序
sum( String property, Number start, Number end ) : Number
对property字段由start开始到end求和
事g列表
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 )
看名字都很简?参数也不复杂,略过
用例
//得到q程json对象
//其中jsoncallback.js内容?br /> //{ '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", //构造元数据的数l由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();
CZ2
//得到q程xml文g
//其中xml文g内容?br /> <?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();
CZ3
//从本地数l得?/span> 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); ]]>
U虚c?从数据源得到l构化数据{换ؓ(f)元数据对?对象包含Record的集?一般用做Store对象的元数据,
h如下格式
{
totalRecord:int,
records:Array of Ext.data.Record
}
具体使用参见三个子类
Ext.data.ArrayReader/Ext.data.JsonReader/Ext.data.XmlReader
Ҏ(gu)
DataReader( Object meta, Object recordType )
构?br />
Ext.data.ArrayReader
用于Ll到一个元数据对象
ArrayReader( Object meta, Object recordType )
构?W一个参数是配置除了可以指示使用哪个字段做id?不懂其它的用?
W二个参数是recordType与record对象的createҎ(gu)的参C?是一样config对象数组,具体参见
readRecords( Object o ) : Object
do,q回一个元数据对象
用例C:
//定义数组
var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(
//以第一个元素做为recordid
{id: 0},
//定义数组到record的映关p?br /> [
{name: 'name', mapping: 1},
{name: 'occupation', mapping: 2}
]
);
//生成元数?br /> 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对象q回,response.responseText属性应仅含有一个json格式数据?br />
readRecords( Object o ) : Object
do,q回一个元数据对象
使用CZ:
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", //构造元数据的数l由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对象当然是ؓ(f)xml而准备的
构?
XmlReader( Object meta, Mixed recordType )
meta与jsonreadercM,
meta是一个{
id : String,
record : String,
success : String,
totalRecords : String
}对象,只是q些字符串都是相对于文档根目录的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一L(fng)用法,只是q儿换了一U写?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是节炚w择?br /> id: "id"
}, record);
var data=reader.readRecords(xmlDocument);
]]>
讉K指定的url,q是个异步调用类,如果惛_到服务器信息,请在request参数中指定callbackҎ(gu)或指定侦听?Ҏ(gu)件上传无?
Connection( Object config )
构?config定义为{
autoAbort : Boolean,
defaultHeaders : Object,
disableCaching : Boolean,
extraParams : Object,
method : String,
timeout : Number,
url : String
}
对象
Ҏ(gu):?nbsp; Observablel承q来的方法省?br /> abort( [Number transactionId] ) : void
攑ּh,如果同时有多个请求发?参数指示hq程序号,不指定则是放弃最后一个请?br />
isLoading( [Number transactionId] ) : Boolean
WtransactionId个请求是否完成蝲?未批定指最后一?br />
request( [Object options] ) : Number
最实用的当然是q个Ҏ(gu)?q回的正是前面的两个Ҏ(gu)所需要的q程id
其中options定义为{
url:string, //hurl
params:Object/String/Function, //以postҎ(gu)h时传递的参数
method:string , //Get/Post
callback:Function, //回叫Ҏ(gu),不管是成功还是失败都?x)呼叫这个方?有三个参?由options传入的options参数,success:Boolean,成功? response:Object, 含有q回数据的XMLHttpRequest对象
success:Function, //成功时回?W一个参Cؓ(f)XMLHttpRequest对象,W二个参C入指定的options
failure:Function, //p|时回?参数同success
scope:Object, //范围
form.:Object/String, //一个form对象或它的id,可以由此自动生成参数params
isUpload:Boolean, //文g上传?通常可以自动(g)?br /> headers:Object, //要自定义的请求头信息
xmlData:Object //一个xml文档对象,它将通过url附加参数的方式发赯?br /> disableCaching:Boolean //是否用~存?默认为真
}
Ext.Ajax
由Ext.data.Connection l承而来,Ҏ(gu)和父cM模一?但用v来更单一?是一个全局惟一静态类
CZ:
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.Ajaxh都会(x)加个q个默认的头
Ext.Ajax.defaultHeaders = {
'Powered-By': 'Ext'
};
//所有的Ext,Ajax在发赯求前都会(x)调用showSpinner
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.data.Record
基本上可以理解ؓ(f).net中的datarow或者sql server中的一行数据，它存放了数据的定义信息和他们的?br /> [公有属性]
data : Object 数据内容Q一个json对象
dirty : Boolean 是否修改q?br /> id : Object 惟一ID,默认?000开始以1剃增
modified : Object 如果记录没有修改q，为null如果修改q则存放原始g?br /> [公有Ҏ(gu)]
Record( Array data, [Object id] )
q个构造方法ƈ不用于创录对象，相反Q应该用createҎ(gu)来创建record对象,参数data定义见createҎ(gu),id默认递增起始id
beginEdit() : void
开始修?br />
cancelEdit() : void
攑ּ所做的修改,参见commit
copy( [String id] ) : Record
//创徏当前record的一个克隆?如果未指定id使用当前id+1
commit( [Boolean silent] ) : void
commitҎ(gu)一般会(x)被Store对象调用而不是recorde本n,提交自创建或最后一ơ修改后的所有变?如果silent为真不?x)通知store对象
create( [Array o] ) : function
静态构造方?o是config数组
其中config可以含有如下属?br /> {
name : String //字段?br /> mapping : String //用于reader时的映射关系Q如果是用于jsonreaderQ用相对当前记录的javascript表达?br /> //,如果是用于xmlreader,则是相对于记录的domquery表达?对于ArrayReader,则是序号
type:String //可选?auto /string/int/float/boolean/date,其中auto是默认|不进行{?br /> sortType : Mixed //排序cd,Ext.data.SortTypes成员之一,参见sortTypes
sortDir : String //正序倒序 ASC/DESCg一
convert : Function //转换函数,q个功能很有用，可自定义Q接收当前valueq回处理后的value
dateFormat : String //日期格式化字W串,convert:function的一个特例，使用Date.parseDateҎ(gu)转换当前日期
}
endEdit() : void
l束修改
get( name {String} ) : Object
指定命名字段string的?br />
getChanges() : Object
q回修改记录的对?br />
reject( [Boolean silent] ) : void
和commit怼Q当然是拒绝所做的修改
set( String name, Object value ) : void
为字Dname讑֮新值value
]]>
数据代理cL一个纯虚类Q主要用于生成Ext.data.Record对象Q没有公开的属性和Ҏ(gu)Q只是归定子c需要处理三个事?br /> beforeload : ( Object This, Object params )
load : ( Object This, Object o, Object arg )
loadexception : ( Object This, Object o, Object arg, Object e )
事实上参C是子c自定义?br />
Ext.data.HttpProxy
api文档中说httpProxy是从objectl承来的Q事实上source中它和下面的Ext.data.MemoryProxy/Ext.data.ScriptTagProxy都承于DataProxy
HttpProxy用于q程代理,而且服务端返回信息时必须指定Content-Type属性ؓ(f)"text/xml".
HttpProxy( Object conn )
构造一个HttpProxy对象,参数可以是一个类g{url: 'foo.php'}q样的json对象,也可以是一个Ext.data.Connection对象,如果参数没有指定Q将使用Ext.Ajax对象被用于发vh
getConnection() : Connection
得到当前q接对象
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
从配|的connection对象得到record数据块，q激发callback
params: 发vhttph时所要传递到服务端的参数
DataReader: 见DataReader
callback: 回叫Ҏ(gu),W一个参Cؓ(f)接收到的信息,W二个参Cؓ(f)arg,W三个是成功标志
scope: 范围
arg: q儿的参数将?x)传递给回叫函数callback
使用CZ:
var proxy=new Ext.data.HttpProxy({url:'datasource.xml'});
//关于reader会(x)在Ext.data.DataReader中讲?br /> var reader = new Ext.data.XmlReader({
totalRecords: "results",
record: "row",
id: "id"
}, [
{name: 'name', mapping: 'name'},
{name: 'occupation'}
]);
//定义回叫Ҏ(gu)
var metadata;
function callback(data,arg,success){
if(success){
metadata=data;
}
}
//从connection配置的url中利用reader返回的xml文g转ؓ(f)元数?q传递给callback
proxy.load( null,reader,callback,this);
Ext.data.MemoryProxy
MemoryProxy( Object data )
构?br /> load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
取数据，和HttpProxycM,只是params参数没有被?br />
使用CZ
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
q个cdHttpProxycMQ也是用于请求远E数?但能用于跨主域调?如果h时用了callback参数
则服务端应指定Content-Type属性ؓ(f)"text/javascript"
q返回callback(jsonobject)
反之则应|Content-Type属性ؓ(f)"application/x-json"
q直接返回json对象
ScriptTagProxy( Object config )
构?其中
config定义为{
callbackParam : String, //回叫参数
nocache : Boolean, //是否~存
timeout : Number, //时
url : String //h数据的url
}
abort() : void
攑ּ
]]>
Ext的keyNavc能为Ext.Element元素提供单的按键处理Ҏ(gu)
?
var el=Ext.get("textarea");
new Ext.KeyNav(el, {
"left" : function(e){
alert("left key down");
},
scope : el
}
);
它的行ؓ(f)与KeyMapcMQ但功能比KeyMap要弱的多，只能处理以下已定义键
enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end
同情一下KeyNav
Ҏ(gu)只有三个,不用多解?br /> KeyNav( Mixed el, Object config )
disable() : void
enable() : void
Ext.KeyMapc?/span>
则强(zhn)的?其中最重要的当然是Ҏ(gu)键的定义更灵z?br /> ?上例用KeyMap来写可能?br /> var el=Ext.get("textarea");
new Ext.KeyMap(el, {
key:Ext.EventObject.LEFT,
fn: function(e){
alert("left key down");
},
scope : el
}
);
Ҏ(gu)
KeyMap( Mixed el, Object config, [String eventName] )
构?与KeyNav也相|但更灉|
它是{
key: String/Array, //可以是数字，字符Q也可以是Ext.EventObject.LEFTq样的助记符,q能是他们组成的数组
shift: Boolean, //ctrl键按?
ctrl: Boolean,
alt : Boolean,
fn : Function, //回叫Ҏ(gu)
scope: Object //范围
}q样的对象或它们l成的数l?br /> 比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定?br />
addBinding( Object/Array config ) : void
增加新的l定动作 config参见构?br />
disable() : void
enable() : void
isEnabled() : Boolean
允许Q静止和状态查?br />
on( Number/Array/Object key, Function fn, [Object scope] ) : void
只添加一个处理时addBinding的快h?但个人感觉ƈ没有单到哪儿厅R?br />
Ext.util.JSON
轮到大名鼎鼎的JSON了，可惜Ext提供的JSON对象功能好弱，只有encode主decode两个Ҏ(gu)
而且只能~码String/Array/Date,臛_也要搞个 xml2json/json2xmlҎ(gu)呀
Ext.util.Format
主要提供了一些格式化Ҏ(gu)
capitalize( String value ) : String
首字母大?br />
date( Mixed value, [String format] ) : String
格式化日期输?q是Date.formatҎ(gu)好用
dateRenderer( String format ) : Function
q回一个利用指定format格式化日期的Ҏ(gu)
defaultValue( Mixed value, String defaultValue ) : String
如果value未定义或为空字符串则q回defaultValue
ellipsis( String value, Number length ) : String
如果value的长度超qlength?取前length-3个ƈ?..替代Q对中国人来说还是垃圑֊能，用的字符串长度不是字节长?br />
fileSize( Number/String size ) : String
单的格式化文仉度ؓ(f) xxxbytes xxxKB xxxMB,没有GB?br />
htmlEncode( String value ) : String
htmlDecode( String value ) : String
HTML~码解码,?amp; < > “替换?amp;amp;<>"
lowercase( String value ) : String
value转换为全写
stripScripts( Mixed value ) : String
去除脚本标签
stripTags( Mixed value ) : String
去除HTML标签
substr( String value, Number start, Number length ) : String
取子字符?br />
trim( String value ) : String
去除开头和l尾的空?br />
undef( Mixed value ) : Mixed
如果value未定?q回I字W串Q反之返回value本n
uppercase( String value ) : String
转ؓ(f)全大?br />
usMoney( Number/String value ) : String
转ؓ(f)元表示
Ext.util.DelayedTask
提供一个setTimeout的简单替代方?br />
公开的方法也只有三个
DelayedTask( [Function fn], [Object scope], [Array args] )
delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) :
cancel() : void
单的CZ用法如果
var task=new Ext.util.DelayedTask(Ext.emptuFn);
task.delay(1000);
task.cancel();
Ext.util.TaskRunner
增强版的DelayedTask,能提供多U程的定时服务，
?
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);
四个Ҏ(gu)都很?br /> TaskRunner( [Number interval] )
start( [Object task] ) : Object
stop( Object task ) : Object
stopAll() : void
Ext.util.TextMetrics
q个cM要是Z准备的得到块状化文本正确的高度和宽度
?
var metrics=Ext.util.TextMetrics.createInstance('div');
metrics.setFixedWidth(100);
var size=metrics.getSize("中华人民共和国中华h民共和国中华人民共和国中华h民共和国");
Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1}px",size.width,size.height))
Ҏ(gu)
bind( String/HTMLElement el ) : void
l定到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
讄指定的宽?br />
Ext.XTemplate
增强型模板，支持更多功能了，虽然Ҏ(gu)不多Q但用v来来q真的很ȝ(ch)Q但q不大家学习(fn)q样的自定义语法Q不如用xslt
另外q个Xtemplate虽然命名I间在Ext之下Q但源文件却是放在util目录中的
XTemplate( String/Array html )
XTemplate.from( String/HTMLElement el ) : Ext.XTemplate
apply() : void
applyTemplate( Object values ) : String
compile() : Function
q些Ҏ(gu)Ext.Template中都有说明，
]]>
事g理者中的大部分Ҏ(gu)都在Ext中有定义,主要用于事g理
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
H口大小变更时触?br />
onTextResize( Function fn, Object scope, boolean options ) : void
zd文本寸变更时触?br />
Ext.EventObject
q两个类都定义在EventManager.js中，分开是ؓ(f)了逻辑上更清晰?q个cM要用于描qC件本w，一般用做事件处理方法的参数
另外q个宛_义了一些键值常量，比ascii码好?br /> ?br /> function handleClick(e){ // q儿的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|khtmlcd|页中这两个Ҏ(gu)是一L(fng)Q得到按键的?br />
getPageX() : Number
getPageY() : Number
getXY() : Array
得到事g坐标
getRelatedTarget() : HTMLElement
得到兌目标?我L得到null
getTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl] ) :
如果没有定义selector则直接返回target属?如果定义了selectorQ则利用selectorL先节点
getTime() : Number
得到事g发生的时?
getWheelDelta() : Number
应该是个q时的方法，反正在ie和火狐下都不知道做什么用?原意应该是得到鼠标的按键信息Q?br />
hasModifier() : Boolean
事g发生时是否同时按下了ctrl/alt/shift键之一Q?br />
preventDefault() : void
L览器的默认事gQ?br />
stopEvent() : void
preventDefault+stopPropagation
stopPropagation() : void
L事g冒
within( Mixed el, [Boolean related] ) : Boolean
如果事g的目标是el或者它的子节点返回真
Ext.CompositeElementc?/span>
基础的复合元素类,为容器中每个元素创徏一个Ext.Element对象
虽然不是l承自Ext.ElementQ但事实上它几乎支持Elementcȝ所有方?br /> ?
var els = Ext.select("#some-el div.some-class", true);
els.setWidth(100);
add( String/Array els ) : CompositeElement
d css选择器els匚w的元??元素l成的数l?到当前对?br />
clear() : void
清除所有元?br />
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
qo(h)
first() : Ext.Element
W一个元?br />
getCount() : Number
//元素的数?br />
indexOf() : Boolean
同contains一样应该有个Mixed参数
item( Number index ) : Ext.Element
Windex个元?br />
last() : Ext.Element
最后一个元?br />
removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement
删除el元素
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement
替换
Ext.CompositeElementLite
由Ext.CompositeElementl承而来Q重写了一些方法，但没看出与父cL什么不?br /> addElements /invoke /item /addListener /each /indexOf /replaceElement
]]>
对于我这L(fng)懒鬼而言QFxcL核心cd中最Ȁ动h心的一个类Q它不是最重要的，却是最实用的一个类
定义了一些常用的Ҏ(gu)Ҏ(gu),不妨自己多动手试试下面的Ҏ(gu)Q很有趣?br />
fadeIn( [Object options] ) : Ext.Element
渐显 options参数有以下属?br /> callback:Function 完成后的回叫Ҏ(gu)
scope:Object 目标
easing:String 行ؓ(f)Ҏ(gu) 默认值是:easeOut,可选值在ext_base中找?但没有说?以下内容从yahoo ui中找到的
easeNone:匀?br /> easeIn:开始慢且加?br /> easeOut:开始快且减?br /> easeBoth:开始慢且减?br /> easeInStrong:开始慢且加?t的四ơ方
easeOutStrong:开始快且减?t的四ơ方
easeBothStrong:开始慢且减?t的四ơ方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会(x)?br /> afterCls:String 事g完成后元素的样式
duration:Number 事g完成旉Q以Uؓ(f)单位Q?br /> remove:Boolean 事g完成后元素销?
useDisplay:Boolean 隐藏元素是否使用display或visibility属?
afterStyle:String/Object/Function 事g完成后应用样?br /> block:Boolean 块状?
concurrent:Boolean 序q是同时执行Q?br /> stopFx QBoolean 当前效果完成后随合的效果是否停止和U除
fadeOut( [Object options] ) : Ext.Element
渐隐 fadeOut和fadeIn能用一个特别的endOpacity属性以指示l束时的透明?br /> ?el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element
Ҏ(gu)变亮扩展然后渐隐
?el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element
渐渐滑出视图,anchor定义
tl 左上?默认)
t 上居?
tr 右上?br /> l 左边界的中央
c 居中
r 双界的中央
bl 左下?br /> b 下居?br /> br 右下?br /> ?
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean
指示元素是否当前有特效正在活?br />
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
吹，吹，吹个大气球，元素渐大q?br /> ?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()
排队Ҏ(gu)
shift( Object options ) : Ext.Element
位移,q可重置大小,透明度等
?
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
停止Ҏ(gu)
switchOff( [Object options] ) : Ext.Element
收vq?br /> ?
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element
异步Ҏ(gu)
]]>
selector语法详见Extc?br />
compile( String selector, [String type] ) : Function
~写一个选择器或xpath查询C个方法以方便重用,type取select(默认)或simpleg一
filter( Array el, String selector, Boolean nonMatches ) : Array
qo(h)el中的元素,保留W合selector的，如果nonMatches为真Q结果相?br />
is( String/HTMLElement/Array el, String selector ) : Boolean
验证el是否匚wselector
select( String selector, [Node root] ) : Array
从root中选择匚wselector的对象数l?br />
selectNode( String selector, [Node root] ) : Element
q回root中第一个匹配selector的对?br />
selectNumber( String selector, [Node root], Number defaultValue ) : Number
q回root中第一个匹配selector的对象的节点|转换为整数或点?br />
selectValue( String selector, [Node root], String defaultValue ) : void
q回root中第一个匹配selector的对象的节点|如果为null,用默认值defaultValue代替
Ext.DomHelperc?/span>
append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创徏一个新的DOM元素q添加到el
参数 o 是一个DOM对象或一个原始html?br />
applyStyles( String/HTMLElement el, String/Object/Function styles ) : void
应用样式styles到对象elQ?样式的对象表C方法见Ext.Element
createTemplate( Object o ) : Ext.Template
由o创徏一个新的Ext.Template对象Q详?Ext.Template
insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创徏一个新的DOM对象oq将他们挺入在el之后/之前
insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :
创徏一个新的DOM元素q做为第一个子节点d到el (看了q个insertFirstQ徏议将append取一个别名insertLast:))
insertHtml( String where, HTMLElement el, String html ) : HTMLElement
where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd
html代码插入到el附近,
markup( Object o ) : String
q回DOM对象o对应的html代码
overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :
创徏一个新的DOM元素oq用它重写el的内?
Ext.Templatec?/span>
TemplatecM要是功能是生产html片断,?br /> 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'});
公用Ҏ(gu):
Template( String/Array html )
构造一个Ext.Template对象Q参数可以是字符串Ş式的html代码或它们组成的数组Q?br />
Template.from( String/HTMLElement el, Object config ) : Ext.Template
能过el的value(优先)或innerHTML来构造模?br />
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
q组Ҏ(gu)提供?value产生的html 代码Qƈd到dom 做ؓ(f)el的最后一个子节点/下一个兄弟节?前一个兄弟节?W一个子节点
values解释参见applyTemplate
apply() : void
applyTemplate( Object values ) : String
apply是applyTemplate的简写，如果参数是数字values可以是一个数l，或者一个象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}q样的json对象
compile() : Ext.Template
~译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是ؓ(f)了js自己处理方便
overwrite( Mixed el, Object values, [Boolean returnElement] ) :
利用values生成html替换el的内?br />
set( String html, [Boolean compile] ) : Ext.Template
讄模板的html,如果compile为真调用compileҎ(gu)
]]>
object是否在数l中,找不到返?1;扑ֈq回位置
remove( Object o ) : Array
从数l中删除指定的对象object,如果找不到object则数l无变化
Numberc?br /> constrain( Number min, Number max ) : Number
(g)查数值是否介于min与max之间, 如果大于max q回max,如果于minq回min, 否则q回当前?br />
Stringc?br /> escape( String string ) : String
string中的'和\替换为\' \\
format( String string, String value1, String value2 ) : String
格式化字W串,?
var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);// l果 <div class="my-class">Some text</div>
leftPad( String string, Number size, [String char] ) : String
以charstring补齐为size长度,char默认定义I格
toggle( String value, String other ) : String
交换?如果当前值等于value,则被赋值o(j)ther,反之{于value,?
sort = sort.toggle('ASC', 'DESC');
trim() : String
去除开头或l尾多余的空?br />
Datec?br /> Date.parseDate( String input, String format ) : Date
字W串string依指定的格式format转换为时?其中格式定义详见formatҎ(gu)
?dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d h:i:s A" );
add( String interval, Number value ) : Date
增加旉D?String interval在DatacM已定?br /> 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为真,则克隆自已ƈq回新Date,本n的值ƈ不改?反之则修改自w的?br />
clone() : Date
克隆
format( String format ) : String
格式化时?br /> d 两位数的日期 01 ?31
D 三字母的星期?nbsp; Mon ?Sun
j 一位数的日?nbsp; 1 ?31
l 完整的星期名 Sunday ?Saturday
S 日期的英文顺序刻词尾,两个字符 st, nd, rd or th.
w 一周中的第几天 0 (星期? ?6 (星期?
z 一q中的第几天 0 ?364 (闰年365 )
W ISO-8601 星期? 周一一个星期的开?nbsp; 1 ?53
F 月的完整英文?nbsp; January ?December
m ??前导 01 ?12
M 三字母的写月?nbsp; Jan ?Dec
n ?nbsp; 1 ?12
t 本月有多天 28 ?31
L 是否闰年 1/0
Y 完整的年?nbsp; ? 1999 ?2003
y q的后两?nbsp; ? 99 ?03
a 上午/下午写 am ?pm
A 上午/下午大写 AM ?PM
g 时/12时?nbsp; 1 ?12
G 时/24时?nbsp; 0 ?23
h 时/12时?nbsp; 01 ?12
H 时/24时?nbsp; 00 ?23
i 分钟 00 ?59
s U?nbsp; 00 ?59
u 毫秒 001 ?999
O 时区,与格林威L准时间之?nbsp; ? +0200
T 时区?nbsp; ? EST, MDT ...
Z 时区间距 -43200 ?50400
其中Datecd|了几种格式
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和ISO8601Shortq是非常招h喜欢?br /> ?
dt.format(Date.patterns.ISO8601Long);
dt.format('Y-m-d H:i:s');
getDayOfYear() : Number
一q中的第几天,?开?br />
getDaysInMonth() : Number
本月有多天,
getElapsed( [Date date] ) : Number
当前日期对象与date之间相差的毫U数
getFirstDateOfMonth() : Date
本月的第一?br />
getFirstDayOfMonth() : Number
本月W一天是星期?br />
getGMTOffset() : String
时区信息(见格式定义中?O')
getFirstDateOfMonth() : Date
本月最后一?br />
getFirstDayOfMonth() : Number
本月最后一天是星期?br />
getSuffix() : String
日期后导W?见格式定义中的S)
getTimezone() : String
时区(见T)
getWeekOfYear() : Number
一q中的第几周(见W)
isLeapYear() : Boolean
是否闰年
Functionc?br /> createCallback(/*args...*/) : Function
创徏回叫Ҏ(gu)
createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) :
创徏委托
q两个记法除了传参方式不?看不出有什么差异都是调用method.apply,createCallback可以看作一个简化版的createDelegate
createCallback==>return method.apply(window, args);
createDelegate==>return method.apply(obj || window, callArgs);
前者参数比较简?直接传过M,后者的规则比较复杂?如果appendArgs为真,args附加在参数列表之后,如果是数?args在参数列表的appendargs位置插入,其它情况下原参将不v作用
?
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
创徏LҎ(gu),如果fcnq回false,原方法将不会(x)被执?br />
createSequence( Function fcn, [Object scope] ) : Function
创徏l合Ҏ(gu),执行原方?fcn
defer( Number millis, [Object obj], [Array args], [Boolean/Number appendArgs] ):Number
定时执行Q隔millis毫秒后执行原Ҏ(gu)
]]>
Element( String/HTMLElement element, [Boolean forceNew] )
由id或DOM节点创徏Element对象
Element.fly( String/HTMLElement el, [String named] ) : Element
由id或DOM节点创徏一个全局׃n的活动元?可由named命名以避免可能的冲突
Element.get( Mixed el ) : Element
由id或DOM节点或已存在的Element得到一个Ext.Element对象
addClass( String/Array className ) : Ext.Element
为元素添加一个或多个csscd
addClassOnClick( String className ) : Ext.Element
为点M件添加和U除cssc?br />
addClassOnFocus( String className ) : Ext.Element
为得到和失去焦点d和移除cssc?br />
addClassOnOver( String className, [Boolean preventFlicker] ) : Ext.Element
为鼠标移入移Z件添加和U除cssc?该方法未实际使用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)}q样的对象或他们的数l组?br />
addKeyMap( Object config ) : Ext.KeyMap
功能同addKeyListener,只是传参方式不同
?
el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el });
?br /> el.addKeyListener({key:"ab",ctrl:true},fn,el);
是等L(fng),都是?按下ctral+a或ctrl+b后呼叫fn
addListener( String eventName, Function fn, [Object scope], [Object options] ) : void
定义事g侦听,eventName:事g?fn:事g处理Ҏ(gu),scrope:范围,其中options的定义比较复?可以包含以下属?br /> scope {Object} : 处理fn的范?br /> delegate {String} : 一个简单选择?qo(h)目标或寻扄标的子孙节点)
stopEvent {Boolean} : L事g,{于preventDefault+stopPropagation
preventDefault {Boolean} : L默认zd
stopPropagation {Boolean} : L事g冒
normalized {Boolean} :设ؓ(f)flase允许浏览器事g替代Ext.EventObject
delay {Number} : 延时多少毫秒后发?br /> single {Boolean} : 只运行一?br /> buffer {Number} : 在Ext.util.DelayedTask中预定事?br /> 当然,q可能自定义参数以传入function
alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element
el寚w到element,positon,指示寚w的位|?可选以下定?br /> tl 左上?默认)
t 上居?
tr 右上?br /> l 左边界的中央
c 居中
r 双界的中央
bl 左下?br /> b 下居?br /> br 右下?br /> positionq可以?U束Ud不能出H口
offsets 偏移?以象素ؓ(f)单位
animate 详见animate定义
?div1.alignTo('div2','c-bl?',[20,0],true);
采用默认动画div1的最中央寚w到div2的左下角,q右U?0个象?且不能超出窗?br />
anchorTo( Mixed element, String position, [Array offsets], [Boolean/Object animate], [Boolean/Number monitorScroll], Function callback ) : Ext.Element
功能和alignTocM,只是当窗口重定义大小的时候也?x)引发重寚w事g
monitorScroll参数说明是否需要监视滚动条行ؓ(f),如果定义为数值则是定义的延时,单位为毫U?默认?0ms,
callback定义了animate完成后的回叫Ҏ(gu)
animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element
执行动画.
args:目标
duration:旉间隔.默认?.35
Function:完成后的回叫Ҏ(gu)
easing:行ؓ(f)Ҏ(gu) 默认值是:easeOut,可选值在ext_base中找?但没有说?以下内容从yahoo ui中找到的
easeNone:匀?br /> easeIn:开始慢且加?br /> easeOut:开始快且减?br /> easeBoth:开始慢且减?br /> easeInStrong:开始慢且加?t的四ơ方
easeOutStrong:开始快且减?t的四ơ方
easeBothStrong:开始慢且减?t的四ơ方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会(x)?br /> animType:定义动画cd,默认值run 可选?color/motion/scroll
appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element
d子元素el(eld存在)
appendTo( Mixed el ) : Ext.Element
当前元素添加到el
applyStyles( String/Object/Function styles ) : Ext.Element
应用样式,styles?width:100px"q样的字W串或{width:"100px"}q样的对?function是指q回q样的字串和对象的函?q是一个没有用的批C?因ؓ(f)M传参的地斚w可以是返回要求类型的function.另见setStyle
autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element
自适应高度,参数都是老相识了,惟一需要注意的是这个方法用了setTimeout,高度不会(x)马上变更
blur() : Ext.Element
失去焦点,忽略所有的异常
boxWrap( [String class] ) : Ext.Element
用一个指定样式class的div当前元素包含v?class默认gؓ(f)x-box
center( [Mixed centerIn] ) : void
alignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中?br />
child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element
依selector选择子孙节点,依returnDom不同批示q回html元素q是ext元素,未定义或false时返回Ext.Element
clean( [Boolean forceReclean] ) : void
清除无用的空白文本节?我喜Ƣ这个想?
clearOpacity() : Ext.Element
清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacity
clearPositioning( [String value] ) : Ext.Element
清除定位,恢复到默认?相当?br /> 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,则追?br />
createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element
创徏一个代理元?br /> config:代理元素的类名或DomHelper config对象
renderTo:要l制代理元素的html element或id
matchBox:是否寚w
createShim() : Ext.Element
在当前元素之前创Z个classname为ext-shim的iframe,有什么用?
down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element
通过样式选择器selector选择子孙节点
enableDisplayMode( [String display] ) : Ext.Element
setVisibilityMode的简便方?br />
findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement
通过单选择器selectorL先节点 ,直到maxDepth(元素maxDepth默认?0,也可以是指定的DOM 节点),找不到返回null
findParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement
从父元素开始用简单选择器selector选择DOM节点
first( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
得到W一个符合selector条g的子节点,跌文本节点
focus() : Ext.Element
得到焦点
getAlignToXY( Mixed element, String position, [Array offsets] ) : Array
得到当前元素按position规则寚w到element时的XY坐标?position/offsets参数参见alignToҎ(gu)
getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array
得到当前元素锚点指定的坐标?anchor定义参见alignToҎ(gu),默认为c
getAttributeNS( String namespace, String name ) : String
得到使用了命名空间namespace的属性name之?
getBorderWidth( String side ) : Number
得到side指定的边框之?side可以是t, l, r, b或他们的Ll合,比如getBorderWidth("lr")是得到左边框和双框之?br />
getBottom( Boolean local ) : Number
得到当前元素的底部纵坐标,元素U坐?元素高度
getBox( [Boolean contentBox], [Boolean local] ) : Object
得到当前元素的box对象:{x,y,width,height}
getCenterXY() : Array
如果当前元素要居中对齐时的横U坐标?{h(hun)getAlignToXY(document, 'c-c')
getColor( String attr, String defaultValue, [String prefix] ) : void
得到当前元素指定attr的颜色?如果没指?q回defualtValue,比较郁闷的是明明不是voidZ么api中批C是一个void?应该是个字符?br />
getComputedHeight() : Number
得到计算q的高度,得到offsetHeight或css中定义的heightg一,如果使用了padding/borders,也会(x)计算q去
getComputedWidth() : Number
见getComputedHeight
getFrameWidth( String sides ) : Number
得到sides定义的border宽度和padding定义的宽度之?side定义见getBorderWidth
getHeight( [Boolean contentHeight] ) : Number
q回元素的offsetHeight
getLeft( Boolean local ) : Number
得到横坐?br />
getMargins( [String sides] ) : Object/Number
如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之q回side指定的宽?side定义见getBorderWidth
getOffsetsTo( Mixed element ) : Array
计算从element到当前元素的偏移?br />
getPadding( String side ) : Number
得到由side指定的padding之和
getPositioning() : Object
得到当前元素的位|信?q回含以下属性的对象{position,left,right,top,bottom,z-index}
getRegion() : Region
得到当前元素的区域信?q回含有以下属性的Ext.lib.Region对象{top, left, bottom, right}
getRight( Boolean local ) : Number
双界?br />
getScroll() : Object
得到一个批C滚动条位置的对象{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')
可能q回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}
getTop( Boolean local ) : Number
得到点U坐 ?br />
getUpdater() : Ext.Updater
得到当前元素的Updater对象,参见Ext.Updaterc?br />
getValue( Boolean asNumber ) : String/Number
得到value属性的?br />
getViewSize() : Object
得到clientHeight和clientWidth信息l成的对象{width,height}
getWidth( [Boolean contentWidth] ) : Number
..q样的方法真?br />
getX() : Number
getXY() : Array
getY() : Array
得到面偏移?也就是绝对坐?br />
hasClass( String className ) : Boolean
样式cclassName 存在于当前元素的dom 节点?br />
hide( [Boolean/Object animate] ) : Ext.Element
隐藏当前元素
hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element
讄鼠标UdUd事g
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
q个要放?Ext.ddM门搞?用于拖曳
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做ؓ(f)当前元素的兄弟节?where可选before/after,默认为before
is( String selector ) : Boolean
验证当前节点是否匚w单选择器selector
isBorderBox()
试不同的样式规则以军_当前元素是否使用一个有Ҏ(gu)的盒?br />
isDisplayed() : Boolean
只要不是指定display属性none都会(x)q回?br />
isMasked() : Boolean
仅有当前元素有maskq且可见时ؓ(f)?mask译ؓ(f)蒙片?是有些输入框没得到g前会(x)有一行模p的提示的那U东?br />
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Ҏ(gu)
mask( [String msg], [String msgCls] ) : Element
为当前对象创?br />
move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element
相前元素相对于当前位|移?
direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".
distance,指示要移动的距离,以像素ؓ(f)单位
moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element
U动到指定的位置
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的兄弟节?br />
query( String selector ) : Array
通过样式选择器选择子节?br />
radioClass( String/Array className ) : Ext.Element
d样式或样式数l到当前元素QƈU除兄弟节点中的指定样式
relayEvent( String eventName, Object object ) : void
当前元素的eventName事g同时转发lobject对象
remove() : void
从当前DOM中删除元?q从~存中移?br />
removeAllListeners() : Ext.Element
U除所有的侦听?
removeClass( String/Array className ) : Ext.Element
U除样式c?br />
removeListener( String eventName, Function fn ) : Ext.Element
U除事geventName的fn侦听?br />
repaint() : Ext.Element
强制览器重l当前元?br />
replace( Mixed el ) : Ext.Element
用当前元素替换el
replaceClass( String oldClassName, String newClassName ) : Ext.Element
替换样式c?br />
replaceWith( Mixed/Object el ) : Ext.Element
用el替换当前元素
scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean
滚动,scroll?x)保证元素不会(x)越?direction和distance参数见move
scrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element
滚动到container内的视图
scrollTo( String side, Number value, [Boolean/Object animate] ) : Element
基本与scrollҎ(gu)相同,但不保证元素不越?br />
select( String selector, [Boolean unique] ) :
与query不同的是,通过样式选择器selector,selectҎ(gu)?x)返回一个复合元素对?CompositeElement)或CompositeElementLite,
set( Object o, [Boolean useSet] ) : Ext.Element
讄属性，?br /> 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 对象的属性?br />
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
讄可见?br />
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
讄高度和宽?br />
setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element
讄当前元素相对于页面的横纵坐标
setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element
讄透明度，opacity?完全不透明,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.VISIBILITYq是Element.DISPLAY属性来定义可见?br />
setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element
讄可见?br />
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的位|?br />
show( [Boolean/Object animate] ) : Ext.Element
昄当前元素
swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element
LeventName事g冒Qƈ视preventDefaultL默认行ؓ(f)
toggle( [Boolean/Object animate] ) : Ext.Element
切换元素的visibility 或display属?依赖于setVisibilityMode讑֮?br />
toggleClass( String className ) : Ext.Element
如果样式名存在于当前元素对应的dom 节点Q移除，反之应用
translatePoints( Number/Array x, Number y ) : Object
q回一个{left,top}l构
un( String eventName, Function fn ) : Ext.Element
解除事g侦听Q参?nbsp; 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更新当前节点内容QloadScripts指示html中如果有scriptQ是否需要运?q是一个innerHTML的一个老老老问题了
wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element
用另一个元素config包含自己
]]>
寚w择的元?应用事g侦听?事g名以@附加在结?例如
addBehaviors({
// id=foo下所有的a标签加入click事g
'#foo a@click' : function(e, t){
// do something
},
// ?分隔多个选择?br /> '#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
~码一个对?数组或其它gؓ(f)一个json格式字符?支持对象,数组,日期,字符?
destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
试ȝ除每个传入的对象,包括DOM,事g侦听?q呼叫他们的destroyҎ(gu)(如果存在)
each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
利用array中的每个元素q代调用fn.直到fnq回?调用格式fn.call(scope || array[i], array[i], i, array);
encode(String json) : Object
一个json格式字符串反序列化ؓ(f)对象
escapeRe( String str ) : String
为字W串正则~码??+?^${}()|[]/\字符前加\
extend( Object subclass, Object superclass, [Object overrides] ) : void
从superclasscȝ承subclass,overrides参数是要重蝲的方法列?详见override
fly( String/HTMLElement el, [String named] ) : Element
得到全局׃n的一个Q动元素el,如果有多个Q动元素可以用命名以避免潜在的冲H?br />
get( Mixed el ) : Element
得到一个Element对象,参数可以是id或DOM节点或已存在的Element对象
getBody() : Element
得到当前文档的body对象
getCmp( String id ) : Component
通过id得到一个Component对象
getDoc() : Element
得到当前文档
getDom( Mixed el ) : HTMLElement
通过id或节Ҏ(gu)Element对象q回一个DOM节点
id( [Mixed el], [String prefix] ) : String
为对象el生成一个惟一id,如果对象本n已有id,不?x)被改?可以使用前导Wprefix)
isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
判断值是否ؓ(f)I?null, undefined或空字符串将q回?如果allowBlank定义为真,I字W串不被视为空
namespace( String namespace1, String namespace2, String etc ) : void
创徏一个命名空??br /> Ext.namespace('Company', 'Company.data');
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
num( Mixed value, Number defaultValue ) : Number
value转ؓ(f)数?如果value不是合法的数值类?返回defaultValue,其实defaultValueq不一定要求是数值类?只要你愿?br />
onReady( Function fn, Object scope, boolean override ) : void
当文档准备好了之后引发fn,发生在page的onload事g之前,q且囄此时都还没有载入,scope定义执有?override定义scope是否有默认的选择
override( Object origclass, Object overrides ) : void
利用overrides重写origclass的方??br /> Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});
query( String path, [Node root] ) : Array
通过path,在root中选择节点数组,path可以是以下四U选择器之一
[元素选择器] ?
* L节点
E 一个E标签元素
E F 先节点为E的F节点
E > F ?E/F 父节点ؓ(f)E的F节点
E + F 前一个兄弟节点ؓ(f)E的F节点
E ~ F 前面的兄弟节点中有E的F节点
[属性选择器] ?
E[foo] 有foo属性的E节点
E[foo=bar] 有foo属性gؓ(f)bar的E节点
E[foo^=bar] foo属性以bar开始的E节点
E[foo$=bar] foo属性以barl尾的E节点
E[foo*=bar] foo属性中有bar字符串的E节点
E[foo%=2] foo属性能?整除的E节点
E[foo!=bar] foo属性g为bar的E节点
[伪类选择器] ?
E:first-child E节点是父节点中第一个子节点
E:last-child E节点是父节点中最后一个子节点
E:nth-child(n) E是父节点中每n个节?br /> E:nth-child(odd) E是父节点中的奇数节点
E:nth-child(even) E是父节点中的偶数节点
E:only-child E是父节点中惟一的子节点
E:checked checked属性ؓ(f)真的节点
E:first 子孙节点中的W一个E节点
E:last 子孙节点中的最后一个E节点
E:nth(n) 子孙节点中的Wn个E节点
E:odd E:nth-child(odd)的简?br /> E:even E:nth-child(even)的简?br /> E:contains(foo) innerHTML属性中含有foo的E节点
E:nodeValue(foo) E节点中包含一个gؓ(f)foo的文本节?br /> E:not(S) 不匹配简单选择器S的E节点
E:has(S) 有能匚w单选择器S的子节点的E节点
E:next(S) 下一个兄弟节匚w单选择器S的E节点
E:prev(S) 前一个兄弟节匚w单选择器S的E节点
type( Mixed object ) : String
判断对象cd,如果不是下列g一返回false
[样式选择器] ?
E{display=none} display属性gؓ(f)none的E节点
E{display^=none} display属性gnone开始的E节点
E{display$=none} display属性gnonel束的E节点
E{display*=none} display属性值含有none子字串的E节点
E{display%=2} display属性D?整除的E节点
E{display!=none} display属性g{于none的E节点
select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) :CompositeElementLite/CompositeElement
在root内通过样式选择器或元素数组selector选择元素或元素列?unique指示是否只选择惟一?br />
urlDecode( String string, [Boolean overwrite] ) : Object
url格式字符串string解码为json对象,overwrite参数指示是否不重写已存在的对??br /> Ext.urlDecode("foo=1&bar=2"); //q回 {foo: 1, bar: 2}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4"); //q回 {foo: 1, bar: 4}.
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); //q回 {foo: 1, bar: [2, 3, 4]}.
urlEncode( Object o ) : String
json对象~码为url格式字符?参见urlDecode
type( Mixed object ) : String
得到objectcd,如果不ؓ(f)以下列Dg一则返回false
]]>