0

Ext JS は初めてです。「ドラッグ アンド ドロップ」を試してみましたが、行をドラッグしても問題なく動作しています。私が今試しているのは、左側のグリッドから行 (MySQL のフィールド) をドラッグし、データベース テーブルのデータを列として提供する右側のグリッドにドロップすることです。

私が今使っているコードは、

Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.dd.*'
    ]);

    Ext.define('DataObject', {
        extend: 'Ext.data.Model',
        fields: ['Field']
    });

    Ext.onReady(function(){

            var firstGridStore = Ext.create('Ext.data.Store', {
            model: 'DataObject',

                autoLoad: true,
                pageSize: 4,
                proxy: {
                    type: 'ajax',
                    url : 'user.php',
                    reader: {
                    type: 'json',
                    root: 'users'            
                }
            }
        });

        // Column Model shortcut array
        var columns = [
            {text: "Fields", sortable: true, width: 50, dataIndex: 'Field'}
        ];

        var firstGrid = Ext.create('Ext.grid.Panel', {
            multiSelect: true,
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'firstGridDDGroup',
                    dropGroup: 'secondGridDDGroup'
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                        Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                    }
                }
            },
            store            : firstGridStore,
            columns          : columns,
            stripeRows       : true,
            title            : 'First Grid',
            margins          : '0 2 0 0'
        });

        var secondGridStore = Ext.create('Ext.data.Store', {
            model: 'DataObject'
        });

        // create the destination Grid
        var secondGrid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'secondGridDDGroup',
                    dropGroup: 'firstGridDDGroup'
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                        Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
                    }
                }
            },
            store            : secondGridStore,
            columns            : columns,
            stripeRows       : true,
            title                   : 'Second Grid',
            margins             : '0 0 0 3'
        });

        //Simple 'border layout' panel to house both grids
        var displayPanel = Ext.create('Ext.Panel', {
            layout: 'fit',
            height       : 300,
            layout       : {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            renderTo     : 'panel',
            defaults     : { flex : 1 }, //auto stretch
            items        : [
                firstGrid,
                secondGrid
            ],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'bottom',
                items: ['->', // Fill
                {
                    text: 'Reset both grids',
                    handler: function(){
                        //refresh source grid
                        firstGridStore.loadData(myData);

                        //purge destination grid
                        secondGridStore.removeAll();
                    }
                }]
            }
        });
    });

私の要件では、左側のグリッドのフィールドは、右側のグリッドの (データベースからの) データのタイトルである必要があります。

左のグリッドには次のようなグリッド データがあります:
Fields
id
name
data
左のグリッドからデータをドラッグした後、右のグリッドには次のようなデータが必要です:
id
1
2
3
注: ここでは id のみがドラッグされます。

誰かが私を助けることができますか？

ありがとう。

4

2 に答える 2

2

「drop」イベントの代わりに「beforedrop」を使用できますが、新しい関数を dropFunction 属性に割り当てることで、独自のカスタム ドロップ ハンドラを設定できます。問題の解決に役立つスポット ライトになることを願っています!! http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.DragDropも参照してください。

于 2012-11-17T23:01:50.967 に答える
0

心に留めておくべきことがいくつかあります..

  1. あなたのモデルはレイアウトを駆動します - json-return からのすべてのフィールドをドラッグ可能にしたい場合は、1 つのフィールド 'Field' の 'DataObject' を定義しています。モデルにすべてのフィールドを含める必要があります。つまり、

    Ext.define('DataObject', {
    extend: 'Ext.data.Model',
    fields: [
       'id',
       'name',
       'data'
    ]
});

  2. フィールド名は、ドラッグドロップのソースとターゲットの間で一致する必要があります-目的のドラッグフィールドの名前が同じである限り(dataField定義)、ドラッグドロッププロキシは目的のアイテムをすべてプルします。

  3. 当然、タイトルだけを表示したい場合、表示は次のようになります。

    items: [
   { dataIndex: 'id', hidden: true } ,
   { dataIndex: 'name', hidden: true },
   { text: 'title', dataIndex: 'data', width: xx }   // loose example
]

ドラッグドロップ プロキシは、表示されているかどうかに関係なく、グリッド/フォーム行のすべてをプルします。

お役に立てれば

于 2014-12-04T15:33:42.193 に答える