ExtJS中的CSS操作详解

本文档是关于Extjs的简单实用手册，主要讲解了如何处理CSS类以及Extjs的基本使用方法。作者是李炬宏，日期为2009年9月29日。 在Extjs中，CSS的处理是一部分重要的功能，用于动态地管理和改变页面元素的样式。以下是一些关键的函数和方法： 1. `Ext.addClass()`: 这个函数用于向指定元素添加一个或多个CSS类。例如，`Ext.fly('test1').addClass('test')` 将会给ID为`test1`的元素添加`test`类。 2. `Ext.radioClass()`: 此方法用于确保元素两侧没有其他相同类名的元素。如`Ext.fly('test1').select('ul:nth-child(2)').radioClass('test1')`将取消所有相邻的具有`test1`类的子元素。 3. `Ext.removeClass()`: 用于删除元素的CSS类。例如，`Ext.fly('test1').select('li:first').removeClass()`将删除第一个`li`元素的所有类。 4. `Ext.toggleClass()`: 这个方法可以交替添加或移除一个类。例如，`Ext.fly('test1').select('li:last').toggleClass('test1')`会在`li:last`元素上切换`test1`类。如果已经存在，它会移除；如果不存在，它会添加。 5. `Ext.hasClass()`: 该函数用于检查元素是否包含特定的CSS类。例如，`Ext.fly('test1').hasClass('test')`会返回一个布尔值，表示ID为`test1`的元素是否包含`test`类。 6. `Ext.replaceClass()`: 这个方法允许你替换元素的一个类为另一个类。例如，`Ext.fly('test1').replaceClass('t1', 't2')`会将`t1`类替换为`t2`类。 除了CSS处理，文档还提到了Extjs的基本使用，它是一个功能丰富的JavaScript库，支持DOM操作、Ajax交互、事件处理、动画效果和模板机制。引用Extjs时，需要先引入base包，然后引入core包（product版或debug版）。`Ext.get()`和`Ext.fly()`用于获取DOM元素，而`Ext.select()`则提供了强大的CSS选择器功能，可以用来选取特定的DOM元素。 例如，`Ext.select('*')`将选取所有元素，`Ext.select('div>span')`则会选取所有直接位于`div`元素下的`span`元素。此外，还可以使用属性选择符来筛选元素，如`Ext.select('tr[ref]')`将选取所有具有`ref`属性的`tr`元素。 这个手册提供了一个基础的Extjs教程，涵盖了CSS操作和基本的DOM选择，对于初学者和开发者来说是很好的参考资料。