6.5 Ext.util.CSS 更好地操做css

<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");
    }
    
});