ExtJS-入门（转载自http://www.blogjava.net/puras/archive）

2010-01-13

缩略显示

ExtJS-入门（转载自http://www.blogjava.net/puras/archive）

文章分类:Web前端

在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部分也提供了不错的支持,稍后都会有详细的介绍....

• 20:55
• 浏览 (85)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-grid(2)

文章分类:Web前端

 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+'">&#160;</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

• 00:12
• 浏览 (84)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-grid(1)

文章分类:Web前端

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()
       });  
      
      
        });

• 00:11
• 浏览 (96)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-Tree

文章分类:Web前端

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)
            });
        }
    });
  
 });

• 00:09
• 浏览 (191)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-toolbar

文章分类:Web前端

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)...{
           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));
    }

• 00:08
• 浏览 (97)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-toolbar

文章分类:Web前端

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('右边结束');

• 00:06
• 浏览 (132)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

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();

• 00:04
• 浏览 (124)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField

文章分类:Web前端

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
验证值

• 00:03
• 浏览 (124)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.widgets-Button,SplitButton,CycleButton

文章分类:Web前端

Ext.Action
action实现一个脱离了容器的事件,所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和Ext.menu.Menu支持action接口:),因为容器要实现下面所有的方法setText(string),setIconCls(string), setDisabled(boolean), setVisible(boolean) andsetHandler(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?

• 00:02
• 浏览 (95)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.data-Tree/Node

文章分类:Web前端

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?

• 00:01
• 浏览 (102)
• 评论 (0)
• 分类: ExtJs

2010-01-10

缩略显示

Ext.data-GroupingStore/JsonStore/SimpleStore

文章分类:Web前端

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

• 00:00
• 浏览 (252)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

Ext.data-Store

文章分类:Web前端

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

• 23:59
• 浏览 (85)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

Ext.data-DataReader/ArrayReader/JsonReader/XmlReader

文章分类:Web前端

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

• 23:58
• 浏览 (140)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

Ext.data-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy

文章分类:Web前端

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

• 23:57
• 浏览 (38)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

Ext.data- Connection/Ajax/Record

文章分类:Web前端

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

• 23:56
• 浏览 (57)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

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编码解码,将& <  >  “替换为&amp;&lt;&gt;&quot;

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?

• 23:54
• 浏览 (133)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

EXT核心API详解(六)-Ext.Fx

文章分类:Web前端

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

• 23:53
• 浏览 (50)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

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

• 23:52
• 浏览 (134)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template

文章分类:Web前端

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方法

• 23:51
• 浏览 (52)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

EXT核心API详解(三)-Ext.Element

文章分类:Web前端

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], Functioncallback ) : 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

• 23:50
• 浏览 (59)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

EXT核心API详解(二)-Array/Date/Function/Number/String

文章分类:Web前端

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?

• 23:49
• 浏览 (73)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

EXT核心API详解(一)-Ext

文章分类:Web前端

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

• 23:48
• 浏览 (55)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Ext.form概述)

文章分类:Web前端

Ext.form中封装了是输入组件。input、textArea、frameSet、form等元素都被包装起来了。我刚才发了点时间对它的类图分析了一下，用StartUML做了图如下：

　　Ext.form中的组件太多，实在不大方便一一研究，哪来的时间。还好，有示例，照着用吧。不明白的再去看代码、看文档。

• 23:35
• 浏览 (80)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Function扩展篇)

文章分类:Web前端

 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#中

• 23:33
• 浏览 (59)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Ext.TabPanel篇)

文章分类:Web前端

 　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。这下组件的大概结构都清楚了。还有不明白，自己newExt.TabPanel({……})一个，然后在FireBug下面去查看dom结构，就一清二楚了。

　　二、处理标签的事件

　　为什么要研究这个问题？有需求的，如何在鼠标移到标签上时就显示对应的面板呢？默认情况下，TabPanel是不支持这个功能的，但是，这个功能有时是需要的。这儿有点小技巧。

　　看Ext.TabPanel源代码中关于标签的事件处理：

        this.strip.on(&apos;mousedown&apos;, this.onStripMouseDown, this);
        this.strip.on(&apos;click&apos;, this.onStripClick, this);
        this.strip.on(&apos;contextmenu&apos;, this.onStripContextMenu, this);
        if(this.enableTabScroll){
            this.strip.on(&apos;mousewheel&apos;, this.onWheel, this);
        }

　　这段代码写在initEvents函数中，先解释一下，this.strip是指头部放标签的那个ul元素，相信，98%的读者会想，要注册事件也应当是为li元素注册，怎么会统统注册到ul这个父容器上面呢？原理就是事件冒泡。关于事件传递的原理，本人在下一文中有详细的实验、明确的结论，不再赘言。

　　ul元素捕获了事件，怎样在事件处理函数中得知倒底是哪个li发生了事件呢？Ext写了个函数：findTargets。详情请见如下代码：

    findTargets : function(e){
        var item = null;
        var itemEl = e.getTarget(&apos;li&apos;, 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(&apos;.x-tab-strip-close&apos;, 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

• 23:32
• 浏览 (139)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Ext.data.JsonReader篇二)

文章分类:Web前端

 有了上一篇中所讲内容，一般情况下就可以应付了，不过，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 === &apos;false&apos;){
                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源代码分析完毕，呵呵，因为这个类代码量较少，故讲得详细。

• 23:30
• 浏览 (177)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Ext.data.Store篇)

文章分类:Web前端

 　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 == &apos;object&apos; ?
                this.autoLoad : undefined]);
    }

　　第一个语句中主要就是一个relayEvents，意为延迟事件，这个延迟不是时间延迟哦。它是将当前对像的某些事件处理函数作为另一个对象的处理函数，同者共享，事实上，它的作用就是利用另一对象的事件来触发本对象的事件，从而引发事件处理函数的执行(说得太拗口了吧)。

　　那个inlineData上面讲了的，现在应验了，不多讲。从这儿可以看出，如果已从config中传过来数据，那么以直接传的数据为准，如果没有直接传数据，而是通过url，且autoLoad为true，这时就在构造函数中加载数据且完全数据的封装。

　　重点代码至此讲了一半，另一半就是load、loadRecords了。

• 23:29
• 浏览 (121)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Ext.data.JsonReader篇一)

文章分类:Web前端

嘿，别看关键就在这儿，事实上，它的代码很少的哦。加上注释才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: &apos;title&apos;, mapping: &apos;topic_title&apos;},
    {name: &apos;author&apos;, mapping: &apos;username&apos;},
    {name: &apos;totalPosts&apos;, mapping: &apos;topic_replies&apos;, type: &apos;int&apos;},
    {name: &apos;lastPost&apos;, mapping: &apos;post_time&apos;, type: &apos;date&apos;},
    {name: &apos;lastPoster&apos;, mapping: &apos;user2&apos;},
    {name: &apos;excerpt&apos;, mapping: &apos;post_text&apos;}
]);

var myNewRecord = new TopicRecord({
    title: &apos;Do my job please&apos;,
    author: &apos;noobie&apos;,
    totalPosts: 1,
    lastPost: new Date(),
    lastPoster: &apos;Animal&apos;,
    excerpt: &apos;No way dude!&apos;
});
myStore.add(myNewRecord);

 

　　好了，这一篇差不多了，未尽内容放下一篇中了。

• 23:28
• 浏览 (226)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1 学习笔记(Ext.data.HttpProxy篇)

文章分类:Web前端

 　关于Ext.data中各个类的关系图我在前面已经做了一个，不用多言。其实啊。关于数据的显示，一般要经历三个流程：DataProxy－－>DataReader－－>Store。当然，三个部分都得是具体的类，这三个是抽象类。
　　如果按照一般性的理解，那么应当先从Proxy开始了。

　　出人意料：DataProxy的代码就是一空架子。且看：

Ext.data.DataProxy = function(){
    this.addEvents(
        &apos;beforeload&apos;,
        &apos;load&apos;
    );
    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了。

• 23:26
• 浏览 (459)
• 评论 (0)
• 分类: ExtJs

2010-01-09

缩略显示

extJs 2.1学习笔记(Ext.Updater篇二)

文章分类:Web前端

全　　称: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&param2=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:&apos;foo.php&apos;, ...})

用法：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 = &apos;<div class="loading-indicator">&apos;+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 )
更新成功时触发。