Ext.onReady(function () {
Ext.create("Ext.container.Viewport", {
layout : 'border',
renderTo : Ext.getBody(),
xtype : 'buttons-basic',
requires: [
'Ext.layout.HBox',
'Ext.layout.VBox',
'Ext.Button'
],
items : [{
xtype : 'panel',
width : 1533,
height : 1000,
title : '연습장',
layout : 'border',
items : [{
xtype : 'panel',
region : 'north',
border : 'true',
title : 'north-panel',
height : 100,
border : 'true',
layout : 'hbox',
marign : '10 20',
autoSize : true,
items : [{
xtype : 'component',
cls : 'button-group-label button-group-right',
padding : '25 10 0 0 ',
width : 75,
html : 'Default',
}, {
xtpye : 'container',
cls : 'button-group',
flex : 1,
defaultType : 'button',
defaults : {
margin : '0 10'
},
minHeight : 55,
layout : {
type : 'hbox',
align : 'middle',
pack : 'space-around'
},
items : [{
margin : '0 10 0 20',
text : 'Normal',
handler : function(){
Ext.Msg.alert('Normal', "NormalButton click");
}
},
{
text : 'Badge',
badgeText : '2',
handler : function(){
Ext.toast({
html : "토스트경고메시지",
closable : false,
align : 'br'
});
}
},{
text : 'Disabled',
margin : '0 20 0 10',
disabled : true
}]
},{
xtype : 'combo',
editable : false,
value : '해당 값을 선택해주세요',
width : 300,
displayField : 'key',
valueField : 'value',
store : {
fields : ['key', 'value'],
proxy : {
type : 'ajax',
url : '/data/combo.json',
reader : {
type : 'json',
rootProperty : 'data'
}
}
}
}]
}, {
xtype : 'panel',
region : 'center',
border : true,
title : 'center-panel',
height : 300,
layout : 'fit',
items : [{
xtype : 'grid',
columns : [{
text : '번호',
flex : 1,
dataIndex : 'column1'
},{
text : '이름',
flex : 1,
dataIndex : 'column2'
},{
text : '지역',
flex : 1,
dataIndex : 'column3'
},{
text : '성별',
flex : 1,
dataIndex : 'column1'
},{
text : '나이',
flex : 1,
dataIndex : 'column2'
}],
store : {
autoLoad : true,
fields : ['column1', 'column2', 'column3'],
proxy : {
type : 'ajax',
url : '/data/grid.json',
reader : {
type : 'json',
rootProperty : 'data'
}
}
}
}]
},{
xtype : 'panel',
title : 'south-panel',
region : 'south',
flex : 1,
items : [{
xtype : 'treepanel',
root : {
text : 'TreePanel',
expanded : false,
children : [{
text : '주술사',
expanede : false,
children : [{
text : '추천사냥터'
},{
text : '인기글'
},{
text : '쿠폰번호',
children : [{
text : '받아라 쿠폰 팍씨~',
leaf : true
}]
}]
},{
text : '도사'
}, {
text : '도적'
}, {
text : '전사'
}, {
text : '격투가'
}]
}
}]
}]
}]
})
})
/*
* 그리드 페이징 및 버퍼스토어 적용하기
*
* */
//Ext.onReady(function(){
// Ext.create("Ext.panel.Panel", {
// width : 800,
// height : 500,
// renderTo : Ext.getBody(),
// layout : 'fit',
// items : [{
// xtype : 'grid',
// columns : [{
// text : '시',
// dataIndex : 'si',
// flex : 1
// },{
// text : '군구',
// dataIndex : 'gungu',
// flex : 1
// },{
// text : '동',
// dataIndex : 'dong',
// flex : 1
// }],
// store : Ext.create("Ext.data.BufferedStore", {
// autoLoad : true,
// fields : ['si', 'gungu', 'dong'],
// pageSize: 1,
// proxy : {
// type : 'ajax',
// url : '/data/paging.jsp',
// reader : {
// type : 'json',
// rootProperty : 'data'
//
// }
// }
// })
// }]
// })
//})
// store : {
// autoLoad : true,
// fields : ['si', 'gungu', 'dong'],
// pageSize: 1,
// proxy : {
// type : 'ajax',
// url : '/data/paging.json',
// reader : {
// type : 'json',
// rootProperty : 'data'
// }
// }
// },
// //bottom toolbar
// bbar : {
// xtype : 'pagingtoolbar',
// plugins : 'ux-slidingpager',
// displayInfo : true
// }
//tree-Panel -store 이용을 할때
/*
* text : button 컴포넌트처럼 문구출력할 때 필요한 속성
* expanded : 확장여부에 대한 속성 (true,false) - children이랑 패키지적용을 해야함
* children : json array형태이고 text/ expanded / childeren /leaf 로 depth
* leaf : true - 마지막 노드다 -> 파일아이콘 출력
*
* */
//Ext.onReady(function() {
// Ext.create("Ext.panel.Panel", {
// width : 500,
// height : 500,
// renderTo : Ext.getBody(),
// items : [{
// xtype : 'treepanel',
// store : {
// root : {
// text : 'Servers',
// expanded : true
// },
// proxy : {
// type : 'ajax',
// url : '/data/tree.json',
// reader : {
// type : 'json'
// }
// }
//
// }
// }]
// })
//});
////tree-Panel -store 이용을 안할 때
//Ext.onReady(function() {
// Ext.create("Ext.panel.Panel", {
// width : 500,
// height : 500,
// renderTo : Ext.getBody(),
// items : [{
// xtype : 'treepanel',
// //root아래에서 depth 해주면된다
// root : {
// text : 'Servers',
// //자동으로 펼쳐져있냐(true), 안펼쳐져있냐(false)
// expanded : false,
// //하위폴더생성하기위해 children 속성을 줘야함
// children : [{
// text : '서버1',
// expended : false,
// children :[{
// text : '테스트서버1',
// leaf : true
// }]
// },{
// text : '서버2',
// expanded : false,
// children : [{
// text : '한국2',
// leaf : true
// }, {
// text : '한국1',
// leaf : true
// }]
// },{
// text : '서버3',
// //현재 depth에 끝이다 ->폴더구조
// leaf : true
// }]
// }
// }]
// })
//})
//Ext.onReady(function () {
// Ext.create("Ext.panel.Panel", {
// width : 300,
// height : 300,
// renderTo : Ext.getBody(),
// items : [{
// xtype : 'combo',
// displayField : 'key',
// valueField : 'value',
// store : {
// fields : ['key' ,'value'],
// //proxy는 원격에서 데이터를 가져오는거 mvc에서 값 가지고오는거라고생각하자
// proxy : {
// type : 'ajax',
// url : '/data/combo.json',
// //reader 는 getMapping이라 생각하자 crud에서 read속성에 해당한다
// reader : {
// type : 'json',
// //rootProperty는 정보가 담겨져있는 최상단 key값을 선언해줘야한다. -> /data/combo,json에 최상단에 key값이 data라서 data라고 선언
// rootProperty : 'data'
// }
// }
// }
// }, {
// xtype : 'grid',
// columns : [{
// text : '컬럼1',
// dataIndex : 'column1'
// },{
// text : '컬럼2',
// dataIndex : 'column2'
// },{
// text : '컬럼3',
// dataIndex : 'column3'
// }],
// store : {
// autoLoad : true,
// fields : ['column1','column2','column3'],
// proxy : {
// type : 'ajax',
// url : '/data/grid.json',
// reader : {
// type : 'json',
// rootProperty : 'data'
// }
// }
// }
// }]
// })
//});
/*
*
* <select>
* <option>test</option>
* <option>test</option>
* <option>test</option>
* <option>test</option>
* </select>
*
*
* tr은 그리드에서 datastore에서 역할
* <table>
* <tr>
* <td>
* test1
* </td>
* </tr>
* </table>
*
* */
// Ext.create("Ext.panel.Panel", {
// width : 300,
// height : 300,
// title : 'datastore이해',
// renderTo : Ext.getBody(),
// items : [{
// xtype : 'combo',
// editable : false,
// value : '값을 설정하세요',
// displayField : 'test1',//보여주기만 하는 값
// valueField : 'test2',// 실제 데이터로 넘어가는 값
// //Ext.data.Store
// store : {
// fields : ['test1', 'test2'],
// data : [{
// test1 : '첫번째',
// test2 : 'first'
// },
// {
// test1 : '두번째',
// test2 : 'second'
// },{
// test1 : '세번째',
// test2 : 'third'
// }]
// }
// }]
// })
//})
//Ext.onReady(function() {
// Ext.create('Ext.panel.Panel', {
// width : 500,
// height : 500,
// title : 'form field 공부',
// renderTo : Ext.getBody(),
// items : [{
// xtype : 'textfield',
// allowBlank : false,
// emptyText : '입력하세요'
// }, {
// xtype : 'textfield',
// inputType : 'password',
// emptyText : '비밀번호를 입력하세요'
// }, {
// xtype : 'datefield',
// format : 'y-m-d'
//
// },{
// xtype : 'numberfield',
// minValue : 0,
// maxValue : 10
// }, {
// xtype : 'timefield'
// }, {
// //<input type = 'file'>
// xtype : 'filefield',
// buttonOnly : true
// }, {
// xtype : 'checkboxfield',
// boxLabel : '아이디 기억'
// }, {
// xtype : 'radiofield',
// name : 'sex',
// boxLabel : '남'
// },
// {
// xtype : 'radiofield',
// name : 'sex',
// boxLabel : '여'
// }, {
// xtype : 'slider',
// width : 300,
// value : 50
// }]
// })
//
//})
//1. ExtJS Alert
// Ext.Msg.alert('타이틀', 'ExtJs의 alert입니다')
// Ext.Msg.confirm('타이틀', '바디', function(button){
// if(button == 'yes'){
//
// }else {
//
// }
// })
// t, tr, tl ,b, br ,bl
// Ext.toast({
// html : '토스트읍니다',
// align : 'br'
// })
// Ext.MessageBox.show({
// title : 'MessageBox',
// msg : 'Message context',
// icon : Ext.MessageBox.INFO,
// buttons : Ext.MessageBox.YESNO,
// fn : function(button) {
// console.log(button);
// }
// });
//
//window는 객체를 생성해줘야한다
//Ext.window.Window
//Ext.create('Ext.panel.Panel' , {
// width : 300,
// height : 300,
// length : 400,
// renderTo : Ext.getBody(),
// border: true,
// items : [{
// xtype : 'button',
// text : '패널버튼',
// handler : function(btn) {
// let win = Ext.create('Ext.window.Window', {
// title : 'Window Title',
// height : 300,
// width : 300,
// layout : 'center',
// items : [{
// xtype : 'button',
// text : '버튼'
// }],
// maximizable : true,
// modal : true
// })
// win.show();
// }
// }]
//});
//Ext.create('Ext.window.Window', {
// width : 300,
// height : 300,
// length : 400,
// autoShow : true,
// title : 'Window title',
// items : [{
// xtype : 'button',
// text : 'button'
// }],
// closable :false,
// maximizable : true,
// modal : true,
// resizable : false
//}); /
//})
JavaScript
복사
