|
Ext.onReady(function() { |
|
Ext.ns('Person'); |
|
Ext.Loader.setConfig({enabled : true, disableCaching : true}); |
|
Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.menu.*']); |
|
|
|
Ext.grid.RowEditor.prototype.cancelBtnText = "Отмена"; |
|
Ext.grid.RowEditor.prototype.saveBtnText = "Сохранить"; |
|
|
|
Ext.define('Person', { |
|
extend: 'Ext.data.Model', |
|
fields: ['id', 'type', 'url'], |
|
validators: [{ |
|
type: 'inclusion', |
|
field: 'type', |
|
list: ['vk', 'twitter', 'facebook', 'instagram', 'youtube'] |
|
}, { |
|
type: 'url', |
|
field: 'url' |
|
}] |
|
}); |
|
|
|
|
|
var store = Ext.create('Ext.data.Store', { |
|
storeId: 'PersonStore', |
|
model: 'Person', |
|
fields:['type', 'url'], |
|
data: socials_url?socials_url:[], |
|
/*listeners: { |
|
write: function(store, operation){ |
|
var record = operation.getRecords()[0], |
|
name = Ext.String.capitalize(operation.action), |
|
verb; |
|
|
|
|
|
if (name == 'Destroy') { |
|
verb = 'Destroyed'; |
|
} else { |
|
verb = name + 'd'; |
|
} |
|
Ext.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); |
|
|
|
} |
|
}*/ |
|
}); |
|
|
|
var socials = Ext.create('Ext.data.Store', { |
|
fields: ['abbr', 'name'], |
|
data : [ |
|
{"abbr":"vk", "name":"ВКонтакте"}, |
|
{"abbr":"twitter", "name":"Twitter"}, |
|
{"abbr":"facebook", "name":"Facebook"}, |
|
{"abbr":"instagram", "name":"Instagram"}, |
|
{"abbr":"youtube", "name":"YouTube"} |
|
] |
|
}); |
|
|
|
var contextMenu = Ext.create('Ext.menu.Menu', { |
|
width: 200, |
|
items: [{ |
|
text: 'Редактировать', |
|
handler: function() { |
|
var record = grid ? grid.getSelection()[0] : null; |
|
if (!record) { |
|
return; |
|
} |
|
var rowEditing = grid.findPlugin('rowediting'); |
|
rowEditing.startEdit(record); |
|
//alert(record.get('url')); |
|
} |
|
}] |
|
}); |
|
|
|
var grid = Ext.create('Ext.grid.Panel', { |
|
renderTo: 'socials_container', |
|
listeners: { |
|
render: function(){ |
|
Ext.fly(Ext.getBody().dom).removeCls('x-body'); |
|
} |
|
}, |
|
width: '100%', |
|
minHeight: 250, |
|
plugins: { |
|
ptype: 'rowediting', |
|
clicksToEdit: 0, |
|
listeners: { |
|
cancelEdit: function(rowEditing, context) { |
|
// Canceling editing of a locally added, unsaved record: remove it |
|
if (context.record.phantom) { |
|
store.remove(context.record); |
|
} |
|
} |
|
} |
|
}, |
|
title: 'Ссылки на социальные сети', |
|
store: Ext.data.StoreManager.lookup('PersonStore'), |
|
columns: [{ |
|
text: 'Тип соц.сети', |
|
flex: 1, |
|
sortable: true, |
|
dataIndex: 'type', |
|
field: { |
|
xtype: 'combobox', |
|
store: socials, |
|
displayField: 'name', |
|
valueField: 'abbr', |
|
allowBlank: false, |
|
listeners : { |
|
render: function(p) { |
|
/*var theElem = p.getEl(); |
|
var theTip = Ext.create('Ext.tip.Tip', { |
|
html: 'Tuliskan nama jalan dan nomor rumah.<br>Misal: Jl. Merak, No. 3', |
|
shadow: false |
|
}); |
|
|
|
p.getEl().on('mouseover', function(){ |
|
theTip.showAt([theElem.getX(), theElem.getY()]); |
|
}); |
|
|
|
p.getEl().on('mouseleave', function(){ |
|
theTip.hide(); |
|
});*/ |
|
} |
|
} |
|
}, |
|
renderer: function(value) { |
|
var catRecord = socials.findRecord('abbr', value); |
|
return catRecord ? catRecord.get('name'): ''; |
|
} |
|
}, { |
|
header: 'Ссылка', |
|
flex:1, |
|
sortable: true, |
|
dataIndex: 'url', |
|
field: { |
|
xtype: 'textfield', |
|
vtype: 'url', |
|
allowBlank: false |
|
}, |
|
renderer: function(v) { |
|
return Ext.String.htmlEncode(v); |
|
} |
|
}], |
|
dockedItems: [{ |
|
xtype: 'toolbar', |
|
items: [{ |
|
xtype: 'textfield', |
|
hidden: true, |
|
id: 'socitems', |
|
readOnly: true, |
|
value: Ext.encode(socials_url?socials_url:[]).replace(/([\[\]\{\}])/gi, '\\$1'), |
|
name: "extended[socitems]" |
|
},{ |
|
text: 'Добавить', |
|
handler: function(){ |
|
// empty record |
|
var rec = new Person(); |
|
var rowEditing = grid.findPlugin('rowediting'); |
|
store.insert(0, rec); |
|
rowEditing.startEdit(rec, 0); |
|
} |
|
}, '-', { |
|
itemId: 'delete', |
|
text: 'Удалить', |
|
disabled: true, |
|
handler: function(){ |
|
Ext.Msg.show({ |
|
title:'Удаление ссылки социальной сети', |
|
message: 'Удалить выбранную ссылку?', |
|
buttons: Ext.Msg.YESNO, |
|
icon: Ext.Msg.QUESTION, |
|
fn: function(btn) { |
|
if (btn === 'yes') { |
|
var selection = grid.getView().getSelectionModel().getSelection()[0]; |
|
if (selection) { |
|
store.remove(selection); |
|
} |
|
var items_out = []; |
|
Ext.Array.each(grid.getView().dataSource.data.items, |
|
function(item, index, allItems){ |
|
//console.log(item.data.email); |
|
items_out.push({type:item.data.type,url:item.data.url}) |
|
}); |
|
Ext.getCmp('socitems').setValue(Ext.encode(items_out).replace(/([\[\]\{\}])/gi, '\\$1')); |
|
} |
|
} |
|
}); |
|
} |
|
}/*, '-', { |
|
itemId: 'view', |
|
text: 'Смотреть', |
|
handler: function(){ |
|
var items_out = []; |
|
Ext.Array.each(grid.getView().dataSource.data.items, |
|
function(item, index, allItems){ |
|
//console.log(item.data.email); |
|
items_out.push({type:item.data.type,url:item.data.url}) |
|
}); |
|
Ext.getCmp('socitems').setValue(Ext.encode(items_out)); |
|
} |
|
}*/] |
|
},{ |
|
xtype: 'toolbar', |
|
dock: 'bottom', |
|
ui: 'footer', |
|
items: [ |
|
{xtype: 'panel', |
|
html: '<small>Для редактирования щёлкните по строке дважды или кликните правой кнопкой мышки</small>', |
|
bodyStyle: {"background-color":"transparent","border-width":0} |
|
} |
|
] |
|
}] |
|
}); |
|
|
|
|
|
|
|
grid.on('edit', function(){ |
|
var items_out = []; |
|
Ext.Array.each(grid.getView().dataSource.data.items, |
|
function(item, index, allItems){ |
|
//console.log(item.data.email); |
|
items_out.push({type:item.data.type,url:item.data.url}) |
|
}); |
|
//console.log(Ext.encode(items_out).replace(/([\[\]])/gi, '\\$1')); |
|
Ext.getCmp('socitems').setValue(Ext.encode(items_out).replace(/([\[\]\{\}])/gi, '\\$1')); |
|
}); |
|
grid.getSelectionModel().on('selectionchange', function(selModel, selections){ |
|
grid.down('#delete').setDisabled(selections.length === 0); |
|
}); |
|
grid.on("itemcontextmenu", function(grid, record, item, index, e) { |
|
e.stopEvent(); |
|
contextMenu.showAt(e.getXY()); |
|
}); |
|
}); |
