PDA

View Full Version : Any Refine ideas of admin record with sub-related records ?



kendoctor
28 Apr 2011, 5:45 PM
I want to manager something like this
Question
Answer1 Answer2 Answer3 Answer4

Answers need to be ordered by drag&drop
Admin question items(CRUD)
Admin answers of quetion (CRUD)

All these operations need to be done in one GridPanel. Although i work it out, but i was confused whether the solution is the right, efficient.

25837


Ext.namespace('Ext.symfony');

Ext.symfony.OPTSequenceTemplateManager = Ext.extend(Ext.Window, {
grid: null,

constructor: function(config)
{
config = config || {};
config.action = config.action || '';

var ds = new Ext.data.Store({
restful: true,
autoSave: false,
batch: true,
autoLoad: true,
sortInfo : {field: "name", direction: "ASC"},
proxy: new Ext.data.HttpProxy({
url: config.action
}),
reader: new Ext.data.JsonReader({
root: 'data',
idProperty: 'id'
},
[
{ name: 'id' },
{ name: 'name' },
{ name: 'ProgressPoints' },
]
),
writer: new Ext.data.JsonWriter({
encode: true,
writeAllFields: true
}),
listeners: {
save: function(store,batch) {
Ext.MessageBox.hide();
/*var len = this.getModifiedRecords().length;
if(len < 1) { Ext.getCmp('save_all').disable(); }*/
},
beforesave: function() {
Ext.MessageBox.show({
msg: '????????',
progressText: '???...',
width:300,
wait:true,
icon:'ext-mb-download', //custom class in msg-box.html
animEl: 'mb7'
});
}
/*,
metachange: function(ds) { alert('datachanged') ; },
add: function() { Ext.getCmp('save_all').enable(); },
update: function() { Ext.getCmp('save_all').enable(); },
remove: function() { Ext.getCmp('save_all').enable(); },
clear: function() { Ext.getCmp('save_all').enable(); }*/
}

});

this.grid = new Ext.grid.EditorGridPanel( {
height: 200,
store: ds,
loadMask: true,
viewConfig: {
forceFit: true
},
listeners: {
render: function()
{
var dgz,dpz,
v = this;
dgz = new Ext.dd.DragZone(v.getEl(), {
getDragData: function(e){

var sourceEl = e.getTarget('li.pps-item', 10);
if(!sourceEl) return;
this.dragItemOwner = sourceEl.parentNode;
this.sourceEl = sourceEl;
var index = Ext.fly(this.dragItemOwner).getAttribute('alt');

if (sourceEl) {
Ext.fly(sourceEl).addClass('move');
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return this.dragData = {
sourceEl: sourceEl,
sIndex: Ext.select(sourceEl.parentNode.childNodes).indexOf(sourceEl),
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
sequenceTemplateRecord: ds.getAt(index)
}
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});

dpz = new Ext.dd.DropZone(this.getView().scroller.dom, {

getTargetFromEvent: function(e) {
var target = e.getTarget('li.pps-item');
if(target && target.parentNode.id == dgz.dragItemOwner.id && target != dgz.sourceEl )
return target;
},

onNodeEnter : function(target, dd, e, data){
Ext.fly(data.sourceEl).addClass('move');
},
onNodeOut : function(target, dd, e, data){
Ext.fly(data.sourceEl).removeClass('move');
},
onNodeDrop : function(target, dd, e, data){
dgz.dragItemOwner = null;
Ext.fly(data.sourceEl).removeClass('move');
if(data.sourceEl && data.sourceEl != target)
{
var rec = data.sequenceTemplateRecord,
pps = rec.data.ProgressPoints;
var tIndex = Ext.select(target.parentNode.childNodes).indexOf(target);
var clone = pps.concat([]);
var tmp = clone[tIndex];
clone[tIndex] = clone[data.sIndex];
clone[data.sIndex] = tmp;
rec.set('ProgressPoints', clone);

Ext.dd.DragDropMgr.swapNode(target, data.sourceEl);
return true;
}
return false;
}
});

}
},
viewConfig: {
forceFit:true,
enableRowBody:true,
itemSelector: '.sequence-template',
getRowClass : function(record, rowIndex, p, store){
if(record.data.id) {
}
var arrpps = [],
pps;
if((pps = record.data.ProgressPoints))
{
for(var i=0; i<pps.length; i++)
{
arrpps.push('<li class="pps-item">'+pps[i].name+'</li>');
}
}

p.body = '<ul id="pps_'+rowIndex+'" alt="'+rowIndex+'"class="sf-pps-list">' + arrpps.join('') + '</ul><div class="x-clear"></div>';
return 'x-grid3-row-expanded';
}
},
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 50,
sortable: false
},
columns: [
{ id: 'id', header: '??', width: 30, dataIndex: 'id', hidden: true },
{ header: '??',
dataIndex: 'name',
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false
})
},/*
{ header: '??', width: 20, dataIndex: 'weight',
sortable: true,
editor: new Ext.form.NumberField({
allowBlank: true
})
},
{ header: '??', width: 200, dataIndex: 'description',
editor: new Ext.form.TextArea({
allowBlank: true
})
},*/
{
xtype: 'actioncolumn',
width: 50,
items: [
{
icon : '/js/ext/examples/shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: '??',
handler: function(grid, rowIndex, colIndex) {
var rec = ds.getAt(rowIndex);
if(rec) ds.remove(rec);
}
},
{
icon : '/js/ext/examples/shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: '??',
handler: function(grid, rowIndex, colIndex) {
// var rec = ds.getAt(rowIndex);
// if(rec) ds.remove(rec);
}
}
]
}
]
}) // end columnModel
});






Ext.symfony.OPTSequenceTemplateManager.superclass.constructor.call(this,{
title: '????????',
width:400,
layout: 'fit',
modal: true,
closeAction: 'hide',
items: this.grid, // end grid
buttons: [
{ text: '??',
handler : function(){
// access the Record constructor through the grid's store
var store = this.grid.getStore();
var Plant = store.recordType;
var p = new Plant({
name: '??',
weight: 0
});
this.grid.stopEditing();
store.insert(0, p);
this.grid.startEditing(0, 1);
},
scope: this
},
{
id: 'save_all1',
text: '??',
handler: function() {
ds.save();
},
disabled: false
},
{
text: '??',
handler: function() {
ds.rejectChanges();
},
disabled: false
},
{ text: '??',
handler: function() { ds.rejectChanges(); this.hide(); },
scope: this
}
]
});
}

});