본문 바로가기

extjs

ExtJS 6 Universial, Classic, Modern ExtJS 6 버전부터 ExtJS와 Touch가 통합되었다.ExtJS = ClassicTouch = Modern그냥 generate app을 하면 Universial Mode로 ExtJS와 Touch가 통합된 형태이고 각각 개별로 사용하려면 -classic / -modern 옵션을 줘서 생성을 해야 한다. Universial Modesencha generate app Myapp ~/Myapp Classic onlysencha generate app -classic Myapp ~/Myapp Modern onlysencha generate app -modern Myapp ~/Myapp 더보기
Grid row별 Combobox 필터링 https://fiddle.sencha.comSencha Fiddle에 복사해서 붙여넣기 하면 됩니다.Ext.application({ name : 'Fiddle', launch : function() { Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: Ext.create('Ext.data.Store', { fields: ['combo', 'val'], data: [{combo: 1, val: 1},{combo: 2, val: 2}] }), columns: [{ text: 'ComboColumn', dataIndex: 'combo', flex: 1, editor: { xtype: 'combobox', displayField: 'name', v.. 더보기
Grid group Header(colspan) Flex 문제 Grid에서 Group header(colspan)을 사용하게 되면 한가지 문제점이 발생한다. { Ext.application({ name: 'Fiddle', launch: function () { Ext.create('Ext.data.Store', { storeId: 'simpsonsStore', fields: ['name', 'email', 'phone', 'type'], data: { 'items': [ { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224", "type": "Child" }, { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234", "t.. 더보기
ExtJS 공통 ComboBox ExtJS로 공통 콤보박스를 구현하였습니다. Ajax로 콤보박스를 가져올 수 있는 URL이 있다는 가정하에 만들었고 사용방법은 아래코드를 보시면 됩니다. { xtype: 'commcombo', cdKey: 'DB에서 읽어올 코드의 PK', addAll: true /*default false true로 하면 전체 항목이 첫번째 콤보에 들어감.*/ } 전체 소스입니다. Ext.define('Ext.ux.CommCombo',{ extend: 'Ext.form.field.ComboBox', alias: 'widget.commcombo', editable: false, queryMode: 'local', valueField: 'cd_key', displayField: 'cd_nm', addAll: false, c.. 더보기
EXTJS 그리드 행 높이 변경 아래와 같이 CSS에 클래스를 추가합니다. .my-grid-row-class{height:40px;vertical-align:middle;} Grid Config값에 getRowClass를 사용하여 CSS에 추가한 클래스를 리턴하면 각 행별로 해당 클래스가 추가 됩니다. viewConfig: { getRowClass: function(record, rowIndex, rowParams, store){ return 'my-grid-row-class'; } }, 더보기
Extjs clearListeners EXTJS 개발중 특정 이벤트를 오버라이드 하여 사용하는 부분이 있었는데 해당 이벤트를 필요에 따라 중지를 해야하는 경우가 발생합니다.오브젝트.events['이벤트명'].clearListeners();위와 같이 clearListeners()를 하용하면 해당 이벤트가 발행하지 않게 됩니다. 더보기
그리드 칼럼에 HTML 태그 내용 보여주기 EXTJS 그리드 칼럼에 HTML 태그 내용을 입력하면 입력한 태그 내용대로 화면에 표시가 됩니다.이런경우 태그값을 그대로 보여주고 싶다면해당 칼럼의 config 값에 renderer: 'htmlEncode' 를 추가하면 태그값을 그대로 표시해 줍니다. 더보기
EXTJS Ext.application 주의점 Ext.application 에서 name속성을 지정하는데 이때 특수문자를 사용하면 오류남.. ㅠ.ㅠEXTJS 버그로 보이는 듯 한데 딱히 눈에 띄는 오류가 아니라 model 이나 store를 이상하게 로드가 안됨. 더보기
Extjs ckEditor 사용하기 아래에 사용된 소스는 Sencha.com에서 가져왔습니다.Extjs 4에서 적용가능.기존 소스에는 아래와 같이 되어 있는데 작동을 안해서 setupCkEditor : function(){ Ext.applyIf(this.initialConfig.ckEditorConfig,{ resize_enabled:false, base_path:'ckeditor/', toolbarStartupExpanded:false, shiftEnterMode:CKEDITOR.ENTER_P, skin:'office2003', extraPlugins:'codemirror' }); 이런식으로 변경 setupCkEditor : function(){ var editor = CKEDITOR.replace(this.inputEl.id, { re.. 더보기

티스토리툴바