Sencha theme 화면 layout 깨지는 문제 해결
2024. 12. 15. 20:50ㆍJavascript/Sencha
Link 사용시
프로그램에서 강제로 변경할 경우
theme를 변경하고, layout 전체를 다시 그려줘야 함
index.html
theme 관련 link가 없거나, href=""이어야지 layout이 안깨지고 정상 작동함
<!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="">
<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
/**
* 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`;
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');
}
});'Javascript > Sencha' 카테고리의 다른 글
| Sencha panel안의 items layout 정렬 (0) | 2024.12.15 |
|---|---|
| Sencha main화면에서 Application.js의 함수를 호출하나? (0) | 2024.12.15 |
| Sencha theme 동적 적용 (0) | 2024.12.15 |
| Sencha theme 적용 순서 (0) | 2024.12.15 |
| Sencha index.html 간단하게 만들기 (0) | 2024.12.15 |