[Extjs6]隨記 建立store 實現新增、修改、刪除功能
阿新 • • 發佈:2019-02-15
//建立關係維護介面
organizeLocalStore = Ext.create('Ext.data.Store',{
model: 'Admin.model.baseinfo.organize',
autoLoad: true,
pageSize: 8,
autoLoad: {start: 0, limit: 8},
proxy: {
type: 'ajax',
noCache:false,
api:{
read : '/xxxxxx/view.action',
create : '/xxxxxx/create.action?token='+token,
update: '/xxxxxx/update.action?token='+token,
destroy: '/xxxxxx/delete.action?token='+token
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: response.responseText,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
/////////////////////////////////////////////////////////////////
//store
var orgSnStore = null;
var orgPreCodeStore = null;
Ext.define('Admin.view.shishijiankong.OrganizeEdit', {
extend: 'Ext.window.Window',
requires: ['Ext.form.Panel','Ext.form.field.Text'],
title : '編輯組織',
layout: 'fit',
autoShow: true,
width: 350,
items:[
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},
items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'orgCode',
fieldLabel: 'orgCode',
hidden:true
},
{
xtype: 'combobox',
fieldLabel: '上級組織程式碼',
name : 'orgPreCode',
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners:{
beforerender:function(){
this.setStore(orgPreCodeStore);
}
}
},
{
xtype: 'textfield',
name : 'orgName',
fieldLabel: '組織名稱'
},
{
xtype: 'combobox',
name : 'orgSn',
fieldLabel: '標識碼',
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners:{
beforerender:function(){
this.setStore(orgSnStore);
}
}
},
{
xtype: 'textfield',
name : 'orgType',
fieldLabel: '組織型別',
value: '1'
},
{
xtype: 'textfield',
name : 'memo',
fieldLabel: '描述'
}
]
}
],
dockedItems:[
{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->',
{
iconCls: 'fa fa-floppy-o',
itemId: 'save',
text: 'Save',
handler: function(){
var win = this.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
console.log("----------------save data--------------");
console.log(win);
console.log(form);
console.log(values);
if (values.id > 0){
record.set(values);
}else{
record = Ext.create('Admin.model.baseinfo.organize');
record.set(values);
record.setId(0);
//record.set("orgCode","");
console.log(record);
organizeLocalStore.add(record);
}
console.log("----------------end save data--------------");
win.close();
organizeLocalStore.sync({
success:function(){
organizeLocalStore.reload();
reloadIframe();
}
});
}
},{
iconCls: 'fa fa-times',
text: 'Cancel',
handler: function(){
this.up('window').close();
}
}]
}
],
initComponent:function(){
//初始化新增下拉的資料store
orgPreCodeStore = Ext.create("Ext.data.Store",{
fields: ['name','value']
});
orgSnStore = Ext.create("Ext.data.Store",{
fields: ['name','value']
});
organizeLocalStore.each(function(record){
console.log(record);
orgPreCodeStore.add({
"name":record.get("orgName"),
"value":record.get("orgCode")
});
orgSnStore.add({
"name":record.get("orgSn"),
"value":record.get('orgSn')
});
});
console.log("--------------------");
console.log(orgPreCodeStore);
console.log(orgSnStore);
this.callParent(arguments);
}
});
{
xtype: 'toolbar',
dock: 'top',
items: [
{
text: '新增',
handler:function(){
Ext.create('Admin.view.shishijiankong.OrganizeEdit').show();
}
},
{
text: '刪除',
handler:function(){
//找到選中的記錄
console.log("---------delete----------");
console.log(this);
console.log(this.up("window").down("gridpanel"));
var grid = this.up("window").down("gridpanel");
record = grid.getSelectionModel().getSelection(),
organizeLocalStore.remove(record);
organizeLocalStore.sync({
success:function(){
organizeLocalStore.reload();
reloadIframe();
}
});
}
}
]
},
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store:organizeLocalStore,
displayInfo : true
}
],
listeners:{
itemdblclick:function(self,record,item , index , e , eOpts ) {
var edit = Ext.create('Admin.view.shishijiankong.OrganizeEdit').show();
if(record){
edit.down('form').loadRecord(record);
}
}
}
organizeLocalStore = Ext.create('Ext.data.Store',{
model: 'Admin.model.baseinfo.organize',
autoLoad: true,
pageSize: 8,
autoLoad: {start: 0, limit: 8},
proxy: {
type: 'ajax',
noCache:false,
api:{
read : '/xxxxxx/view.action',
create : '/xxxxxx/create.action?token='+token,
update: '/xxxxxx/update.action?token='+token,
destroy: '/xxxxxx/delete.action?token='+token
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: response.responseText,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
/////////////////////////////////////////////////////////////////
//store
var orgSnStore = null;
var orgPreCodeStore = null;
Ext.define('Admin.view.shishijiankong.OrganizeEdit', {
extend: 'Ext.window.Window',
requires: ['Ext.form.Panel','Ext.form.field.Text'],
title : '編輯組織',
layout: 'fit',
autoShow: true,
width: 350,
items:[
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},
items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'orgCode',
fieldLabel: 'orgCode',
hidden:true
},
{
xtype: 'combobox',
fieldLabel: '上級組織程式碼',
name : 'orgPreCode',
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners:{
beforerender:function(){
this.setStore(orgPreCodeStore);
}
}
},
{
xtype: 'textfield',
name : 'orgName',
fieldLabel: '組織名稱'
},
{
xtype: 'combobox',
name : 'orgSn',
fieldLabel: '標識碼',
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners:{
beforerender:function(){
this.setStore(orgSnStore);
}
}
},
{
xtype: 'textfield',
name : 'orgType',
fieldLabel: '組織型別',
value: '1'
},
{
xtype: 'textfield',
name : 'memo',
fieldLabel: '描述'
}
]
}
],
dockedItems:[
{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->',
{
iconCls: 'fa fa-floppy-o',
itemId: 'save',
text: 'Save',
handler: function(){
var win = this.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
console.log("----------------save data--------------");
console.log(win);
console.log(form);
console.log(values);
if (values.id > 0){
record.set(values);
}else{
record = Ext.create('Admin.model.baseinfo.organize');
record.set(values);
record.setId(0);
//record.set("orgCode","");
console.log(record);
organizeLocalStore.add(record);
}
console.log("----------------end save data--------------");
win.close();
organizeLocalStore.sync({
success:function(){
organizeLocalStore.reload();
reloadIframe();
}
});
}
},{
iconCls: 'fa fa-times',
text: 'Cancel',
handler: function(){
this.up('window').close();
}
}]
}
],
initComponent:function(){
//初始化新增下拉的資料store
orgPreCodeStore = Ext.create("Ext.data.Store",{
fields: ['name','value']
});
orgSnStore = Ext.create("Ext.data.Store",{
fields: ['name','value']
});
organizeLocalStore.each(function(record){
console.log(record);
orgPreCodeStore.add({
"name":record.get("orgName"),
"value":record.get("orgCode")
});
orgSnStore.add({
"name":record.get("orgSn"),
"value":record.get('orgSn')
});
});
console.log("--------------------");
console.log(orgPreCodeStore);
console.log(orgSnStore);
this.callParent(arguments);
}
});
//////////////////////////////////////////////////
Gridpanel的dockedItems裡新增一個功能按鈕:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{
text: '新增',
handler:function(){
Ext.create('Admin.view.shishijiankong.OrganizeEdit').show();
}
},
{
text: '刪除',
handler:function(){
//找到選中的記錄
console.log("---------delete----------");
console.log(this);
console.log(this.up("window").down("gridpanel"));
var grid = this.up("window").down("gridpanel");
record = grid.getSelectionModel().getSelection(),
organizeLocalStore.remove(record);
organizeLocalStore.sync({
success:function(){
organizeLocalStore.reload();
reloadIframe();
}
});
}
}
]
},
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store:organizeLocalStore,
displayInfo : true
}
],
listeners:{
itemdblclick:function(self,record,item , index , e , eOpts ) {
var edit = Ext.create('Admin.view.shishijiankong.OrganizeEdit').show();
if(record){
edit.down('form').loadRecord(record);
}
}
}