Ext4详解

Extjs4布局详解(三)—accordion布局

2012-02-08 来源：mhzg 作者：mhzg (共0

条评论)

accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。

accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。

示例代码：

1. Ext.create('Ext.panel.Panel', { 2. title: 'Accordion Layout', 3. width: 300, 4. height: 300, 5. x:20, 6. y:20,

7. layout:'accordion', 8. defaults: {

9. bodyStyle: 'padding:15px' 10. },

11. layoutConfig: {

12. titleCollapse: false, 13. animate: true, 14. activeOnTop: true 15. }, 16. items: [{ 17. title: 'Panel 1', 18. html: 'Panel content!' 19. },{

20. title: 'Panel 2', 21. html: 'Panel content!' 22. },{

23. title: 'Panel 3', 24. html: 'Panel content!' 25. }],

26. renderTo: Ext.getBody() 27. });

Extjs4布局详解(二)—border布局

2012-02-05 来源：mhzg 作者：mhzg (共0

条评论)

border布局：border布局也称边界布局，他将页面分隔为

west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。

参数 split:true 可以调整除了center四个区域的大小。 参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。

center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。

示例代码：

1. Ext.create('Ext.panel.Panel', { 2. width: 500, 3. height: 400,

4. title: 'MHZG.NET-Border Layout', 5. layout: 'border', 6. x:20, 7. y:20, 8. items: [{

9. title: 'South Region is resizable', 10. region: 'south', 11. xtype: 'panel', 12. height: 80, 13. split: true, 14. margins: '0 5 5 5' 15. },{

16. title: 'West Region is collapsible', 17. region:'west',

18. xtype: 'panel', 19. margins: '5 0 0 5', 20. width: 200, 21. collapsible: true,

22. id: 'west-region-container', 23. layout: 'fit' 24. },{

25. title: 'Center Region', 26. region: 'center', 27. xtype: 'panel', 28. layout: 'fit', 29. margins: '5 5 0 0',

30. html:'在Extjs4中，center区域必须指定，否则会报错。' 31. }],

32. renderTo: Ext.getBody() 33. });

Extjs4布局详解(一)—Fit布局

2012-02-01 来源：mhzg 作者：mhzg (共0

条评论)

在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素

在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

示例代码：

1. var myData = [

2. ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],

3. ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],

4. ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],

5. ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],

6. ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],

7. ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],

8. ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],

9. ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],

10. ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],

11. ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],

12. ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],

13. ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],

14. ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],

15. ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],

16. ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],

17. ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],

18. ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],

19. ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],

20. ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],

21. ['McDonald\\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],

22. ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],

23. ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],

24. ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'], 25. ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],

26. ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],

27. ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],

28. ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],

29. ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],

30. ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] 31. ];

32. var store = Ext.create('Ext.data.ArrayStore', { 33. fields: [

34. {name: 'company'},

35. {name: 'price', type: 'float'}, 36. {name: 'change', type: 'float'}, 37. {name: 'pctChange', type: 'float'},

38. {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 39. ],

40. data: myData 41. }); 42.

43. Ext.define('DataWindow',{ 44. extend : 'Ext.window.Window', 45. title : 'MHZG.NET---Fit布局示例代码', 46. width:550, 47. layout : 'fit', 48. items : {

49. xtype : 'gridpanel', 50. store: store, 51. columns: [ 52. {

53. text : 'Company',

54. flex : 1, 55. sortable : false, 56. dataIndex: 'company' 57. }, 58. {

59. text : 'Price', 60. width : 75, 61. sortable : true, 62. renderer : 'usMoney', 63. dataIndex: 'price' 64. }, 65. {

66. text : 'Change', 67. width : 75, 68. sortable : true, 69. dataIndex: 'change' 70. }, 71. {

72. text : '% Change', 73. width : 75, 74. sortable : true, 75.

76. dataIndex: 'pctChange' 77. }, 78. {

79. text : 'Last Updated', 80. width : 85, 81. sortable : true,

82. renderer : Ext.util.Format.dateRenderer('m/d/Y'), 83. dataIndex: 'lastChange' 84. }] 85. } 86. }); 87.

88. Ext.onReady(function(){

89. var win = Ext.create(\ 90. x:10, 91. y:20, 92. }); 93. });

94. Extjs4 MVC页面空白分析

95. 2011-12-17 来源：mhzg 作者：mhzg (共6

条评论)

96. 写了一份开发笔记，很多问题都集中到了一篇文章上，那就是：Extjs4开发笔记(二)——框架的搭建。很多读者反映，照着例子做，页面一片空白，神马都不显示

97. 写了一份开发笔记，很多问题都集中到了一篇文章上，那就是：Extjs4开发笔记(二)——框架的搭建。很多读者反映，照着例子做，页面一片空白，神马都不显示。也有一些网友加我QQ，问我这到底是什么情况，跟一些网友进行讨论后，发现错误基本都发生以下几个方面。

98. 1、目录结构错误：这个就不表明了，提供一份截图。只要按照这个目录结构去做。是没有问题的。

99. 100.

2、文件夹名拼写错误：举一个碰到的例子，一哥们将app

目录下的controller目录拼写成了conrtoller，然后跟我说，他的页面一片空白，我说你把代码发过来我看看，运行之后，果然空白，心想这怎么回事？仔细校对后，发现了这个拼写错误，修正后，界面出现了。

101. 3、文件名拼写错误：不同于上边的，第二条是文件夹，这

是文件名。同样的错误发生在另一个哥们身上，他将view文件夹下的所有js文件，统一用小写字母命名，而在viewport.js文件中，还是按代码中的样子，使用大写小结合的方式。也就是，view.Header、view.Menu。之后，我说你给我看下你的代码吧，他传给我之后，我检查的时候，发现了这个问题，然后我问他，你知道js属于强类型么？他跟我说，什么是强类型？耐心的一一告诉他问题所在，大哥直接给来了一句，这么麻烦，你为什么不全小写呢？我直接躲墙角郁闷去了。 102.

4、IE7：某个版本，当使用这个版本的时候，IE7下无论怎

样，都不能显示框架页面，这个问题确实存在，至于哪个版本，我不太清楚，但是我使用的是4.02a。。这个版本，没有任何问题。 103.

5、直接运行代码：这个也让我苦恼了很长很长时间，绝大

部分的人，在运行代码的时候，双击index.html。点击允许阻止的内容。页面空白，更加NB的是。有很多人给我截图中，IE的状态栏是隐藏的。或者根本不看浏览器左下角的叹号，就认

为，代码是错误的。给大家截图一份

104. 105.

对于这样的错误，我感到很无语，也能无奈。既然使用了

extjs的mvc模式，那么就是要让js来进行动态加载，从而得到实实在在的效果，那么请问，js在本地会有多大的权限，直接运行带来的后果就是ext-all.js报拒绝访问的错误。这样一来，

肯定是页面一片空白，因为js根本没有权限去访问本地app目录下的所有文件。 106.

目前来说，只挑选了部分比较突出的案例来说明情况，当

有任何其他案例造成页面空白的事情发生，我会在本文继续进行更新，希望大家能有所体会。

Extjs4开发笔记(六)——数据的增删改

2011-12-15 来源：mhzg 作者：mhzg (共0

条评论)

上一章，我们介绍了动态Grid的显示，其地址是：Extjs4开发笔记(五)——动态grid，在上一章，我们只做了数据的显示，并没有添加、删除和修改功能，本章内容，介绍如何进行添加、删除和修改。

上一章，我们介绍了动态Grid的显示，其地址是：Extjs4开发笔记(五)——动态grid，在上一章，我们只做了数据的显示，并没有添加、删除和修改功能，本章内容，介绍如何进行添加、删除和修改。

一般的项目中，Gird功能不是很复杂的话，都会使用window来实现数据的添加、修改功能，而本实例中，由于使用了动态grid功能，这样就使得再使用动态window来实现数据的添加和修改就会变的非常困难。

幸好，Grid有RowEditing，下面，我们就用RowEditing来实现数据的添加和修改功能。在开始之前，我们先回顾下上一章的一些重点内容：

1、给Menu增加了field属性，使得我们在数据库中的一些字段可以被当做是Menu的节点集合中的对象来调用。

2、给菜单表增加了两个字段，分别是store和columns。在app/store/文件夹下，我们新建了bastore.js文件，那么再数据库中对应的字段中，填写内容为bastore，在columns字段中，我们添加了内容为{text:'序号',dataIndex:'ID'},{text:'公司名称',dataIndex:'kehu_name'}的数据。

最后，我们修改了Menu.js文件，使得Grid可以显示数据。 现在，我们修改columns中的数据为：

1. {text:'序号',dataIndex:'ID',width:50},{text:'公司名称

',dataIndex:'kehu_name',width:260,editor:{allowBlank: false}},{text:'备案号

',dataIndex:'beianhao',width:140,editor:{allowBlank: false}},{text:'备案密码

',dataIndex:'beianpass',width:100,editor:{allowBlank: false}},{text:'备案邮箱

',dataIndex:'beianemail',width:160,editor:{allowBlank: false}},{text:'备案邮箱密码

',dataIndex:'emailpass',width:120,editor:{allowBlank: false}},{text:'备案账号

',dataIndex:'beianzh',width:160,editor:{allowBlank: false}},{text:'

账号密码

',dataIndex:'beianzhpa',width:120,editor:{allowBlank: false}} 在这些数据中，将所有字段都列了出来，并且制定了editor中allowBlank的数据位flase,就是说，这些内容必须填写。

接下来，我们需要修改app/controller下的menu.js文件，增加一些功能，使其可以添加、删除信息。修改内容如下： 1. if (record.get('leaf')) { 2. var panel = Ext.getCmp(record.get('id')); 3. if(!panel){ 4. Ext.require(['Ext.grid.*']); 5. var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{ 6. clicksToMoveEditor: 1, 7. autoCancel: true 8. }); 9. panel = Ext.create(\,{ 10. store:record.get('stores'), 11. columns:record.get('columns'), 12. errorSummary:false, 13. title: record.get('text'), 14. id:record.get('text')+record.get('id'),

15. columnLines: true, 16. bodyPadding:0, 17. closable: true, 18. bbar: Ext.create('Ext.PagingToolbar', { 19. store: record.get('stores'), 20. displayInfo: true, 21. displayMsg: '显示 {0} - {1} 条，共计 {2} 条', 22. emptyMsg: \没有数据\ 23. }), 24. dockedItems: [{ 25. xtype: 'toolbar', 26. items: [{ 27. text: '增加信息', 28. iconCls: 'icon-add', 29. handler: function(){ 30. rowEditing.cancelEdit(); 31. var panelStore = this.up(\).getStore(); 32. var panelModel = this.up(\).getSelectionModel(); 33. panelStore.insert(0,panelModel); 34. rowEditing.startEdit(0, 0); 35. }

36. }, '-', { 37. itemId: 'delete', 38. text: '删除信息', 39. iconCls: 'icon-delete', 40. disabled: true, 41. handler: function(){ 42. var selection = panel.getView().getSelectionModel().getSelection()[0]; 43. var panelStore = this.up(\).getStore(); 44. if (selection) { 45. panelStore.remove(selection); 46. } 47. } 48. }, '-' ,{ 49. text:'刷新数据', 50. iconCls:'icon-refresh', 51. handler:function(){ 52. var panelStore = this.up(\).getStore(); 53. var currPage = panelStore.currentPage; 54. panelStore.removeAll(); 55. panelStore.load(currPage); 56. }

57. }] 58. }], 59. plugins: [rowEditing], 60. listeners: { 61. 'selectionchange': function(view, records) { 62. panel.down('#delete').setDisabled(!records.length); 63. } 64. } 65. }) 66. this.openTab(panel,record.get('id')); 67. }else{ 68. var main = Ext.getCmp(\); 69. main.setActiveTab(panel); 70. } 71. } 代码中，启用了插件rowEditing，增加了一个toolbar，上面添加了三个按钮，分别是添加信息，删除信息和刷新数据。添加信息的按钮，我们创建了一个handler，并且在其中获取了gird的Store和Model，并将其插入到grid的store中，删除信息的按钮中，设想这个按钮在没有选中任何行的时候，是不可用的，所以设置其disabled为true。还设置了handler，并且通过获取选择的行，将其从grid 的store中删

除。并且，我们为grid增加了一个监听selectionchange，这样，我们就可以在选择中一条数据后，让删除信息的按钮变的可用。

目前，当点击添加按钮并添如信息后，只是存在于grid的store中，并没有将数据更新到数据库中，删除信息也是一样。接下来，需要修改app/store下的bastore.js，使其可以更新到数据中。

bastore.js： 1. Ext.define('SMS.store.bastore', { 2. extend: 'Ext.data.Store', 3. requires: 'SMS.model.beianlistmodel', 4. model: 'SMS.model.beianlistmodel', 5. pageSize: 20, 6. remoteSort: true, 7. autoLoad:true, 8. proxy: { 9. type: 'ajax', 10. url: '/server/getbeian.asp', 11. reader: { 12. root: 'items', 13. totalProperty : 'total' 14. }, 15. simpleSortMode: true

16. }, 17. listeners:{ 18. update:function(store,record){ 19. var currPage = store.currentPage; 20. //alert(record.get(\ 21. Ext.Ajax.request({ 22. url:'/server/getbeian.asp?action=save', 23. params:{ 24. id : record.get(\), 25. kehu_name:record.get(\), 26. beianhao:record.get(\), 27. beianpass:record.get(\), 28. beianemail:record.get(\), 29. emailpass:record.get(\), 30. beianzh:record.get(\), 31. beianzhpa:record.get(\), 32. }, 33. success:function(response){ 34. store.removeAll(); 35. store.load(currPage); 36. } 37. });

38. }, 39. remove:function(store,record){ 40. var currPage = store.currentPage; 41. //alert(record.get(\ 42. Ext.Ajax.request({ 43. url:'/server/getbeian.asp?action=del', 44. params:{ 45. id : record.get(\) 46. }, 47. success:function(response){ 48. store.removeAll(); 49. store.load(currPage); 50. } 51. }); 52. } 53. }, 54. sorters: [{ 55. property: 'ID', 56. direction: 'DESC' 57. }] 58. });

代码中，为store增加了两个监听，update和remove，并且将数据通过AJAX发送到服务端，在服务端进行处理，这里，只使用了update和remove。store中还有个add方法，此方法也是增加一条数据，按照常理来说。这个方法才是增加数据，但是我使用了add方法之后，点击添加信息，就会添加一条空数据，索性就使用update方法，将id值也发送到服务端，在服务端进行处理，服务端处理流程是：接收id值，判断id值是否为空，如果为空，则新增数据，如果不为空，则更新数据。

至此，一个grid的功能全部完成了。而且本项目所有的功能，都是如此，这样，只要再数据库中插入相应的行，在app/store和app/model中建立相关的js就可以了。至于其他功能，就不在此一一例举了。

声明一点，这个开发笔记实施到最后，有一些东西已经脱离了MVC的范畴，而且也没想到六章内容就结束了这个项目。从文章一到六，只是起一个抛砖引玉的作用。由于Extjs4有很大的变动，所以任何基于Extjs4.x MVC的项目，都是摸着石头过河，一点一点积累起来的，并不是说我的这些文章起到了指导性的作用，而是实际开发过程中的一些体会和经验。所有项目，有很多种方法可以实现需求。

最后，希望大家能通过阅读这些开发笔记，都有所提高、进步！下面列出所有开发笔记的链接。

Extjs4开发笔记（一）——准备工作 Extjs4开发笔记(二)——框架的搭建

关于Extjs4开发笔记（二）的补充说明 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(五)——动态grid

源码下载：http://www.mhzg.net/a/201112/2011121517480473.html ExtJs与JQuery对比：Dom文档操作

2011-12-13 来源：cnblogs 作者：lipan (共0

条评论)

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的，一般做网站应用比较常见，可见块头小的优势。ExtJs比较庞大，它除了对基本的JS语法和HTML DOM操作方式的封装之外，还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势 现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的，一般做网站应用比较常见，可见块头小的优势。ExtJs比较庞大，它除了对基本的JS语法和HTML DOM操作方式的封装之外，还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。 注意一点：ExtJs4.0完全重新构建了一套新的体系，关于extjs 4.x组件的查找方式，请参阅：ComponentQuery。 1.上下文选择器对比 获取Id=\的DOM元素: [JQuery]

$(\

$(\ [ExtJs]

$(\

$(\

其实Ext.get(\与$(\还是有区别的，前者只会获取匹配的第一个元素，后者是匹配的元素集合。ExtJs的等价用法如下： [ExtJs]

Ext.select(\

Ext.select(\

下面是一个完整的比较代码： [ExtJs]

//Ext.Element类 :是ExtJs对dom对象的封装

//Ext.CompositeElement类：是ExtJs对dom对象集合的封装

//查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型 //该方法只能查Id，不支持选择器 Ext.get(\

//功能同上 Ext.fly(\

//查询Id=div1的元素的dom对象 Ext.get(\ //或者

Ext.getDom(\

//获取body元素的Ext.Element类型 Ext.getBody();

//返回当前HTML文档的Ext.Element类型 Ext.getDoc();

//查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型

Ext.select(\

//查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型

Ext.select(\

//查询属性title=d1的div,返回满足条件的dom节点集合 Ext.query(\

//Ext.Element类 :是ExtJs对dom对象的封装

//Ext.CompositeElement类：是ExtJs对dom对象集合的封装

//查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型 //该方法只能查Id，不支持选择器 Ext.get(\

//功能同上 Ext.fly(\

//查询Id=div1的元素的dom对象 Ext.get(\ //或者

Ext.getDom(\

//获取body元素的Ext.Element类型 Ext.getBody();

//返回当前HTML文档的Ext.Element类型 Ext.getDoc();

//查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型

Ext.select(\

//查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型

Ext.select(\

//查询属性title=d1的div,返回满足条件的dom节点集合 Ext.query(\

2.选择器语法简介

JQuery选择器支持CSS3选择符，ExtJs同样也提供支持，除此之外还

支持基本的XPath语法。下面分别讲解： 1)CSS3选择符

下面列举的命令是单个形式，都可以无限组合使用。 元素选择符： 任意元素

E 一个标签为 E 的元素

E F 所有 E 元素的分支元素中含有标签为 F 的元素

E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素 E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素 E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素 属性选择符：

@ 与引号的使用是可选的。例如：div[@foo='bar'] 也是一个有效的属性选择符。

E[foo] 拥有一个名为 “foo” 的属性

E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性 E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性 E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性 E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性 E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性 伪类：

E:first-child E 元素为其父元素的第一个子元素

E:last-child E 元素为其父元素的最后一个子元素

E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1开始的个数） E:nth-child(odd) E 元素为其父元素的奇数个数的子元素 E:nth-child(even) E 元素为其父元素的偶数个数的子元素 E:only-child E 元素为其父元素的唯一子元素

E:checked E 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框） E:first 结果集中第一个 E 元素 E:last 结果集中最后一个 E 元素

E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数） E:odd :nth-child(odd) 的简写 E:even :nth-child(even) 的简写

E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串 E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”

E:not(S) 一个与简单选择符 S 不匹配的 E 元素

E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素 E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素 E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素 CSS 值选择符：

E{display=none} css 的“display”属性等于“none” E{display^=none} css 的“display”属性以“none”开始

E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none”

E{display%=2} css 的“display”属性能够被2整除 E{display!=none} css 的“display”属性不等于“none” 2)XPath语法

下面通过几个例子来说明：

/html/body/div/div :从根目录开始找，找到正文的第二层全部DIV。 div/div :在全文匹配DIV元素，并获取包含子DIV的全部子DIV集合。 3.Ext.get和Ext.fly的区别：

通俗点讲，他们的作用都是一样的，都是获取元素。但是前者每次调用都会生成一个Ext.Element对象，开辟新的内存空间，而后者共享了一个公用的内存空间，每次调用都会覆盖前一次的信息。由于Ext.Element 比较庞大，后者的好处是可以节省资源。如果你获取的Ext.Element 不需要长期保持重复调用，用后者较为合理。下面通过一个例子来体现他们的区别：

//这样更新的是div1 var div1 = Ext.get(\ Ext.get(\

div1.update(\我想更新div1\

//将get替换成fly后....

//更新的却是div2 var div1 = Ext.fly(\ Ext.fly(\

div1.update(\我想更新div1\

//这样更新的是div1 var div1 = Ext.get(\ Ext.get(\

div1.update(\我想更新div1\

//将get替换成fly后....

//更新的却是div2 var div1 = Ext.fly(\ Ext.fly(\

div1.update(\我想更新div1\

我们发现，再次调用Ext.fly后，更新的是DIV2，而再次调用Ext.get不会影响更新的元素。 二、属性

注意：CSS类操作的几个方法相对于早期版本有变化之前是：

e.addClass(\[JQuery]

var e = $(\

//返回第一个匹配元素的title属性 alert(e.attr(\

//设置第一个匹配元素的title属性 e.attr(\

//移除第一个匹配元素的title属性 e.removeAttr(\ //CSS类

//给第一个匹配元素添加c2样式 e.addClass(\ //移除

e.removeClass(\ //轮回

e.toggleClass(\ //检查c2样式是否存在 e.hasClass(\

//Html //获取Html e.html(); //更新Html

e.html(\更新后的Html\ //值 e.val(); e.val(150);

var e = $(\

//返回第一个匹配元素的title属性 alert(e.attr(\

//设置第一个匹配元素的title属性 e.attr(\

//移除第一个匹配元素的title属性 e.removeAttr(\ //CSS类

var e = $(\ //e元素结束之前插入

e.first().append(\新内容\ //e元素开始之后插入

e.first().prepend(\新内容\ //e元素开始之前插入

e.first().before(\新内容\ //e元素结束之后插入 e.first().after(\新内容\ //包裹

e.eq(2).wrap(\ e.eq(2).unwrap(); //替换

e.eq(2).replaceWith(\被替换的\ //删除

e.eq(3).remove(); //清空标签内的html e.eq(0).empty();

[ExtJs]

var e = Ext.select(\ //插入

//分别在相对于文档e的四个位置插入html： e.first().insertHtml(\新内容\ e.first().insertHtml(\新内容\ e.first().insertHtml(\新内容\ e.first().insertHtml(\新内容\ //包裹 e.wrap({ tag: 'p' });

//用text1替换集合第五个元素 e.replaceElement(4, \

//替换用当前元素去替换掉div2标签 e.first().replace(\ //删除

e.first().remove();

//移除集合中第三个元素 e.removeElement(2, true);

var e = Ext.select(\ //插入

//分别在相对于文档e的四个位置插入html： e.first().insertHtml(\新内容\ e.first().insertHtml(\新内容\ e.first().insertHtml(\新内容\ e.first().insertHtml(\新内容\ //包裹 e.wrap({ tag: 'p' });

//用text1替换集合第五个元素 e.replaceElement(4, \

//替换用当前元素去替换掉div2标签 e.first().replace(\ //删除

e.first().remove();

//移除集合中第三个元素 e.removeElement(2, true); 六、CSS [JQuery]

var e = $(\

//设置样式

e.css(\ e.css(\

//设置高度 e.height(100); //获取宽度 e.width();

var e = $(\ //设置样式

e.css(\ e.css(\

//设置高度 e.height(100); //获取宽度 e.width();

本文来源：https://www.bwwdw.com/article/uytx.html