본문 바로가기

JavaScript

ExtJS : MessageBox ExtJS : MessageBoxalert을 비롯한 여러 메시지창에 대해 알아본다.사용하기 전에, ExtJS에서 쓰이는 메시지창을 불러오기 위한 Ext.Msg 는 싱글톤 인스턴스singleton instance기 때문에 create()를 사용할 필요가 없다.따라서 사용하고자 하는 곳에서 곧바로 불러오면 된다.alert기본 alert 창이다. JavaScript의 alert()은 확인버튼을 누르기 전까지 다음 라인의 동작이 이루어지지 않지만Extjs의 alert은 사용자의 반응을 기다리지 않는다. 즉 다음 로직이 곧바로 실행된다. 따라서 따로 function을 구현해 return으로 제어해야 하는 등의 작업이 필요하다. 타이틀과 메시지 내용을 각각 파라미터로 넣으면 된다.1234Ext.onReady(fun..
ExtJS : Buttons ExtJS : Buttons기본 버튼들과 크기조절, 버튼에 아이콘 삽입 등에 대해 알아본다.Preview레이아웃과 버튼을 조합해서 아래와 같이 eclipse UI를 비슷하게 만들어보자.layoutborder를 이용해 레이아웃을 잡고, 위에 메뉴역할을 할 버튼 몇 개를 넣었다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758Ext.onReady(function(){ Ext.create('Ext.container.Viewport',{ layout:'border', renderTo: Ext.getBody(), items:[{ xtype: 'panel', height:1..
ExtJS : 자주쓰이는 Component별 config / event ExtJS : config / event간단한 이벤트에 대해 알아본다. 먼저 다음과 같은 구조를 그려보자. 지난 포스팅처럼 layout: 'border' 와 region 속성을 이용해 그릴 수 있다. 123456789101112131415161718192021222324252627282930Ext.onReady(function(){ Ext.create("Ext.container.Viewport", { renderTo: Ext.getBody(), border: true, layout: 'border', items:[{ xtype: 'panel', region: 'west', flex:1, border:true },{ xtype: 'panel', region: 'center', layout: 'border'..
ExtJS : 레이아웃 속성 ExtJS : 레이아웃 속성지난 포스팅에서 레이아웃 속성 중 'fit' 과 'border' 속성에 대해 알아봤다. fit은 가득 채우기, border는 가득 채운 상태에서 item들의 레이아웃을 나누는 속성이었다. 추가적으로 쓰이는 레이아웃 속성에는 centerabsoluteaccordioncardhbox/vbox등등이 있는데, 하나씩 예를 보자.center부모패널의 layout 속성에 center를 부여하면, 자식 패널은 브라우저 화면 가운데 위치하며 브라우저 크기와 관계없이 가운데 위치하는 반응형이 된다. 12345678910111213141516171819Ext.onReady(function(){ Ext.create("Ext.container.Viewport", { renderTo: Ext.getB..
ExtJS : 기본문법 & 레이아웃 ExtJS : 기본문법 & 레이아웃Basic예를들어 HTML에서 다음과 같은 코드가 있다고 가정하자.1234 Colored by Color Scriptercs 비유하자면 이것은 라는 큰 도화지에 태그 2개를 그린 것이다.ExtJS에서는 실제로 태그 안에 아무것도 넣지 않지만, app.js에 코드를 작성하면 미리 정의되어 있는 컴포넌트들이 자동으로 삽입되어 index.html에 보여지게 되어 있다. 즉 에 panel / viewport와 같이, ExtJS에서 사용되는 도화지를 하나 더 올리고, 미리 정의해둔 컴포넌트를 가져다가 쓰는 것이라 요약할 수 있다.Panel패널은 레이아웃을 구성할 때 빈번하게 쓰이는 컨테이너로 하위 구성요소를 포함할 수 있다.쉽게말해 판떼기를 만든다.Panel is a contai..
ExtJS : 테마변경 / HelloWorld ExtJS : 테마변경 / HelloWorldTheme테마는 app.json에서, classic과 modern 의 theme 부분을 각각 수정하면 간단히 테마를 변경할 수 있다.1234567891011121314151617181920212223 "builds": { "classic": { "toolkit": "classic", "theme": "theme-triton", "sass": { "generated": { "var": "classic/sass/save.scss", "src": "classic/sass/save" } } }, "modern": { "toolkit": "modern", "theme": "theme-material", "sass": { "generated": { "var": "mode..
자바스크립트 Ajax, 비동기방식 아이디 유효검사 Ajax로 비동기방식 아이디 유효검사하기 이전 포스팅: 자바스크립트 Ajax를 이용한 오픈API 활용 (이런거 가능) HTML파일내 태그 안에 다음과 같은 태그들을 작성한다.아이디를 받을 과 이벤트를 줄 , 실제로 텍스트를 띄워줄 태그를 작성했다. click 비동기통신을 위한 Ajax를 자바스크립트 안에 작성한 후 url에 실제 통신할 서블릿파일 경로를 넣는다. (같은 폴더에 존재해 상대경로로 이름만 넣어주었다) IdCheck.html function idCheck(){ $.ajax({ url : "idCheckServlet", success : function(data){ alert(data); } }); } click 성공하면 url에 의해서 idCheckServlet.java로 페이지가 넘어갈 것이..
자바스크립트 Ajax를 이용한 오픈API 활용 Ajax란 비동기적(Asynchronous)인 웹 어플리케이션을 제작하기위한 웹개발기법으로, 클라이언트 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. Asynchronous JavaScript and XML 의 줄임말인데, 요즘은 XML을 사용하지 않고 거의 대부분 json을 사용합니다.Ajaj 라고 이름을 바꿔야 할까요? 사용자 입장에서는 비동기통신이 화면갱신도 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경(착각)을 느낄 수 있습니다. 다만 동일출처 정책으로 인해 다른 도메인과 통신이 불가하며 (서버단에서 설정하거나, 브라우저 설정을 변경해 가능) 요청 남발시 서버에 부하가 늘 수 있고, 동적화면구성으로 개발자의 구현이 복잡하다는 단점 등이 있..

티스토리툴바