ext CSS样式



ext CSS样式

通过学习markup装饰部分，我们已经晓得，装饰与document的紧密联系下如何透过Ext Core较简便地取得数据。但进行document的布局又如何编排呢？是不是有一种方法可以控制布局也可以控制document的样式呢？答案便是用Cascading Style Sheets (CSS)处理。CSS正是用来页面可视化信息和布局的语言。Ext Core在方面真的是让我们用户感觉好使好用，易如反掌，——直接修改它就行了。 <style type="text/css"> myCls { color: #F00; } </style> ... <div type="myCls">您好！</div> 上一例中我们赋予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();