kanban-parent/kanban-console/src/main/webapp/resources/app/view/desktop/BoardManageRightPanel.js

Ext.QuickTips.init(); 
Ext.define('erp.view.desktop.BoardManageRightPanel',{ 
	extend: 'Ext.panel.Panel', 
	alias:'widget.manageright',
	id:'manageright',
	border: 0,
	layout:'fit',
	autoScroll: true,
	hideBorders: true, 
	initComponent:function(){
		var me = this;

		var enabledStore = Ext.create('Ext.data.Store', {
            fields: ['value', 'name'],
            data: [
                { "value": true, "name": "是" },
				{ "value": false, "name": "否" }
            ]
        });
		var enabledCombo = new Ext.form.ComboBox({
            store: enabledStore,
            valueField: 'value',
            displayField: 'name',
            mode: 'local',
            forceSelection: true,
            editable: false,
            triggerAction: 'all',
			selectOnFocus: true
        });
		me.items = [{
			xtype: 'grid',
			id:'tplGrid',
			selectedIndex: 1,
			store : Ext.create('Ext.data.Store', {
				fields : ['code', 'content', 'enabled', 'description', 'name','title','panelCode'],
				data: []
			}),
			columnLines:true,
			columns: [
				{ text: 'ID', dataIndex: 'code', hidden: true },
				{ text: '看板名称', dataIndex: 'name', flex: 1, editor: 'textfield', renderer: function (v, metadata, record, rowIndex, columnIndex, store) {
					metadata.tdAttr = 'data-qtip="' + (v || '') + '"';
						return v;
					}
				},
				{ text: '备注', dataIndex: 'description', flex: 1, editor: 'textfield', renderer: function (v, metadata, record, rowIndex, columnIndex, store) {
						metadata.tdAttr = 'data-qtip="' + (v || '') + '"';
						return v;
					}
				},
				{
					text: '是否生效', dataIndex: 'enabled', width: 100, editor: enabledCombo, renderer: function(value) {
						return value ? '是' : '否'
					}
				},
				{ xtype: 'actioncolumn', align: 'center', items: [{
					iconCls: 'save',
					tooltip: '保存',
					handler: function(th, rowIndex, colIndex) {
						var grid =this.up('grid');
						var rec = grid.getStore().getAt(rowIndex);
						var data = Object.assign({}, rec.data);
						data.get = function(key) {
							return this[key]
						}
						data.set = function(key, value) {
							this[key] = value;
						}
						delete data.content;
						delete data.title;
						var record = {
							code: data.code,
							panelCode: data.panelCode,
							description: data.description,
							enabled: data.enabled,
							name: data.name,
							get: data.get,
							set: data.set
						}
						grid.saveModel(record);
					}
				}, '-', {
					iconCls: 'edit',
                    tooltip: '看板配置',
                    handler: function(grid, rowIndex, colIndex, th, eOpts, record) {
						var code = record.get('code');
						var panelRecord = Ext.getCmp('managemain').initRecord;
						window.open(basePath+'board?code=' + code + '&name=' + record.get('name') + '&panelCode=' + record.get('panelCode') + '&panelName=' + panelRecord.get('name'), code);
					}
				}] }
			],
			tbar: [{
				xtype: 'button',
				text: '添加看板',
				disabled: true,
				handler: function() {
					if(!Ext.getCmp('managemain').initRecord.get('code')) {
						Ext.Msg.alert('提示', '请先保存面板再执行添加看板操作!');
						return;
					}
					var grid = this.up('grid');
					var record = {
						name: '新看板',
						description: '',
						content: '<content></content>',
						panelCode: Ext.getCmp('managemain').initRecord.get('code'),
						enabled: true
					}
					grid.addModel(record);
                }
			}, {
				xtype: 'button',
				text: '删除看板',
				disabled: true,
				handler: function() {
					var grid = this.up('grid');
					var record = grid.getSelectionModel().getSelection()[0];
					if(record) {
						Ext.Msg.confirm('提示','是否确定删除看板 ' + record.get('name') + ' ?',function(btn){
							if(btn=='yes'){
								grid.deleteModel(record, grid.getStore().indexOf(record));
							}
						});
					}
                }
			}],
			plugins: [
				Ext.create('Ext.grid.plugin.CellEditing', {
					clicksToEdit: 2
				})
			],
			loadGridData: function() {
				var grid = this;
				var panelRecord = Ext.getCmp('managemain').initRecord;
				grid.getEl().mask('loading...');
				Ext.Ajax.request({
					url:'kanban/get/byPanel/' + panelRecord.get('code'),
					method:'POST',
					callback:function(options,success,response){
						grid.getEl().unmask();
						if(response.responseText == '') return;
						var res = JSON.parse(response.responseText);
						if(success) {
							grid.selectedIndex = 1;
							res = res instanceof Array ? res : [res];
							grid.getStore().loadData(res);
							grid.getStore().sort('enabled', 'DESC');
						}else {
							Ext.Msg.alert('失败', res.message);
						}
					}
				});
			},
			addModel: function(record) {
				var grid = this;
				grid.getStore().insert(grid.getStore().getCount(), record);
				grid.getPlugin().startEditByPosition({ row: grid.getStore().getCount() - 1, column: 0 });
			},
			saveModel: function(record) {
				var grid = this;
				var type = record.get('code') ? 'updatePart' : 'savePart'
				Ext.Ajax.request({
					url:'kanban/' + type,
					method:'POST',
					params:{
						json:Ext.encode(record)
					},
					callback:function(options,success,response){
						var res = JSON.parse(response.responseText);
						if(success) {
							if(grid) {
								grid.loadGridData();
								Ext.Msg.alert('成功', '已更新');
							}
						}else {
							Ext.Msg.alert('失败', res.message);
						}
					}
				});
			},
			deleteModel: function (record) {
				var grid = this;
				if (record.get('code')) {
					Ext.Ajax.request({
						url: 'kanban/delete/' + record.get('code'),
						method: 'POST',
						callback: function (options, success, response) {
							var res = JSON.parse(response.responseText);
							if (success) {
								if (grid) {
									grid.loadGridData();
								}
							} else {
								Ext.Msg.alert('失败', res.message);
							}
						}
					});
				} else {
					grid.getStore().remove(record);
				}
			}
		}];
		this.callParent(arguments);
	},
	setButtonDisabled: function(isDisabled) {
		var grid = this.down('grid');
		var buttons = grid.dockedItems.items[1].items.items;
		Ext.Array.each(buttons,function(btn){
			if(btn.xtype=='button'&&btn.disabled!=isDisabled){
				btn.setDisabled(isDisabled);
			}
		});
	},
	selectModel:function(data){
		var me = this;
		grid.selectedIndex = 1;
		var grid = Ext.getCmp('tplGrid');
		var store = grid.getStore();
		var records = new Array();
		Ext.Array.each(store.data.items,function(rec,index){
			Ext.Array.each(data,function(item){
				if(rec.get('code')==item.code){
					records.push(rec);
				}
			});
		});
		grid.getSelectionModel().select(records);
	}
});