본문 바로가기

JavaScript/ ExtJS

ExtJS : TreePanel / Tree Store Extjs : TreePanel / Tree Store 이해Preview 트리 패널(Tree panel)은 사진처럼 뎁스별로 어떠한 기능을 컴포넌트화/구현하는 데 사용된다.공식 docs의 설명:The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore.TreePanels support multiple columns through the columns configuration.By default a TreePanel contains a single column which uses the text Field of the store's..
ExtJS : Form Field ExtJS : Form Field폼필드는 그냥 선언해서 갖다 쓰면 된다. 구구절절 써놓는 것보다 그냥 공식문서 보는게 더 좋다.기본적으로 선언만 해도 validation check가 이루어져서 편한 듯. ExtJS Docs : FormsExtJS Kitchen Sink 1234567891011121314151617181920212223242526272829303132333435363738394041424344Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ width:500, height:500, title:"폼필드", renderTo:Ext.getBody(), items:[{ xtype: 'textfield', allowBlank : false, empt..
ExtJS Window Component / Tap Panel ExtJS Window Component / Tap Panelwindow 컴포넌트는 응용프로그램 창으로 사용되기 위한 특수패널이다. 사이즈 조절과 최대/최소화 등이 가능하다.Windows can also be linked to a Ext.ZIndexManager or managed by the Ext.WindowManager to provide grouping, activation, to front, to back and other application-specific behavior.By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.선언Ext.windo..
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..

티스토리툴바