Sencha main화면에서 Application.js의 함수를 호출하나?
2024. 12. 15. 23:33ㆍJavascript/Sencha
ASIS
정의: function setTheme(themeName)
호출: setTheme('theme-aria');
Ext.define('Home.Application', {
extend: 'Ext.app.Application',
name: 'Home',
// Load any required classes
requires: [
'Home.view.main.Main'
],
// Application launch logic
launch: function () {
function setTheme(themeName) {
const themePath = `/resources/classic/${themeName}/resources/${themeName}-all.css`;
let themeLink = document.getElementById('dynamic-theme');
console.log('themeLink: ', themeLink);
if (!themeLink) {
// If the <link> tag doesn't exist, create it
themeLink = document.createElement('link');
themeLink.id = 'dynamic-theme';
themeLink.rel = 'stylesheet';
themeLink.type = 'text/css';
// Append the newly created <link> tag to the <head> section
document.head.appendChild(themeLink);
console.log('Dynamic theme link element created.');
}
if(themeLink) {
console.log('herf: ', themeLink.getAttribute('href'));
if(themeLink.getAttribute('href') === themePath) {
console.log('Theme alraedy applied: ', themeName);
return;
}
themeLink.setAttribute('href', themePath);
console.log('Applied theme: ', themeName);
themeLink.onload = function() {
console.log('Theme CSS loaded. Refreshing components...');
Ext.ComponentQuery.query('component').forEach((component) => {
if(component.rendered) {
component.updateLayout();
if(component.getEl()) {
component.getEl().repaint();
}
}
});
};
} else {
console.error('Dynamic theme link element not found!');
}
}
console.log('Application launched');
setTheme('theme-aria');
}
});TOBE
정의: this. setTheme = function (themeName)
호출: this.setTheme('theme-aria');
Ext.define('Home.Application', {
extend: 'Ext.app.Application',
name: 'Home',
// Load any required classes
requires: [
'Home.view.main.Main'
],
// Application launch logic
launch: function () {
this.setTheme = function(themeName) {
const themePath = `/resources/classic/${themeName}/resources/${themeName}-all.css`;
let themeLink = document.getElementById('dynamic-theme');
console.log('themeLink: ', themeLink);
if (!themeLink) {
// If the <link> tag doesn't exist, create it
themeLink = document.createElement('link');
themeLink.id = 'dynamic-theme';
themeLink.rel = 'stylesheet';
themeLink.type = 'text/css';
// Append the newly created <link> tag to the <head> section
document.head.appendChild(themeLink);
console.log('Dynamic theme link element created.');
}
if(themeLink) {
console.log('herf: ', themeLink.getAttribute('href'));
if(themeLink.getAttribute('href') === themePath) {
console.log('Theme alraedy applied: ', themeName);
return;
}
themeLink.setAttribute('href', themePath);
console.log('Applied theme: ', themeName);
themeLink.onload = function() {
console.log('Theme CSS loaded. Refreshing components...');
Ext.ComponentQuery.query('component').forEach((component) => {
if(component.rendered) {
component.updateLayout();
if(component.getEl()) {
component.getEl().repaint();
}
}
});
};
} else {
console.error('Dynamic theme link element not found!');
}
}
console.log('Application launched');
this.setTheme('theme-triton');
}
});main화면에서 호출
Ext.getApplication().setTheme(newValue);
{
xtype: 'panel',
border: 0,
items: [
{
xtype: 'combobox',
fieldLabel: 'Theme',
store: [
'theme-classic',
'theme-aria',
],
value: 'theme-classic',
listeners: {
change: function (combo, newValue, oldValue, eOpts ) {
Ext.getApplication().setTheme(newValue);
},
}
}
],
},
'Javascript > Sencha' 카테고리의 다른 글
| Sencha Uncaught TypeError: c is not a constructor (0) | 2024.12.16 |
|---|---|
| Sencha panel안의 items layout 정렬 (0) | 2024.12.15 |
| Sencha theme 화면 layout 깨지는 문제 해결 (1) | 2024.12.15 |
| Sencha theme 동적 적용 (0) | 2024.12.15 |
| Sencha theme 적용 순서 (0) | 2024.12.15 |