ExtJS में TreePanel और GridPanel के बीच खींचें और छोड़ें

समस्या

ExtJS बहुत सारी खूबियों वाली एक बेहतरीन लाइब्रेरी है। Http://dev.sencha.com/deploy/dev/examples/ पर आप वास्तविक परियोजनाओं में उपयोग के लिए कई डेमो स्रोत उपलब्ध कर सकते हैं, हालांकि, निश्चित रूप से, यह सभी सवालों के जवाब नहीं देगा।

मुझे TreePanel और GridPanel के बीच एक डबल ड्रैग करने की आवश्यकता थी। एक्सटजेएस फोरम पर और सामान्य रूप से इंटरनेट पर केवल खंडित जानकारी मिली, मैंने इसे स्वयं लिखने का फैसला किया। मैंने इसे कैसे किया - कट के तहत।

निर्णय

के साथ शुरू करने के लिए, यह निर्णय लेने के लायक है - हमें बिल्कुल हमारे साथ सभी एक्सटीजेएस फ़ाइलों को खींचने की आवश्यकता नहीं है। इसलिए, HTML फ़ाइल जिसके साथ यह शुरू होता है सब कुछ इस तरह दिखता है:

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >

< link rel ="stylesheet" type ="text/css" href ="files/ext-all.css" >

< script type ="text/javascript" src ="files/ext-base.js" ></ script >

<script type= "text/javascript" src= "files/ext-all.js" ></script>

<script type= "text/javascript" src= "files/grid2treedrag.js" > </ script >

< title id ="page-title" > Drag&Drop TreePanel GridPanel ExtJS </ title >

</ head >

< body >

< h3 > Drag&Drop TreePanel GridPanel ExtJS </ h3 >

</ body >

</ html >



* This source code was highlighted with Source Code Highlighter .

यह HTML के साथ खत्म हो गया है, और सीधे जावास्क्रिप्ट पर चलते हैं। परीक्षण के लिए, मैं उपयोगकर्ता के एक निश्चित "टोकरी" पर विचार करने का प्रस्ताव करता हूं, बाईं ओर (ग्रिडपैनल) - उत्पादों, दाईं ओर (ट्रीपनेल) - उनके साथ निर्देशिका।

सबसे पहले, हमारा ग्रिड बनाएं:

var grid1 = new Ext.grid.GridPanel({

store: new Ext.data.ArrayStore({

fields: [ 'name' , 'unit' , 'price' ],

data: d

}),

columns:[

{

id: 'name_column' ,

header: "" ,

width:40,

sortable: true ,

dataIndex: 'name'

},{

id: 'unit_column' ,

header: ". ." ,

width:20,

sortable: true ,

dataIndex: 'unit'

},

{

id: 'price_column' ,

header: "" ,

width:30,

sortable: true ,

dataIndex: 'price'

}

],

sm : sm,

viewConfig:{

forceFit: true

},

id: 'grid' ,

title: '' ,

region: 'center' ,

layout: 'fit' ,

enableDragDrop: true ,

ddGroup: 'grid2tree'

});



* This source code was highlighted with Source Code Highlighter .

d एक सरल सरणी है जिसका उपयोग ArrayStore में किया जाता है, निश्चित रूप से, आप ग्रिड को किसी भी तरह से सुविधाजनक तरीके से वास्तविक एप्लिकेशन में भर सकते हैं। ग्रिड विवरण में सबसे महत्वपूर्ण बात यह है कि डीग्रैड्रोप को सही पर सेट किया गया है, और ddGroup: 'grid2tree' हमारे ड्रैग ग्रुप का नाम है। एक पेड़ के लिए, यह समान होना चाहिए।

अब एक पेड़ बनाएँ:

var tree = new Ext.tree.TreePanel({

root:{

text: '' ,

id: 'root' ,

expanded: true ,

children:[{

text: '' ,

children:[{

text: '' ,

leaf: true ,

price: 7000,

unit: ''

}, {

text: '' ,

leaf: true ,

price: 5400,

unit: ''

}, {

text: ' ' ,

children:[{

text: '' ,

leaf: true ,

price: 7000,

unit: ''

}]

}]

},{

text: ' ' ,

children:[{

text: '' ,

leaf: true ,

price: 800,

unit: ''

}]

},{

text: ' ++' ,

leaf: true ,

price: 1200,

unit: ''

}]

},

loader: new Ext.tree.TreeLoader({

preloadChildren: true

}) ,

enableDD: true ,

ddGroup: 'grid2tree' ,

id: 'tree' ,

region: 'east' ,

title: ' ' ,

layout: 'fit' ,

width:300,

split: true ,

collapsible: true ,

autoScroll: true ,

listeners:{

beforenodedrop: function (e) {



if (Ext.isArray(e.data.selections)) {

if (e.target == this .getRootNode()) {

return false ;

}

e.cancel = false ;

e.dropNode = [];

var r;

for ( var i = 0; i < e.data.selections.length; i++) {

r = e.data.selections[i];

e.dropNode.push( this .loader.createNode({

text:r.get( 'name' ),

leaf: true ,

price:r.get( 'price' ),

unit: r.get( 'unit' )

}));

r.store.remove(r);

}

return true ;

}

}

}

});



* This source code was highlighted with Source Code Highlighter .

पंक्तियां

if (e.target == this.getRootNode()) {

return false;

}







यदि आप ग्रिड से रूट तत्व पर वस्तुओं को खींचने और छोड़ने की अनुमति देना चाहते हैं तो टिप्पणी की जा सकती है। जैसा कि आप देख सकते हैं, सबसे पहले यह जांचा जाता है कि क्या डेटा के साथ चयनित पंक्तियों की सरणी (आप शिफ्ट और Ctrl के साथ कई का चयन कर सकते हैं) जो हमें ड्रैग और ड्रॉप करने के लिए दी गई है, फिर हम एक लूप में चयनित पंक्तियों के माध्यम से जाते हैं और आवश्यक डेटा के साथ नोड बनाते हैं। मैं आपको याद दिलाता हूं कि हमारे द्वारा जोड़े गए मूल्य और इकाई जैसे "कस्टम" फ़ील्ड को फिर विशेषता नोड से निकाला जा सकता है।

हम एक अतिरिक्त ध्वज को जकड़ते हैं, जिसका उद्देश्य प्रदर्शित करना है, और जिस पर आगे तर्क बंधा हुआ है, साथ ही साथ हमारी "टोकरी" प्रदर्शित करने के लिए एक खिड़की भी है।

var cb = new Ext.FormPanel({

region: 'south' ,

frame: true ,

height: 40,

labelWidth: 200,

labelPad: 0,

items: [

{

xtype: 'checkbox' ,

fieldLabel: ' ' ,

listeners: {

check: function (cb, checked ) {

remove_catalogs = checked ;

}

}

}

]

});



// create and show the window

var win = new Ext.Window({

title: ' ' ,

id: 'tree2divdrag' ,

border: false ,

layout: 'border' ,

width:700,

height:400,

items:[tree, grid1, cb]

});

win.show();



* This source code was highlighted with Source Code Highlighter .

अब हमारे ग्रिड के लिए तथाकथित DropTarget बनाएं, अर्थात, वह स्थान जहां आप वस्तुओं को खींच और छोड़ सकते हैं।

var gridTargetEl = grid1.getView().scroller.dom;





हमें इसके लिए एक कंटेनर तत्व की आवश्यकता है। यदि आप extJS डेमो के स्रोतों में या ext-all-debug.js में देखते हैं, तो GridView के लिए आप निम्नलिखित लाइनें देख सकते हैं:

ts.master = new Ext.Template(

'<div class="x-grid3" hidefocus="true">' ,

'<div class="x-grid3-viewport">' ,

'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>' ,

'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>' ,

'</div>' ,

'<div class="x-grid3-resize-marker"> </div>' ,

'<div class="x-grid3-resize-proxy"> </div>' ,

'</div>'

);



* This source code was highlighted with Source Code Highlighter .

इसका मतलब यह है कि हमारे ग्रिड का "बॉडी" इसे फ्रेम करने वाले के अंदर है। इसलिए, हम इस आवरण के बारे में बताने वाले स्कोरर की संपत्ति तक पहुँच प्राप्त करते हैं, और इसकी DOM सामग्री लेते हैं।



अब, हमारे तत्व का उपयोग करते हुए, DropTarget को स्वयं बनाएं:

var GridDropTarget = new Ext.dd.DropTarget(gridTargetEl, {

ddGroup : 'grid2tree' ,

notifyDrop : function (ddSource, e, data) {

e.cancel = false ;

var node = ddSource.dragData.node;

if ( ( (node.parentNode == null ) || (!node.isLeaf() && !remove_catalogs) ) && !node.hasChildNodes() ) {

e.cancel = true ;

return false ;

}



var r = [];

if (!node.isLeaf()) {

node.cascade( function (n) {

var x = populate(n);

if (x != -1)

r.push(x);

});

}

else

r = populate(node);

grid1.store.add(r);

if ( (node.parentNode != null ) && (remove_catalogs || !node.hasChildNodes()) ) {

node.remove();

}

else {

removeChildNodes(node);

}

return true ;

}

});



* This source code was highlighted with Source Code Highlighter .

पहले, हम यह देखने के लिए जांचते हैं कि क्या यह रूट नोड है, या क्या निर्देशिकाओं को हटाना संभव है, और यह सब कोई वंशज नोड्स नहीं होना चाहिए। अन्यथा, हम नोड्स की सूची पर जाते हैं, अगर यह एक नोड नहीं है, या प्रक्रिया का उपयोग करके वर्तमान नोड को जोड़ें

var populate = function (node) {

if (!node.isLeaf()) return -1;

var r = new Ext.data.Record();

r.data.name = node.text;

r.data.price = node.attributes.price;

r.data.unit = node.attributes.unit;

return r;

}



* This source code was highlighted with Source Code Highlighter .

यह "फ़ोल्डर" नहीं जोड़ता है, लेकिन केवल नोड्स है, जिसे आइलफ () कहा जाता है। फिर ग्रिड स्टोरेज में रिकॉर्ड का एक सरणी जोड़ा जाता है (extJS इसे स्वयं अपडेट करेगा), और नोड्स को नष्ट किया जाना शुरू हो जाता है या प्रक्रिया से हटाया नहीं जाता है

var removeChildNodes = function (node) {

node.expand();

for ( var i = node.childNodes.length - 1; i >= 0; i--) {

var currentNode = node.childNodes[i];

if (currentNode.isLeaf() || remove_catalogs)

node.removeChild(currentNode);

else

removeChildNodes(currentNode);

}

}



* This source code was highlighted with Source Code Highlighter .

नोड्स का विस्तार किए बिना, उनका निष्कासन मेरे लिए काम नहीं करता था - लूप पास में नोड्स, लेकिन हटाए नहीं जाते हैं, सत्य के लिए सेट किए गए नष्ट पैरामीटर ने भी मदद करने के लिए कुछ नहीं किया, साथ ही हटाए गए चिल्ड्रन, एक्सपेल्डिल, आदि के विभिन्न रूपांतर भी। इसलिए, मुझे किसी भी टिप्पणी, सुझाव और सलाह पर खुशी होगी जो कि मैं और अधिक अनुभवी संबल से सुनूंगा।



डेमो यहां देखा जा सकता है: http://www.linky.ru/~dima4ka/extjs/ (ftp एक्सेस के लिए एक मित्र को धन्यवाद), आप वहां स्रोत फ़ाइलों को भी डाउनलोड कर सकते हैं।

उपयोगी लिंक

http://dev.sencha.com/deploy/dev/docs/

http://www.sencha.com/forum/