Ext JS 의 넵튠(Neptune) 테마 참 맘에 든다.^^
이 넵튠 테마를 기본으로 하는 프로젝트를 만들어 보도록 하자.
준비사항
Sencha Cmd 가 설치되어 있고, Path를 걸어 둔다.
Ext JS 최신 버전이 ~/ExtJS 폴더에 위치 해 둔다.
1단계 – 프로젝트 생성하기
cd ~/ExtJS sencha generate app myProject ../myProject cd ~/myProject open index.html
그러면 아래와 같은 기본 테마가 적용된 모습이 보인다.
Ext JS 기본 테마
cd ~/myProject/.sencha/app vi sencha.cfg # 변경 전 : app.theme=ext-theme-classic # 변경 후 : app.theme=ext-theme-neptune # 저장 후 vi를 나온다 cd ~/myProject vi bootstrap.css # 변경 전 : @import 'build/?????/production/resources/?????-all.css'; # 변경 후 : @import 'build/NeptuneTheme/production/resources/NeptuneTheme-all.css'; # 모두 바꾸지 말고, 물음표 부분만 변경 후 저장 sencha app refresh // 이건 안해도 될듯..;;; sencha app build open index.html
Ext JS Neptune Theme (넵튠 테마)
이렇게 하시면 됩니다.
질문이나 문의 사항은
으로 보내주세요
이것좀 봐주세요
Ext.onReady(function(){
var selNodeObj=null;
var store = Ext.create(‘Ext.data.TreeStore’, {
id: ‘store’,
autoHeight:true,
autoLoad: false,
// autoSync: true,
root :{
text : ‘프로젝트명’,
name : ’1단’,
expanded : false,
},
proxy : {
type : ‘ajax’,
api: {
read : ‘/auto/tree/json/jsonobject.do’,
create: ‘/auto/tree/EgovTreeCreateInsert.do’,
update: ‘/auto/tree/EgovTreeCreateUpdate.do’,
destroy: ‘/auto/tree/EgovTreeCreateDelete.do’
},
reader: {
type: ‘json’,
successProperty:’success’,
rootProperty: ‘children’,
// rootProperty: ‘items’,
messageProperty:’message’
// ,root:’tree’
}
,writer:{
type:’json’,
writeAllFields:true,
// root:’auto’
encode:true,
rootProperty:’children’
}
},
listeners: {
}
});
var tree = Ext.create(‘Ext.tree.Panel’, {
title: ‘에스제이테크시스템’,
id: ‘tree’,
rootVisible: true,
multiSelect: true,
store: store,
viewConfig: {
plugins: {
ptype: ‘treeviewdragdrop’,
enableDrag: true,
enableDrop: true
}
},
multiSelect: true,
plugins: ‘cellediting’,
columns: [{
header:'프로젝트명',
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false,
allowOnlyWhitespace: false
}
},{header:'합계',dataIndex:'disable',flex:1, editor: {
xtype: 'textfield',
allowBlank: false,
allowOnlyWhitespace: false
},width:500}],
renderTo: Ext.get(‘treeList’),
listeners:{
itemcontextmenu : function( object, record, item, index, e){
e.stopEvent();
var menu = Ext.create(‘Ext.menu.Menu’,{
items : [
{
text: '추가',
handler: onItemClick,
iconCls: 'icon-edit'
},
{
text: '삭제',
handler: onItemClick
}
]
});
menu.showAt(e.getXY());
}
}
});
function onItemClick(item){
node = store.getNodeById(“Node1″);
var treePanel = Ext.getCmp(‘tree’);
if(item.text==’삭제’){
var record = treePanel.getSelectionModel().getSelection()[0];
record.remove(true);
store.sync();
}else if(item.text==’추가’){
var selNode = treePanel.getSelectionModel().getSelection()[0];
selNodeObj=selNode;
var appendedChild = selNode.appendChild({
// task: ‘Task1′,
// user: ‘Name’,
// duration: ’10′,
text : ‘추가’,
name : ’1단’,
leaf: true
});
var newRecords = store.getNewRecords();
Ext.each(newRecords, function(record,index){
console.log(‘New (‘,index,’)’,record.get(‘name’));
});
store.sync();
}
}
});
여기서 proxy를 사용했는데요 아래에 api를 지정하고 하면 삭제시에 destroy 수정시 update, 트리 추가시에 create롤 타겠끔 할려고 합니다 어떻게 해줘야 타는지요 ?
이것에 대한 방법을 아시면 메일로 좀 보내주세요
ldongkyu@hanmail.net 입니다
감사합니다