.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 : '我是内容部分
', 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); } });