HTML 파일에 Sencha 적용

2024. 7. 13. 15:57Javascript/Sencha

Sprng boot Security가 적용 안된 경우

# spring boot에서 한글깨지는 문제 해결을 위해서 설정
<meta charset="UTF-8">

# Ext를 참조하기 위해서 적용
<script type="text/javascript" src="/ext/build/ext-all.js"></script>

# Ext.getBody()를 적용하기 위해서 스크립트 보다 먼저 생성되어야 함
<body></body>

<script>
	Ext.create('Ext.panel.Panel', {
	    title: 'Hello',
	    width: 200,
	    html: '<p>World! 히히</p>',
	    renderTo: Ext.getBody()
	});
</script>

Sprng boot Security가 적용된 경우

에러 발생

response code가 302로 나오면 안됨

Refused to execute script from 'http://localhost:{port}/login' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.Understand this error
login:17 Uncaught ReferenceError: Ext is not defined
    at login:17:5

Ext를 참조하기위해서 '/ext/build/ext-all.js'를, 로그인 체크에서 제외시켜야 함

# before
	@Bean
	public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
		http.authorizeHttpRequests((requests) -> requests
				.requestMatchers("/", "home").permitAll()
				.anyRequest().authenticated())
			.formLogin((form) -> form
				.loginPage("/login")
				.permitAll())
			.logout((logout) -> logout.permitAll());
		return http.build();
	}

# after
	@Bean
	public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
		http.authorizeHttpRequests((requests) -> requests
				.requestMatchers("/", "home", "/ext/build/ext-all.js").permitAll()
				.anyRequest().authenticated())
			.formLogin((form) -> form
				.loginPage("/login")
				.permitAll())
			.logout((logout) -> logout.permitAll());
		return http.build();
	}

CSS 적용

<link rel="stylesheet" href="/classic/resources/theme-triton-all.css" />
<script type="text/javascript" src="/ext/build/ext-all.js"></script>
<body></body>
<script>
	Ext.create('Ext.Button', {
	    text: 'Click me',
	    renderTo: Ext.getBody(),
	    handler: function() {
	        alert('You clicked the button!');
	    }
	});
</script>

'Javascript > Sencha' 카테고리의 다른 글

theme css 파일 위치  (0) 2024.07.16
Ext에 property 추가  (0) 2024.07.16
Sencha Trouble Shooting  (0) 2024.07.13
Sencha ajax progress  (0) 2024.04.08
Sencha Message 처리  (0) 2024.04.01