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.

22.jpg
PHP Code:
Ext.namespace('Ext.symfony');

Ext.symfony.OPTSequenceTemplateManager Ext.extend(Ext.Window, {
    
gridnull,

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

        var 
ds = new Ext.data.Store({
            
restfultrue,
            
autoSavefalse,
            
batchtrue,
            
autoLoadtrue,
            
sortInfo : {field"name"direction"ASC"},
            
proxy: new Ext.data.HttpProxy({
                
urlconfig.action
            
}),
            
reader: new Ext.data.JsonReader({
                    
root'data',
                    
idProperty'id'
            
},
            [
                { 
name'id' },
                { 
name'name' },
                { 
name'ProgressPoints' },
            ]
            ),
            
writer: new Ext.data.JsonWriter({
                
encodetrue,
                
writeAllFieldstrue
            
}),
            
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(    {
            
height200,
            
storeds,
            
loadMasktrue,
            
viewConfig: {
                 
forceFittrue
            
},
            
listeners: {
                
render: function()
                {
                    var 
dgz,dpz,
                        
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');
                            
sourceEl.cloneNode(true);
                            
d.id Ext.id();
                            return  
this.dragData = {
                                
sourceElsourceEl,
                                
sIndex:  Ext.select(sourceEl.parentNode.childNodes).indexOf(sourceEl),
                                
repairXYExt.fly(sourceEl).getXY(),
                                
ddeld,
                                
sequenceTemplateRecordds.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(targetddedata){
                            
Ext.fly(data.sourceEl).addClass('move');
                        },
                        
onNodeOut : function(targetddedata){
                               
Ext.fly(data.sourceEl).removeClass('move');
                        },
                        
onNodeDrop : function(targetddedata){
                            
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(targetdata.sourceEl);
                                return 
true;
                            }
                            return 
false;
                        }
                    });

                }
            },
            
viewConfig: {
                
forceFit:true,
                
enableRowBody:true,
                
itemSelector'.sequence-template',
                
getRowClass : function(recordrowIndexpstore){
                    if(
record.data.id) {
                    }
                    var 
arrpps = [],
                        
pps;
                    if((
pps record.data.ProgressPoints))
                    {
                        for(var 
i=0i<pps.lengthi++)
                        {
                            
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: {
                    
width50,
                    
sortablefalse
                
},
                
columns: [
                    {    
id'id'header'编号'width30dataIndex'id'hiddentrue },
                    {    
header'名称',
                        
dataIndex'name',
                        
sortabletrue,
                        
editor: new Ext.form.TextField({
                            
allowBlankfalse
                        
})
                    },
/*
                    {    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',
                        
width50,
                        
items: [
                        {
                            
icon   '/js/ext/examples/shared/icons/fam/delete.gif',  // Use a URL in the icon config
                            
tooltip'删除',
                            
handler: function(gridrowIndexcolIndex) {
                                var 
rec ds.getAt(rowIndex);
                                if(
recds.remove(rec);
                            }
                        },
                         {
                            
icon   '/js/ext/examples/shared/icons/fam/delete.gif',  // Use a URL in the icon config
                            
tooltip'编辑',
                            
handler: function(gridrowIndexcolIndex) {
                               
// var rec = ds.getAt(rowIndex);
                               // if(rec) ds.remove(rec);
                            
}
                        }
                        ]
                    }
                ]
            }) 
// end columnModel
        
});






        
Ext.symfony.OPTSequenceTemplateManager.superclass.constructor.call(this,{
            
title'订单序列模版管理',
            
width:400,
            
layout'fit',
            
modaltrue,
            
closeAction'hide',
            
itemsthis.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 
= new Plant({
                            
name'普通',
                            
weight0
                        
});
                        
this.grid.stopEditing();
                        
store.insert(0p);
                        
this.grid.startEditing(01);
                    },
                    
scopethis
                
},
                {
                    
id'save_all1',
                    
text'保存',
                    
handler: function() {
                        
ds.save();
                    },
                    
disabledfalse
                
},
                {
                    
text'重置',
                    
handler: function() {
                        
ds.rejectChanges();
                    },
                    
disabledfalse
                
},
                {     
text'关闭',
                    
handler: function() { ds.rejectChanges(); this.hide(); },
                    
scopethis
                
}
            ]
        });
    }

});