[Sencha&ExtJS] ExtJS 기초.8 - 폼 필드 (xtype: textfield / filebutton / numberfield)

폼 필드 (form  필드)

일반적으로  <input> 태그 형식을 사용한다.

<input type="text"> xtype: 'textfield'

<input type="file">  xtype: 'filefield'

<input type="password"> xtype: 'textfield', inputType:'password'

<input type="checkbox"> xtype: 'checkbox

<textarea> xtype: 'textarea'

value : 'yes'는 입력값을 표시

fileLavel:'text' 은 입력창 앞에 오는 Label 형식으로 쓰인다.

* 슬라이더 / 컬러피커 등의 다양한 유요한 폼필드는 Plug 형태의 클래스를 적용해서 사용이 가능하다.

폼 패널을 이용한 Server 데이터 전송은  따로 작업이 필요하다.

SelectBox와 동일한 콤보 박스는 Store라는 데이터저장소 개념의 이해가 필요하다.

Ext.onReady(function(){

Ext.create('Ext.Panel',{

title : 'Default Form Field',

items : [{

xtype : 'textfield',

width : 700,

fieldLabel : 'text'

},{

xtype : 'textfield',

inputType : 'password',

width : 700,

fieldLabel : 'password'

},{

xtype : 'filefield',

width : 700,

fieldLabel : 'file'

},{

xtype : 'filebutton',

text : 'upload button'

},{

xtype : 'numberfield',

width : 700,

fieldLabel : 'number'

},{

xtype : 'datefield',

width : 700,

fieldLabel : 'date',

maxValue: new Date()

},{

xtype : 'timefield',

width : 700,

fieldLabel : 'time'

},{

xtype : 'textarea',

width : 700,

fieldLabel : 'textarea'

},{

xtype : 'checkbox',

fieldLabel : 'checkbox',

value : 'yes'

},

{

xtype : 'panel',

layout : 'hbox',

items : [{

       xtype: 'radiofield',

       name: 'radio1',

       value: 'M',

       boxLabel: 'Man',

       fieldLabel : 'Sex'

 }, {

       xtype: 'radiofield',

       name: 'radio1',

       value: 'W',

       boxLabel: 'Woman'

  }]

},

// Editor 창

{

xtype : 'panel',

layout : 'fit',

title : 'editor',

items : [

{

xtype : 'htmleditor'

}

               ]

},

// 한 라인에 같이 들어가기 위해서는 

// panel에 두개의 items형식으로 추가해 줘야 한다.

{

xtype : 'panel',

layout : 'fit',

title : 'datepicker',

layout : 'hbox',

items : [

{

xtype : 'datepicker'

},{

xtype : 'monthpicker'

}

          ]

}],

renderTo : Ext.getBody()

})

})

기본 폼 예제

출처: http://mongodev.tistory.com/15