Sencha theme 동적 적용
2024. 12. 15. 20:26ㆍJavascript/Sencha
index.html
link id값을 통해서 변경함
<!DOCTYPE HTML>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>Home</title>
<link id="dynamic-theme" rel="stylesheet" type="text/css" href="/resources/classic/theme-classic/resources/theme-classic-all.css">
<script type="text/javascript" src="/resources/js/ext-all.js"></script>
<script type="text/javascript" src="/resources/js/packages/charts/classic/charts.js"></script>
<script type="text/javascript" src="/resources/js/util.js"></script>
<script type="text/javascript" src="/resources/js/app.js"></script>
</head>
<body>
<div th:id="${_csrf.parameterName}" th:text="${_csrf.token}" style="display:none"></div>
</body>
</html>Application.js
dynamic-theme의 href 경로를 변경하여 동적 처리함
/**
* The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
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`;
const themeLink = document.getElementById('dynamic-theme');
console.log('themeLink: ', themeLink);
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);
} else {
console.error('Dynamic theme link element not found!');
}
}
console.log('Application launched');
setTheme('theme-classic');
setTimeout(() => setTheme('theme-aria'), 3000);
}
});'Javascript > Sencha' 카테고리의 다른 글
| Sencha main화면에서 Application.js의 함수를 호출하나? (0) | 2024.12.15 |
|---|---|
| Sencha theme 화면 layout 깨지는 문제 해결 (1) | 2024.12.15 |
| Sencha theme 적용 순서 (0) | 2024.12.15 |
| Sencha index.html 간단하게 만들기 (0) | 2024.12.15 |
| Sencha charts 패키지 사용하기 (0) | 2024.12.14 |