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

为什么80%的码农都做不了架构师？>>>   

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

转载于:https://my.oschina.net/u/1773772/blog/666988