Extjs use to ajaxFormSubmit
var gridPanel;
function extChangeButton(buttonId){
//Ext.get(buttonId)//.setText('첨부');
console.log(Ext.get(buttonId));
}
function dataSubmit(data){
var internalId = data.internalId;
var data = data.data;
if($("#dataForm form[id='dataForm"+internalId+"']").length > 0){
$("#dataForm form[id='dataForm"+internalId+"']").ajaxForm({
url : "/test/ajax/formCreate",
data : data
}).submit();
}else{
$.ajax({
url : "/test/ajax/formCreate",
data : data,
method : "POST"
})
}
}
function createDataForm(internalId,buttonId){
var len = $("#dataForm form[id='dataForm"+internalId+"']").length;
if(len){
$("#dataForm form[id='dataForm"+internalId+"']").remove();
}
var form = document.createElement("form");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("method", "post");
form.setAttribute("id", "dataForm"+internalId);
var fileField = document.createElement("input");
fileField.setAttribute("type", "file");
fileField.setAttribute("name", "file");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "bbs_info_seq");
hiddenField.setAttribute("value", "1");
form.appendChild(fileField);
form.appendChild(hiddenField);
$("#dataForm").append(form);
$("#dataForm form[id='dataForm"+internalId+"'] input[type='file']").on('change',function(){
if (gridPanel.getSelectionModel().hasSelection()) {
var row = gridPanel.getSelectionModel().getSelection()[0];
row.set("file_seq","신규");
}
extChangeButton(buttonId);
});
fileField.click();
}
Ext.onReady(function() {
Ext.define('testModel', {
extend : 'Ext.data.Model',
reference: 'sampleData',
fields : [{
name : 'bbs_cate_name',
type : 'string'
}, {
name : 'bbs_title',
type : 'string'
}, {
name : 'bbs_reg_date',
type : 'string'
}, {
name : 'bbs_seq',
type : 'string'
},{
name : 'file_seq',
type : 'string'
}],
idProperty : 'bbs_seq'
});
var store = Ext.create('Ext.data.Store', {
autoLoad : true,
model : 'testModel',
actionMethods : {
create : "POST",
read : "POST",
update : "POST",
destroy : "POST"
},
proxy : {
type : 'ajax',
headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
api : {
create : '/test/bbsCreate',
read : '/test/bbsList',
update : '/test/bbsCreate',
destroy : '/test/bbsDelete'
},
reader : {
type : 'json',
root : 'item',
totalProperty : 'TotalCount'
},
extraParams : {
"bbs_info_seq" : "1"
}
},
writer : {
type : 'json',
writeAllFields : false,
root : 'item',
AllowBlank : "false"
}
});
var panelTree = new Ext.tree.Panel({
border: false,
height: 200,
listeners: { itemclick: function(self, record, item, index, event) {
if (record.data.href=='') {
var Enode=self.getTreeStore().getNodeById(record.internalId);
if (Enode.isExpanded())
Enode.collapse();
else
Enode.expand();
} } },
rootVisible: false,
width: 200,
root: {
children: [ {
text: 'Menu 1',
children: [{ text: 'Menu 1.1',leaf: true }]
} ] }
// ,renderTo: Ext.getBody()
});
var panelExtra = new Ext.Panel({
collapsible : false,
collapsed : false,
title : "information",
html : "설명글"
});
//PanelWest
var panelWest = new Ext.Panel({
region : "west",
title : "메뉴",
collapsible : false,
items : [ panelTree, panelExtra ],
width : "20%"
});
//PanelCenter
gridPanel = new Ext.grid.Panel({
region : "center",
collapsible : false,
title : "그리드",
width : "80%",
store : store,
width : 800,
alias : 'controller.boardGrid',
columns : [{
text : '게시번호',
dataIndex : 'bbs_seq',
width : 200
}, {
text : '카테고리',
dataIndex : 'bbs_cate_name',
width : 300,
hidden : true
}, {
text : '제목',
dataIndex : 'bbs_title',
width : 300,
editor : 'textfield'
}, {
text : '등록일',
dataIndex : 'bbs_reg_date',
width : 200,
editor : 'textfield',
flex : 1
},{
text : '첨부파일',
dataIndex : 'file_seq',
width : 200,
editor : 'textfield',
flex : 1
},{
header: 'Buttons',
renderer: function (v, m, r) {
var id = Ext.id();
/*
console.log(v);
console.log(m);
console.log(r);
*/
Ext.defer(function () {
Ext.widget('button', {
renderTo: id,
text: 'Edit: ' + r.get('bbs_seq'),
width: 75,
handler: function () {
createDataForm(r.internalId,this.id);
console.log(r.store.id)
}
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}}
],
selModel : {
selType : 'cellmodel'
},
bbar : Ext.create('Ext.PagingToolbar', {
store : store,
pageSize : 5,
displayInfo : true,
displayMsg : 'Displaying topics {0} - {1} of {2}',
emptyMsg : "No topics to display",
items : ['-', {
pressed : false,
enableToggle : false,
text : '팝업테스트',
cls : 'x-btn-text-icon',
handler : showWin
}]
}),
plugins : [{
ptype : 'cellediting',
clicksToEdit : 1
}],
tbar : [{
// 추가버튼
xtype : 'button',
text : '추가',
id : 'addBtn',
handler : myBtnHandler
}, {
// 삭제버튼
xtype : 'button',
text : '삭제',
id : 'removeBtn',
handler : myBtnHandler
}, {
// 적용버튼
xtype : 'button',
text : '적용',
id : 'syncBtn',
handler : myBtnHandler
}]
});
//FormPanel
var formPanel = new Ext.form.Panel({
region : "east",
collapsible : false,
title : "데이터폼",
width : "20%",
layout: 'form',
width: 300,
bodyPadding: 5,
defaultType: 'textfield',
viewModel: {
type: 'testModel'
},
items: [
{
fieldLabel: '게시판순번',
name: 'bbs_seq'
},
{
fieldLabel: '게시판제목',
name: 'bbs_title'
},
{
xtype: 'datefield',
format: 'Y/m/d',
fieldLabel: '게시판날짜',
name: 'bbs_reg_date'
}
],
buttons: [{
text:'저장',
type: 'submit',
handler:function () {
var form = this.up('form').getForm();
form.submit({
url:'/test/formCreate',
waitMsg:'Sending the info...',
params: {
"bbs_info_seq" : "1"
},
success:function (fp, o) {
gridPanel.getStore().reload();
}
});
}
},{
text: 'Cancel'
}],
listeners: {
change: function(field, newVal, oldVal) {
//alert(newVal);
alert(field);
}
}
});
function changeForm(btn){
console.log(formPanel.getRecord());
}
gridPanel.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
if (selectedRecord.length) {
formPanel.loadRecord(selectedRecord[0]);
}
});
//Het vaste window
var win = new Ext.Window({
title : "Project",
renderTo : Ext.getBody(),
closable : false,
width : "95%",
height : 500,
plain : true,
layout : "border",
items : [ panelWest, gridPanel,formPanel ],
resizable : false,
draggable : false,
collapsible : false,
maximizable : true
});
win.show();
});
function myBtnHandler(btn) {
// 그리드 -> 저장공간 객체
var grid = gridPanel;
var gridStore = grid.getStore();
// 그리드 행 추가버튼 클릭
if (btn.getId() == "addBtn") {
// membermodel
var rec = new testModel({
'bbs_cate_name' : '',
'bbs_title' : '',
'bbs_reg_date' : '',
'bbs_seq' : 'new'
});
// store에 로우 추가
gridStore.insert(0, rec);
// 에디트 시작포커스 잡기 (없으면 단순 로우만 추가)
grid.plugins[0].startEditByPosition({
row : 0,
column : 0
});
} else if (btn.getId() == "removeBtn") {
grid.getStore().remove(grid.getSelectionModel().getSelection());
} else if (btn.getId() == "syncBtn") {
var parms = [];
var updatedRecords = gridStore.getUpdatedRecords();
for(var i = 0;i<updatedRecords.length;i++){
var internalId = updatedRecords[i].internalId;
var data = updatedRecords[i].data;
dataSubmit(updatedRecords[i]);
}
var newRecords = gridStore.getNewRecords();
for(var i = 0;i<newRecords.length;i++){
var internalId = newRecords[i].internalId;
var data = newRecords[i].data;
dataSubmit(newRecords[i]);
}
var newRemoves = gridStore.getRemovedRecords();
for(var i = 0;i<newRemoves.length;i++){
var internalId = newRemoves[i].internalId;
var data = newRemoves[i].data;
$.ajax({
url : "/test/ajax/formDelete",
data : data,
method : "POST"
})
}
/*
Ext.each(updatedRecords, function(record) {
parms.push(record.data);
console.log(record.data);
});
var newRecords = gridStore.getNewRecords();
Ext.each(newRecords, function(record) {
parms.push(record.data);
});
var newRemoves = gridStore.getRemovedRecords();
Ext.each(newRecords, function(record) {
parms.push(record.data);
});
*/
grid.getStore().reload();
$("#dataForm").children().remove();
/*
gridStore.sync({
callback : function() {
grid.getStore().reload();
}
});
*/
}
}
function showWin() {
var win = Ext.create("Ext.window.Window", {
title : '레이어윈도우 샘플',
height : 500,
width : 500
});
win.show();
}
댓글 쓰기
0 댓글