6.5 Ext.util.CSS 更好地操作css_html/css_WEB-ITnose

<div class="box">        <div class="w_320" id="myPanel"></div>        <div class="w_320" id="myPanel1"></div></div>

.box { padding:50px 0 0 50px; }* { padding:0; margin:0; }.w_320 { width:320px; float:left; margin-right:15px;margin-bottom:15px; }.my-foo-trigger { border-radius:5px; }

Ext.onReady(function(){        //6.5 Ext.util.CSS 更好地操作css        //6.5.1 createStyleSheet(String cssText,String id) 自动创建一个样式表供html使用    //cssText : .myClass(color:blue;)  id : 将指定创建的css绑定到一个id        //6.5.2 getRule() 通过指定的css名称查询css规则        var myPanel = new Ext.Panel({        title : '样式表的创建和获取',        width : 320,        height : 210,        renderTo : 'myPanel',        frame : true,        html : '<div class="myClass" style="height:160px;padding:5px">我是内容部分</div>',        buttons : [{                text : '添加样式',                handler : addSs            },{                text : '移除样式',                handler : reSs            }        ]    });    //创建    Ext.util.CSS.createStyleSheet(".myClass{color:blue}","the");    //获取样式规则    var cssObj = Ext.util.CSS.getRule(".myClass",true);    console.info("颜色:"+cssObj.style.color);        //6.5.3 swapStyleSheet() 动态改变页面的风格    var themes = [        {'theme':'gray风格','css':'theme-gray/resources/theme-gray-all.css'},        {'theme':'classic风格','css':'theme-classic/resources/theme-classic-all.css'},        {'theme':'crisp风格','css':'theme-crisp/resources/theme-crisp-all.css'},        {'theme':'triton风格','css':'theme-triton/resources/theme-triton-all.css'},        {'theme':'neptune风格','css':'theme-neptune/resources/theme-neptune-all.css'},        {'theme':'aria风格','css':'theme-aria/resources/theme-aria-all.css'}    ];    //创建主体数据模型    Ext.define('Theme',{        extend: 'Ext.data.Model',        fields : ['theme','css']    });    //创建主体数据源    var themeStore = Ext.create('Ext.data.Store',{        model : 'Theme',        data : themes    });    var themeChange = Ext.create('Ext.form.ComboBox',{        id : 'themeChange',        width : 180,        labelWidth : 60,        labelSeparator : ': ',        fieldLabel : '样式选择',        store : themeStore,//数据源        editable : false,        triggerAction : 'all',//单击触发会显示全部数据        displayField : 'theme',        valueField : 'css',        queryMode : 'local',//本地模式        value : 'theme-gray/resources/theme-gray-all.css',//默认风格        listeners : {            'collapse' : function(){                Ext.util.CSS.swapStyleSheet('theme','plugin/ext-6.0.0/build/classic/'+this.getValue());            }        }    });    //定义panel    Ext.create('Ext.form.FormPanel',{        title : 'Ext.form.ComboBox本地数据源示例',        renderTo : 'myPanel1',        bodyStyle : "padding:5px;",        frame : true,        height : 210,        width : 320,        defaults : {            labelSeparator : ': ',            labelWidth : 70,            width : 200,            labelAlign : 'left'        },        items : themeChange    });        //6.5.4    removeStyleSheet() 移除样式规则    //创建样式规则    function addSs(){        Ext.util.CSS.createStyleSheet(".myClass{color:blue}","the");    }    //移除样式规则    function reSs(){        Ext.util.CSS.removeStyleSheet("the");    }    });