[ExtJS5 Study Notes] section 29th sencha ext js 5.1.0 dynamically changes skin themes

[ExtJS5 Study Notes] section 29th sencha ext js 5.1.0 dynamically changes skin themes

 

 

Now, change the code in main. js and add the following content to the panel:

 

, {Xtype: 'combo ', width: '20140901', labelWidth: '40', fieldLabel: 'Theme', displayField: 'name', valueField: 'value ', // labelStyle: 'cursor: move; ', // margin: '5 5 5 5', queryMode: 'local', store: Ext. create ('ext. data. store', {fields: ['value', 'name'], data: [{value: 'neptune ', name: 'neptune theme'}, {value: 'neptune-touch', name: 'neptune touch theme '}, {value: 'crisp', name: 'crisp theme '}, {value: 'crisp-touch ', Name: 'crisp Touch theme '}, {value: 'classic', name: 'classic theme '}, {value: 'Gray', name: 'Gray theme '}]}), // value: theme, listeners: {select: function (combo) {var theme = combo. getValue (); varhref = 'ext/packages/ext-theme-'+ theme +'/build/resources/ext-theme-'{theme}'-all.css '; varlink = ext. fly ('Theme '); if (! Link) {link = Ext. getHead (). appendChild ({tag: 'link', id: 'Theme ', rel: 'stylesheet', href: ''}) ;}; link. set ({href: Ext. string. format (href, theme )});}}}

The main. js code should be as follows: (complete content)

 

 

/** * This class is the main view for the application. It is specified in app.js as the * autoCreateViewport property. That setting automatically applies the viewport * plugin to promote that instance of this class to the body element. * * TODO - Replace this content of this view to suite the needs of your application. */Ext.define('oaSystem.view.main.Main', {    extend: 'Ext.container.Container',    requires: [        'oaSystem.view.main.MainController',        'oaSystem.view.main.MainModel'    ],    xtype: 'app-main',        controller: 'main',    viewModel: {        type: 'main'    },    layout: {        type: 'border'    },    items: [{        xtype: 'panel',        bind: {            title: '{name}'        },        region: 'west',        html: '

• This area is commonly used for navigation, for example, using a tree component.

', Width: 250, split: true, tbar: [{text: 'click', handler: 'onclickclickclickclick'}, {xtype: 'combo', width: '123 ', labelWidth: '40', fieldLabel: 'Theme ', displayField: 'name', valueField: 'value', // labelStyle: 'cursor: move;', // margin: '5 5 5 5', queryMode: 'local', store: Ext. create ('ext. data. store', {fields: ['value', 'name'], data: [{value: 'neptune ', name: 'neptune theme'}, {value: 'neptune-tou Ch ', name: 'neptune Touch theme'}, {value: 'crisp ', name: 'crisp theme'}, {value: 'crisp-touch', name: 'crisp Touch theme '}, {value: 'classic', name: 'classic theme '}, {value: 'Gray', name: 'Gray theme '}]}), // value: theme, listeners: {select: function (combo) {var theme = combo. getValue (); var href = 'ext/packages/ext-theme-'+ theme +'/build/resources/ext-theme-'{theme}'-all.css '; var link = ext. fly ('Theme '); If (! Link) {link = Ext. getHead (). appendChild ({tag: 'link', id: 'Theme ', rel: 'stylesheet', href: ''}) ;}; link. set ({href: Ext. string. format (href, theme)}) ;}}] },{ region: 'center', xtype: 'tabpanel ', items: [{title: 'tab 1 ', html: 'content appropriate for the current navigation. '}]});

 

After a long struggle, I finally let it go. I have been using swapstylesheet. After reading this article occasionally, I think it's good. It's really successful.