ext.getCmp 这个方法是干嘛用的是简写么 另外求Ext 其他常用简写

get方法中只有一个参数，这个参数是混合参数，可以是dom节点的id、也可以是一个element、或者是一个dom节点对象等。

•get方法其实是extelementget的简写形式。

aaa

•extget("hello")、extget(documentgetelementbyid("hello"))、extget(e)等三个方法都可以得到一个与dom节点hello对应的ext元素。

getcmp方法用来获得一个ext组件，也就是一个已经在页面中初始化了的component或其子类的对象，getcmp方法中只有一个参数，也就是组件的id。

•getcmp方法其实是extcomponentmgrget方法的简写形式。

//html页面中包含一个id为hello的div，代码如下：

aaa

•我们使用extgetcmp(“myfirstpanel")来得到id为myfirstpanel的组件，并调用其settitle方法来

面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。

面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能。并提供了一些可重用的工具按钮 让我们灵活的控制面板。面板可以放入其他任何容器中，面板本身也是一个容器，所以面板里面也可以包含其他组件。面板的类名为ExtPanel,其 xtype为panel。

看下面一个例子来显示出面板的各个组成部分：

//普通的面板

function panel(){

var panel=new ExtPanel({

renderTo:'panel',

title:'面板的头部',

width:400,

height:200,

html:'<h1>面板的主显示区域可包含任何html代码</h1>',

tbar:[{text:'顶部工具栏按钮'}],

bbar:[{text:'底部工具栏'}],

buttons:[

{

text:'面板底部按钮',

handler:function()

{

ExtMsgalert('提示','面板底部按钮的事件！');

}

}

]

});

}

上面的代码就不做详细介绍了，特别注意的一点是renderTo:'panel'，这句代码负责把面板绑定到一个div层里，panel就是div的ID。

<div id="panel"></div>

代码执行后会显示下面的效果：

效果不错吧！面板中可以有多个工具栏，可以位于面板的顶部或底部，Ext工具栏是由ExtToolbar类表示。工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏，可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：

function panel(){

var panel=new ExtPanel({

tools:[

{id:"save"},

{id:"help"},

{id:"up"},

{

id:"close",

handler:function(){

ExtMessageBoxalert("工具栏按钮","工具栏的关闭按钮事件")

}

}

],

renderTo:'panel',

title:'面板的头部',

width:400,

height:200,

html:'<h1>面板的主显示区域可包含任何html代码</h1>',

tbar:[{text:'顶部工具栏按钮'}],

bbar:[{text:'底部工具栏'}],

buttons:[

{

text:'面板底部按钮',

handler:function()

{

ExtMsgalert('提示','面板底部按钮的事件！');

}

}

]

});

}

跟普通的面板没什么区别，只是多了个tools配置属性，可以通过ID来设置工具栏选项种类，如果需要给工具栏选项添加事件，则直接配置handler属性就可以。下面我为大家贴了一些id的枚举值：

toggle (collapsable为true时的默认值)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

上面的东西我也没有全部测试，如果大家感兴趣就自己试一下吧。

如果我们需要让这个面板可以拖动，需要加3个配置属性，改变一处配置。

:88,

y: 88,

renderTo: ExtgetBody(),//x,y,renderTo:ExtgetBody()初始化panel的位置

draggable: {

insertProxy: false,//拖动时不虚线显示原始位置

onDrag : function(e){

var pel = thisproxygetEl();

thisx = pelgetLeft(true);

thisy = pelgetTop(true);//获取拖动时panel的坐标

var s = thispanelgetEl()shadow;

},

endDrag : function(e){

thispanelsetPosition(thisx, thisy);//移动到最终位置

}

}

x与y是设置在屏幕显示位置，renderTo不需要指定div的id了，直接用ExtgetBody()方法就可以把Panel加载。

draggable是拖动时设置，onDrag是在拖动时触发的事件，endDrag是结束拖动时事件。

效果:

这样就可以拖动了，但是会发现在拖动时有一个黑框框，这样可能有些不美观了。如果我们需要让这个黑框随着移动位置而变化。那么我们需要在onDrag事件函数中加如下代码:

if (s) {

srealign(thisx, thisy, pelgetWidth(), pelgetHeight());

}

看看拖动例子的全部代码：

//可以拖动的面板

function panelDrag(){

var panel=new ExtPanel({

title: '拖一下看看我动不',

x:88,

y: 88,

renderTo: ExtgetBody(),//x,y,renderTo:ExtgetBody()初始化panel的位置

floating: true,//true

frame: true,//圆角边框

width: 400,

height: 200,

draggable: {

insertProxy: false,//拖动时不虚线显示原始位置

onDrag : function(e){

var pel = thisproxygetEl();

thisx = pelgetLeft(true);

thisy = pelgetTop(true);//获取拖动时panel的坐标

var s = thispanelgetEl()shadow;

if (s) {

srealign(thisx, thisy, pelgetWidth(), pelgetHeight());

}

},

endDrag : function(e){

thispanelsetPosition(thisx, thisy);//移动到最终位置

}

}

})

}

ExtPanel有几个子类，所以来介绍一下Panel中常见的配置属性、方法，下面内容是资料中的：

1autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据

2autoScroll:设为true则内容溢出的时候产生滚动条，默认为false

3autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false

4bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],

5tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],

6buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]

7buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right

8collapsible：设为true，显示右上角的收缩按钮，默认为false

9draggable:true则可拖动，但需要你提供 *** 作过程，默认为false

10html:主体的内容

11id：id值，通过id可以找到这个组件，建议一般加上这个id值

12width：宽度

13height：高度

13title:标题

14titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false

15applyTo：（id）呈现在哪个html元素里面

16contentEl：（id）呈现哪个html元素里面，把el内的内容呈现

17renderTo：（id）呈现在哪个html元素里面

applyTo、contentEl、renderTo三者区别个人理解为：applyTo和RenderTo绑定到html元素中，contentEl则是html元素到ext组件中去。

上面说到面板都是绑定在某个html元素中显示面板，是局部的。Extjs中还有一个可以显示在整个body中的组件ExtViewPort，它会随着浏览器而变化。要注意的是一个页面中只能存在一个viewport的实例。看下面的代码

function viewport(){

var view=new ExtViewport({

enableTabScroll:true,

layout:"fit",

items:[

{

title:'标题',

html:"内容",

bbar:[

{text:"按钮1"}

]

}

]

})

}

与其它使用方式大同小异，Viewport不需要指定renderTo，Viewport通常用于网站主页面，Viewport常用布局有fit、border等，设置layout属性改变布局。

基本的面板我们了解了，还有一个很重要的面板TabPanel，这里用一个小例子做说明，代码就不解释了。面板的用法是非常灵活的，我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的。

function tabpanel(){

var tabpanel=new ExtTabPanel({

activeTab:0, //设置默认选择的选项卡

renderTo:'tabpanel',

width:200,

height:150,

items:[

{

title:"第一个选项",

html:"第一个的内容"

},

{

title:"第二个选项",

html:"第一个的内容"

}

]

});

}

对待本人用到的东西来做一个小设计。代码不多做讲解，发一下代码和效果吧

点击展开

更多 0上一篇：Extjs学习总结

下一篇：ExtJs Panel翻译

相关主题推荐 extjs 浏览器 控件 布局 移动 相关博文推荐 vimperator部分使用帮助 javascript 常用函数归纳 javascript原生代码—跨浏览器事 [Phonegap+Sencha Tou [Phonegap+Sencha Tou [Phonegap+Sencha Tou [Phonegap+Sencha Tou [Phonegap+Sencha Tou 查看评论

暂无评论

您还没有登录,请[登录]或[注册]

以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

核心技术类目全部主题 Java *** Android iOS ERP IE10 Eclipse CRM JavaScript Ubuntu NFC WAP jQuery 数据库 BI HTML5 Spring Apache Hadoop NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 云计算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大数据 aptech Perl Tornado Ruby Hibernate ThinkPHP Spark HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap 个人资料

thunder_1985

访问：49882次

积分：1107分

排名：第12092名

原创：49篇 转载：0篇 译文：14篇 评论：11条 文章搜索 文章分类Ant(0)

dwr(5)

Hibernate(1)

javascript(2)

JDBC(2)

Junit(0)

Servlet(0)

Spring(0)

Struts2(3)

UML(0)

XML(0)

文章存档2010年01月(2)2009年12月(12)2009年11月(5)2009年10月(22)2009年09月(22)

阅读排行Struts2文件上传(6028)

ExtJs之combobox(4648)

Struts2文件下载(3970)

struts2异常处理(3809)

ExtJS学习笔记 ExtFormPanel(2216)

Extjs学习总结(1634)

ExtJs Panel翻译(1453)

ExtJS面板的使用(ExtPanle、ExtTabPanel、ExtViewport) (1346)

Oracle安装失败后如何完全卸载(1158)

PreparedStatement用法总结(1098)

评论排行Struts2文件下载(3)

MySql分页(3)

PreparedStatement用法总结(2)

PreparedStatement和Statement比较(1)

ExtJs之combobox(1)

Struts2文件上传(1)

引用 extJs 20学习笔记(Elementjs篇)(0)

让select处于不选中状态(0)

innerText与innerHTML区别 (0)

Oracle安装失败后如何完全卸载(0)

推荐文章最新评论Struts2文件上传

nhm_lxy: 师傅 带带我吧

PreparedStatement用法总结

zlp1992: 你好，如果数据库的是char类型，该怎么设置呢？

PreparedStatement用法总结

teteert: 如果数据库中有一个字段是自动增加的，则使用PrepareedStatement 怎么插入数据啊，自动

Struts2文件下载

wdlht001: 很好用~谢谢

Struts2文件下载

jinweisheng5521:

ExtJs之combobox

匿名用户:

Struts2文件下载

hetengfeng:

MySql分页

匿名用户:

PreparedStatement和Statement比较

匿名用户:

MySql分页

JavaAlpha:

ExtgridGridViewgetCell( Number row, Number col )：取得指定单元格对应的td元素

例如：

var sStr=ExtgridGridViewgetCell(0,0);

再给你一些extjs常用的方法、属性

1、ExtgridGridPanel

主要配置项：

store：表格的数据集

columns：表格列模式的配置数组，可自动创建ColumnModel列模式

autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0

stripeRows：表格是否隔行换色，默认为false

cm、colModel：表格的列模式，渲染表格时必须设置该配置项

sm、selModel：表格的选择模式，默认为ExtgridRowSelectionModel

enableHdMenu：是否显示表头的上下文菜单，默认为true

enableColumnHide：是否允许通过标题中的上下文菜单隐藏列，默认为true

loadMask：是否在加载数据时显示遮罩效果，默认为false

view：表格视图，默认为ExtgridGridView

viewConfig：表格视图的配置对象

autoExpandMax：自动扩充列的最大宽度，默认为1000

autoExpandMin：自动扩充列的最小宽度，默认为50

columnLines：是否显示列分割线，默认为false

disableSelection：是否禁止行选择，默认为false

enableColumnMove：是否允许拖放列，默认为true

enableColumnResize：是否允许改变列宽，默认为true

hideHeaders：是否隐藏表头，默认为false

maxHeight：最大高度

minColumnWidth：最小列宽，默认为25

trackMouseOver：是否高亮显示鼠标所在的行，默认为true

主要方法：

getColumnModel()：取得列模式

getSelectionModel()：取得选择模式

getStore()：取得数据集

getView()：取得视图对象

reconfigure( ExtdataStore store, ExtgridColumnModel colModel )：使用一个新的数据集和列模式重新配置表格组件

2、ExtgridColumn

主要配置项：

id：列id

header：表头文字

dataIndex：设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应

width：列宽

align：列数据的对齐方式

hidden：是否隐藏列，默认为false

fixed：是否固定列宽，默认为false

menuDisabled：是否禁用列的上下文菜单，默认为false

resizable：是否允许改变列宽，默认为true

sortable：是否允许排序，默认为true

renderer：设置列的自定义单元格渲染函数

传入函数的参数有：

value：数据的原始值

metadata：元数据对象，用于设置单元格的样式和属性，该对象包含的属性有：

css：应用到单元格TD元素上的样式名称

attr：一个HTML属性定义字符串，例如'style="color:blue"'

record：当前数据记录对象

rowIndex：单元格的行索引

colIndex：单元格的列索引

store：数据集对象

xtype：列渲染器类型，默认为gridcolumn，其它可选值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等

editable：是否可编辑，默认为true

editor：编辑器

groupName：

emptyGroupText：

groupable：

3、ExtgridColumnModel

主要配置项：

columns：字段数组

defaultSortable：是否进行默认排序，默认为false

defaultWidth：默认宽度

主要方法：

findColumnIndex( String col )：根据给定的dataIndex查找列索引

getColumnById( String id )：取得指定id对应的列

getColumnCount( Boolean visibleOnly )：取得列总数

getColumnHeader( Number col )：取得列的表头

getColumnId( Number index )：取得列id

getDataIndex( Number col )：取得列对应的数据字段名

getIndexById( String id )：取得列索引

getTotalWidth( Boolean includeHidden )

isCellEditable( Number colIndex, Number rowIndex )

isFixed()

isHidden( Number colIndex )

setColumnHeader( Number col, String header )

setColumnWidth( Number col, Number width, Boolean suppressEvent )

setDataIndex( Number col, String dataIndex )

setEditable( Number col, Boolean editable )

setEditor( Number col, Object editor )

setHidden( Number colIndex, Boolean hidden )

setRenderer( Number col, Function fn )

4、ExtgridAbstractSelectionModel

主要方法：

lock()：锁定选择区域

unlock()：解锁选择区域

isLocked()：当前选择区域是否被锁定

5、ExtgridCellSelectionModel

主要方法：

clearSelections( Boolean preventNotify )：清除选择区域

getSelectedCell()：取得当前选择的单元格，返回一数组，其格式：[rowIndex, colIndex]

hasSelection()：当前是否有选择区域

select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [ExtdataRecord r] )：选择指定单元格

6、ExtgridRowSelectionModel

主要配置项：

singleSelect：是否单选模式，默认为false，即可以选择多条数据

主要方法：

clearSelections( [Boolean fast] )：清除所有选择区域

deselectRange( Number startRow, Number endRow )：取消范围内的行选择

deselectRow( Number row, [Boolean preventViewNotify] )：取消指定行的选择状态

each( Function fn, [Object scope] )：遍历所有选择行，并调用指定函数。当前被选行将传入该函数中

getCount()：得到选择的总行数

getSelected()：得到第一个被选记录

getSelections()：得到所有被选记录的数组

hasNext()：判断当前被选行之后是否还有记录可以选择

hasPrevious()：判断当前被选行之前是否还有记录可以选择

hasSelection()：是否已选择了数据

isIdSelected( String id )：判断指定id的记录是否被选择

isSelected( Number/Record index )：判断指定记录或记录索引的数据是否被选择

selectAll()：选择所有行

selectFirstRow()：选择第一行

selectLastRow( [Boolean keepExisting] )：选择最后行

keepExisting：是否保持已有的选择

selectNext( [Boolean keepExisting] )：选择当前选择行的下一行

selectPrevious( [Boolean keepExisting] )：选择当前选择行的上一行

selectRange( Number startRow, Number endRow, [Boolean keepExisting] )：选择范围内的所有行

selectRecords( Array records, [Boolean keepExisting] )：选择一组指定记录

selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )：选择一行

row：行索引

selectRows( Array rows, [Boolean keepExisting] )：选择多行

rows：行索引数组

7、ExtgridCheckboxSelectionModel

主要配置项：

singleSelect：是否单选模式，默认为false，即可以选择多条数据

checkOnly：是否只能通过点击checkbox列进行选择，默认为false

sortable：是否允许checkbox列排序，默认为false

width：checkbox列的宽度，默认为20

8、ExtgridRowNumberer

主要配置项：

header：行号列表头显示的内容

width：列宽，默认为23

9、ExtgridGridView

主要配置项：

enableRowBody：是否包含行体

sortAscText：表格标题菜单中升序的文字描述

sortDescText：表格标题菜单中降序的文字描述

columnsText：表格标题菜单中列对应的文字描述

autoFill：是否自动扩展列以充满整个表格，默认为false

forceFit：是否强制调整表格列宽以适用表格的整体宽度，防止出现水平滚动条，默认为false

主要方法：

focusCell( Number row, Number col )：将焦点移到指定单元格

focusRow( Number row )：将焦点移动指定行

getCell( Number row, Number col )：取得指定单元格对应的td元素

getHeaderCell( Number index )：取得指定表头对应的td元素

getRow( Number index )：取得指定行对应的tr元素

getRowClass( Record record, Number index, Object rowParams, Store store )：得到附加到表格行上的样式名

record：当前行的数据记录对象

index：当前行的索引

rowParams：渲染时传入到行模板中的配置对象，通过它可以为行体定制样式，该对象只在enableRowBody为true时才生效，可能的属性 如下：

body：渲染到行体中的HTML代码片段

bodyStyle：应用到行体tr元素style属性的字符串

cols：应用到行体td元素colspan属性的值，默认为总列数

store：表格数据集

refresh( [Boolean headersToo] )：刷新表格组件

scrollToTop()：滚动表格到顶端

实战

1：让gridpanel的滚动条自动滚动到最后一条记录(动态插入数据)：

gridgetView()focusRow(vehiclePassInfoGridgetStore()getCount()-1);

2:清除gridpanel中有行被选择的状态：

gridgetSelectionModel()clearSelections();

//html代码

<div id="container">

</div>

//js代码

var p = new ExtPanel({

title: 'My Panel',//标题

collapsible:true,//右上角上的那个收缩按钮，设为false则不显示

renderTo: 'container',//这个panel显示在html中id为container的层中

width:400,

height:200,

html: "<p>我是内容，我包含的html可以被执行！</p>"//panel主体中的内容，可以执行html代码

});

因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。

//配置参数(只列举部分常用参数)

1autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据

2autoScroll:设为true则内容溢出的时候产生滚动条，默认为false

3autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false

4bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],

5tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],

6buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]

7buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right

8collapsible：设为true，显示右上角的收缩按钮，默认为false

9draggable:true则可拖动，但需要你提供 *** 作过程，默认为false

10html:主体的内容

11id：id值，通过id可以找到这个组件，建议一般加上这个id值

12width：宽度

13height：高度

13title:标题

14titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false

15applyTo：（id）呈现在哪个html元素里面

16contentEl：（id）呈现哪个html元素里面，把el内的内容呈现

17renderTo：（id）呈现在哪个html元素里面

//关于这三个参数的区别(个人认为：applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)：

英文如下（本人英语poor，不敢乱翻译）：

contentEl - This config option is used to take existing content and place it in the body of a new panel It is not going to be the actual panel itself (It will actually copy the innerHTML of the el and use it for the body) You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel

applyTo - This config option allows you to use pre-defined markup to create an entire Panel By entire, I mean you can include the header, tbar, body, footer, etc These elements must be in the correct order/hierarchy Any components which are not found and need to be created will be autogenerated

renderTo - This config option allows you to render a Panel as its created This would be the same as saying myPanelrender(ELEMENT_TO_RENDER_TO);

哪位大人帮忙翻译下

考虑到入门，方法事件会在以后的文章中以实例穿插。

1可拖动的panel实例

下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件

//html代码

无

//下面创建一个允许拖动的panel，但是拖动的结果不能保存

var p=new ExtPanel({

title: 'Drag me',

x: 100,

y: 100,

renderTo: ExtgetBody(),//x,y,renderTo:ExtgetBody()初始化panel的位置

floating: true,//true

frame: true,//圆角边框

width: 400,

height: 200,

draggable:true

})show();//在这里也可以不show（）

但是还不能拖到其他的地方，我们需要改写draggable：

draggable: {

insertProxy: false,//拖动时不虚线显示原始位置

onDrag : function(e){

var pel = thisproxygetEl();

thisx = pelgetLeft(true);

thisy = pelgetTop(true);//获取拖动时panel的坐标

},

endDrag :

function(e){

thispanelsetPosition(thisx, thisy);//移动到最终位置

}

}

实现了可保存的拖动

拖动的时候阴影还在原位置，我们再在draggable中的onDrag事件中添加代码：

var s = thispanelgetEl()shadow;

if (s) {

srealign(thisx, thisy, pelgetWidth(), pelgetHeight());

}

//shadow的realign方法的四个参数，改变shadow的位置大小属性

最后这个可拖动的panel的代码为：

var p=new ExtPanel({

title: 'Drag me',

x: 100,

y: 100,

renderTo: ExtgetBody(),

floating: true,

frame: true,

width: 400,

height: 200,

draggable: {

insertProxy: false,

onDrag :

function(e){

var pel = thisproxygetEl();

thisx = pelgetLeft(true);

thisy = pelgetTop(true);

var s = thispanelgetEl()shadow;

if (s) {

srealign(thisx, thisy, pelgetWidth(), pelgetHeight());

}

},

endDrag : function(e){

thispanelsetPosition(thisx, thisy);

}

}

})

//效果我就不贴出来了

2带顶部，底部，脚部工具栏的panel

var p=new ExtPanel({

id:"panel1",

title:"标题",

collapsible:true,

renderTo:"container",

closable:true,

width:400,

height:300,

tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏

bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏

html:"内容",

buttons:[{text:"按钮1"},{text:"按钮2"}] //footer部工具栏

});

我们已经在各种工具栏上添加了按钮，但是却没有激发事件，下面我们来添加按钮事件代码：

tbar:[{text:"按钮1",handler:function(){ExtMessageBoxalert("我是按钮1","我是通过按钮1激发出来的d出框！")}},{text:"按钮2"}],

//改写tbar，添加handler句柄，点击顶部工具栏上按钮1，d出提示框，效果图大家想象下，就不贴出来了

当然，一般情况下，我们只要一个工具栏，这里只是为了演示！

3panel工具栏

//添加下面的代码到panel配置参数中

tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){ExtMessageBoxalert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],

//id控制按钮，handler控制相应的事件

//id的枚举值为：

toggle (collapsable为true时的默认值)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

一、获取元素（Getting

Elements）

1Extget

var

el

=

Extget('myElementId');//获取元素，等同于documentgetElementById('myElementId');//会缓存

2

Extfly

var

el

=

Extfly('myElementId')//不需要缓存。

注：享元模式（Flyweight

Design

Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。

3ExtgetDom

var

elDom

=

ExtgetDom('elId');

//

依据id来查dom节点

var

elDom1

=

ExtgetDom(elDom);

//

依据dom节点来查dom节点

二、CSS元素

4addClass

Extfly('elId')addClass('myCls');

//

加入元素的'myCls'的样式

5radioClass

Extfly('elId')radioClass('myCls');//添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。

6removeClass

Extfly('elId')removeClass('myCls');

//

移除元素的样式

7toggleClass

Extfly('elId')toggleClass('myCls');

//

加入样式

Extfly('elId')toggleClass('myCls');

//

移除样式

Extfly('elId')toggleClass('myCls');

//

再加入样式

8hasClass

if

(Extfly('elId')hasClass('myCls'))

{//判断是否已加上这个样式

//

是有样式的

}

10replaceClass

Extfly('elId')replaceClass('myClsA',

'myClsB');//替换样式

11getStyle

var

color

=

Extfly('elId')getStyle('color');//返回该元素的统一化当前样式和计算样式。

var

zIndx

=

Extfly('elId')getStyle('z-index');//返回该元素的统一化当前样式和计算样式。

12setStyle

Extfly('elId')setStyle({

display

:

'block',

overflow

:

'hidden',

cursor

:

'pointer'

});//设置元素的样式，也可以用一个对象参数包含多个样式。

13getColor

Extfly('elId')getColor('color');//为指定的CSS属性返回CSS颜色

14setOpacity

Extfly('elId')setOpacity(45,

true);//设置元素的透明度。

15clearOpacity

Extfly('elId')clearOpacity();//清除这个元素的透明度设置

getEl( ) : ExtElement

返回所属的{@link ExtElement}。通常这是一个<

返回所属的ExtElement。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the ExtElement which encapsulates this Component This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

new ExtPanel({

title: 'The Clickable Panel',

listeners: {

render: function(p) {

// Append the Panel to the click handler's argument list

pgetEl()on('click', handlePanelClickcreateDelegate(null, [p], true));

}

}

});

参数项：

返回值：

ExtElement

包含该组件的元素对象。The Element which encapsulates this Component

以上就是关于ext.getCmp 这个方法是干嘛用的是简写么 另外求Ext 其他常用简写全部的内容，包括:ext.getCmp 这个方法是干嘛用的是简写么 另外求Ext 其他常用简写、如何设置 Ext.Viewport 的宽度(定位)、extjs如何获取Grid中某一行某一列的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！