본문 바로가기
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..
정적 HTML form태그에서 메일보내기 : Google Apps Mail html에서 mailto를 사용하면, 구현은 물론 간단합니다만 outlook과 같은 쓸데없는 프로그램을 실행해 사용자에게 불편을 초래합니다. 아래와 같이 서버 없는 순수 HTML과 자바스크립트로 메일보내기를 구현할 수 있습니다.사용자는 계정에 로그인하고 메일을 보내는 귀찮음 대신 웹페이지의 양식대로만 입력해 쉽고 빠르게 메일을 보낼 수 있습니다. 아래 문서는 https://github.com/dwyl/html-form-send-email-via-google-script-without-server 를 번역한 것입니다.이곳에서도 보실 수 있습니다. 오역 및 오타는 댓글로 남겨주세요. Google Apps Mail을 사용해 정적 HTML Form에서 메일을 보내세요!백엔드 서버 없이 HTML Form을 사용하..
Java 날짜비교 Java 날짜비교compareTo()Date 클래스의 compareTo() 메소드는 현 Date 객체에 담긴 날짜와 파라미터로 들어온 Date 객체의 날짜를 비교하여결과에 따라 각각 -1/0/1 을 return 한다.12345 public int compareTo(Date anotherDate) { long thisTime = getMillisOf(this); long anotherTime = getMillisOf(anotherDate); return (thisTime 0 ) System.out.println( "day1 > day2" ); else if ( compare
HTML5 : 하이퍼링크 <a> HTML5 : 하이퍼링크 정의와 사용태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의한다.태그의 가장 중요한 속성(attribute)는 링크의 목적지를 나타내는 href 속성이다.기본적으로 링크는 모든 브라우저에서 다음과 같이 나타난다:방문하지 않은 링크는 파란색이다.방문한 링크는 밑줄이 그어지고 자주색이 된다.활성 링크에는 밑줄이 그어지고 빨간색이 표시된다.기본형1cs자주쓰는 속성href링크한 문서나 사이트의 주소를 입력한다.1cstarget링크한 내용이 표시될 때 현재 창 또는 새 창을 지정한다.1234현재창새창부모프레임전체화면cs_self : 기본값. 링크가 있는 화면이 열린다. _blank : 링크 내용이 새창이나 새 탭에서 열린다. _parent : 프레임을 사용했을 때..
HTML5 : 이미지 <img> 태그 HTML5 : 이미지 태그기본src 속성에 상대주소든 절대주소든 상관없이 이미지 주소를 넣으면 된다.닫는 태그가 없으며, 인터넷에서 존재하는 이미지 주소를 복사해 사용할 수도 있다.1cs대체텍스트 alt웹 접근성을 위해, 시각장애인 등 화면낭독기를 사용하는 사람들을 위한 대체텍스트다.이미지 경로가 잘못되었거나, 삭제되어 이미지가 표시되지 않을 경우에 표시되는 텍스트이기도 하다.1cs크기width와 height 속성을 이용한다. 입력하지 않으면 원래 이미지의 크기대로 표시된다. 크기를 조절해도 이미지의 용량은 바뀌지 않는다.1csheightheight 속성을 제대로 지정하지 않으면 사진이 찌그러지는 등의 역효과가 나타날 수 있다.width 속성만 지정하면 height 값은 원래 이미지의 비율에 맞춰 자동으..

티스토리툴바