2012-02-09 12:56 

543人阅读 

(0) 

 

 

ext CSS样式

2009-06-08 17:37

通过学习markup装饰部分，我们已经晓得，装饰与document的紧密联系下如何透过Ext Core较简便地取得数据。但进行document的布局又如何编排呢？是不是有一种方法可以控制布局也可以控制document的样式呢？答案便是用处理。CSS正是用来页面可视化信息和布局的语言。Ext Core在方面真的是让我们用户感觉好使好用，易如反掌，——直接修改它就行了。

...
          
           您好！
          

上一例中我们赋予div元素“您好”的文本和让其颜色为红色（#F00）。

我们已经晓得Firebug，可以为我们带来页面开发上的种种便利。凡页面中的任意一元素上面右击，选择“Inspect Element”（检测元素），弹出Firebug可以观察到dom树中真实情况，该元素是定义在哪里的。Dom树右边的面板就是对应该元素身上的样式。

如果你未曾熟悉Firebug的话，暂时放下这块建议先学习一下它。它仿佛就是Web开发的高级示波器！心血来潮地修改站点的样式抑或是调试站点的样式，“Inspect Element”功能都贡献殊大。回到Ext中，我们看看Ext Core中有哪些方法是为修改CSS所服务的。

• addClass
  轻松地为一个元素添加样式：

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

  //为元素添加'myCls'在所有侧边元素上删除'myCls'样式// all sibilings.Ext.fly('elId').radioClass('myCls');
• removeClass
  移除元素身上一个或多个的CSS类。

  Ext.fly('elId').removeClass('myCls'); //  移除元素的样式
• toggleClass
  轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。

  Ext.fly('elId').toggleClass('myCls'); //  加入样式Ext.fly('elId').toggleClass('myCls'); //  移除样式Ext.fly('elId').toggleClass('myCls'); //  再加入样式
• hasClass
  检查某个CSS类是否作用于这个元素身上。

  if (Ext.fly('elId').hasClass('myCls')) { //  是有样式的……}
• replaceClass
  在这个元素身上替换CSS类。

  Ext.fly('elId').replaceClass('myClsA', 'myClsB');
• getStyle
  返回该元素的统一化当前样式和计算样式。

  var color = Ext.fly('elId').getStyle('color');var zIndx = Ext.fly('elId').getStyle('z-index');var fntFmly = Ext.fly('elId').getStyle('font-family');// ... 等等
• setStyle
  设置元素的样式，也可以用一个对象参数包含多个样式。

  Ext.fly('elId').setStyle('color', '#FFFFFF');Ext.fly('elId').setStyle('z-index', 10);Ext.fly('elId').setStyle({ display : 'block', overflow : 'hidden', cursor : 'pointer'});// 带有动画的变换过程Ext.fly('elId').setStyle('color', '#FFFFFF', true);// 带有0.75秒动画的变换过程Ext.fly('elId').setStyle('color', '#FFFFFF', {duration: .75}); // ... 等等
• getColor
  为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。

  Ext.fly('elId').getColor('background-color');Ext.fly('elId').getColor('color');Ext.fly('elId').getColor('border-color');// ... 等等
• setOpacity
  设置元素的透明度。

  Ext.fly('elId').setOpacity(.5);Ext.fly('elId').setOpacity(.45, true); // 动画// 附有半秒的动画过程Ext.fly('elId').setOpacity(.45, {duration: .5});
• clearOpacity
  清除这个元素的透明度设置。

  Ext.fly('elId').clearOpacity();