extjs,drag-and-drop,extjs4.2,treepanel , Extjs: drag n drop tree node and its children to a grid


Extjs: drag n drop tree node and its children to a grid

Question:

Tag: extjs,drag-and-drop,extjs4.2,treepanel

How can I drag and drop a node(parent) and all its children without selecting them, when the parent node is selected and dragged in the tree?

Sample code which I have tried


Answer:

In the beforedrop event, you need to add the child nodes to the data.records array. Every record in that array will be included in the drag & drop process. Likewise, if you did not want to include a node that was dragged and dropped, you would remove that record from data.records while in the beforedrop event.

Please take a look at my sample code to see an approach for how to add the child nodes.

The relevant piece is:

var childNodes = Ext.Array.from(record.childNodes) || []; // ensure it's an array

for (var i=0; i < childNodes.length; i++) {
    data.records.push(childNodes[i]);
}

Related:


ExtJS5 Store filter “Uncaught TypeError: Cannot read property 'get' of undefined”


extjs,extjs5
I'm using the gpl version of extjs5.1.1 without sencha cmd. In my application a Grid displays correctly a Store. In the window, there is a checkbox wich code is : { xtype : 'checkbox', itemId : 'employeeFilter', value : false, boxLabel : 'Show inaktiv users', margin : '0 5 0...

Using ExtJs Grid on existing HTML page


extjs,extjs5
I need to create a grid on my HTML page. I am able to do that but the whole process made me to include the complete Ext sdk folder in my solution which made my application size considerable. I do not want to make use of everything nor does my...

How can addCls to Button with ViewModel binding in ExtJS5


javascript,extjs,mvvm,extjs5
I want to change css class after binding. Is it possible in ExtJS5? I added to comments. fiddle: https://fiddle.sencha.com/#fiddle/olc...

Extjs building form on metadata


json,extjs,model-view-controller,dynamic
I will build a FormPanel with ExtJs 4 configured by metadata received from server. The meta data (json array) looks like this: { "metaData": { [ { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" }, { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" } ] }, "success": true,...

extjs Possibility of using grid widgets in custom elements


javascript,jquery,extjs
Is it possible to use these widgets http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#widget-grid in costum elements div/span, not in a panel? I know only about Progressbar: Ext.create("Ext.ProgressBar", { renderTo: costumSpan[0], value: .5 }); What about others?...

Showing context menu in controller


extjs
I have two views - one for tree panel and one for context menu (defined as FilesEditor.view.FilesEditorContextMenu). And I have a controller, in which it listens to itemcontextmenu event. I do not know how should I create (where and at what stage?) and how to show my FilesEditorContextMenu. The part...

Ext.Ajax.request variables


javascript,php,ajax,extjs
I want to access to some variable(datoslicitproduct) that I declared out ot an Ext.Ajax.request, but I initialize it inside the request. I have this function : function ExportarExcelproddet(){ var datoslicitaciones = []; var datoslicitproduct=[]; var datafinal; var fila=[]; var fila2=[]; var Tipo; var IdPliego; ExpGridstore.each(function(r){ fila.push(r.data['Tipo']); fila.push(r.data['IdTxt']); fila.push(r.data['Id_Exp']); fila.push(r.data['Exp']); fila.push(r.data['Org']);...

Extjs xml reader not working


extjs,xmlreader
I have the following XML Configuration... <?xml version="1.0" encoding="UTF-8"?> <Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="IncidentMgt"> <EntityType Name="in"> <Property Name="persistent_id" Type="Edm.String" Nullable="true" MaxLength="30"/> <Property Name="active_f" Type="Edm.Int32" Nullable="true"/> <Property Name="add_property_persids" Type="Edm.String" Nullable="true"/> <Property Name="add_workflow_persids" Type="Edm.String" Nullable="true"/>...

change button text color in ExtJS


javascript,css,css3,extjs,extjs5
I need to change text color of my button. I defined a css class like; .mbutton{ background:transparent; color:red; border:none; } and button definition is here; Ext.create('Ext.Button', { renderTo: Ext.getBody(), text: 'Red text', cls:'mbutton' }); fiddle: https://fiddle.sencha.com/#fiddle/olj...

Extjs create form items with json store


json,extjs,extjs4,extjs-mvc
I have created a form panel view and I will create some form items iside this panel. The communication to the store, controller and model works fine but how can I create the items in the view? Json array (retrieved from external service): { "data": [ { "name": "ff", "xtype":...

Filtering Array within a store record


javascript,arrays,json,extjs
I have a JSON object in a store that looks like the below. I am dynamically filtering values based on selections in a property grid. I am not filtering on the top level values (personName, primaryRole etc) but instead I want to drill down into the array of periods I...

python pygame - how to create a drag and drop with multiple images?


python,image,drag-and-drop,pygame
So I've been trying to create a jigsaw puzzle using pygame in python.The only problem is that I'm having trouble creating the board with multiple images that i can drag along the screen (no need to connect the images like a puzzle what so ever just a simple drag and...

Ext JS Dashboard Layout and maximize/minimize panels


extjs,layout,dashboard,extjs5,panels
I'm attaching a picture with the mock up that I'm trying to develop with Ext JS. I'm using a Border layout, and then a Dashboard for the central part, however I see some limitations on it: Panels in the dashboard don't have minimize or maximize button. How can I implement...

using local storage saved value as a text in a root text


extjs,tree,local-storage,store
I have a treeView in my extjs View, in which I need to give the the value of a local storage variable as the root name.The value to the local storage is fed when user logins successfully : Ext.define('Eits.view.OrgTreeView', { extend : 'Ext.tree.TreePanel', requires: ['Eits.model.OrgTreeModel'], width : '100%', region :...

Ext JS 5 Data Binding Combobox


extjs,mvvm,binding,extjs5
I have an Ext JS 5.0.1 application that I am working on. I have a simple window with a grid and a form. I have the grid bound to my store and when a row is selected, all the textfields in the form bind, but I also have a combobox...

Angular Js Drag and Drop - Passing $index to Directive


javascript,angularjs,drag-and-drop
I have been successful in implementing the Drag and Drop feature in Angular JS. The basic idea is like Match the City with the Countries. I am able to drag the city and drop in into the Country box. But, the dropped item gets reflected in all the country box....

Extjs adding a listener to tree panel returns Uncaught TypeError: Cannot read property 'scope' of undefined


extjs
I am trying to add a selection change listener on a tree panel but i get the following error: Uncaught TypeError: Cannot read property 'scope' of undefined code follows: xxx.view.trees.MainTree.js extend: 'Ext.tree.Panel', requires: [ 'xxx.store.TreeStore' ], xtype: 'main-tree', height: 400, width: 350, title: 'Tree', useArrows: true, initComponent: function() { Ext.apply(this,...

Drag & drop something from outside the map onto a feature (openlayers)?


javascript,drag-and-drop,openlayers,openlayers-3
I'm developing a website with openlayers where the user should be able to drag the name of a building from a list of buildings(outside the map) onto a feature on the map. Since I have found no way to do this with openlayers I thought about doing this by using...

ExtJS Remove item of a store


javascript,extjs,extjs5
In a extjs app I have a tree panel that reads an json file, in the tree panel i have a check box that execute an action, additionally I save the checked element in a grid panel of a tab panel... I want to remove any element of the store...

How could I dynamically choose a div class with an if-else statement?


javascript,extjs,sencha-touch
I use Ext.XTemplate to show my data in a list and I want to realize a function that when I get a positive number, it show as red and green when negative. To realize this function, I create two style and I want to pass parameters to dynamically create template...

CSS Button disabled state?


css,extjs
I am new on CSS, How should I define my CSS class for catch button's disabled state? There is my CSS class but it didn't work. .mbutton:disabled{ background: transparent; } EDIT There is JSfiddle example, http://jsfiddle.net/sefiktemel/v7h9gczu/...

Sencha architect, I have a form and how to config its `reader`?


extjs
Sencha architect, I have a form and I want to config its reader like this, Ext.create('Ext.data.JsonReader', { root : "rows", model : 'city' }) In Sencha architect, it will be add a pair of single quote mark. So how to config reader of the form?...

execute function using Ext.Loader.setConfig with ExtJS


javascript,extjs,extjs5
Im trying to create a path with ExtJS using Ext.Loader.setConfig, im following the example from Api Docs but every time i try to execute the method holaMundo not works and not show any error. This is the code of NombreClase.js in js/pruebapath/miprueba/ Ext.define('js.pruebapath.miprueba.NombreClase', { constructor : function () { return...

Score if drag&drop to the right category and make img disappear Drag&drop Jquery game


jquery-ui,drag-and-drop,jquery-ui-draggable
I'm very new to j Query UI. I was trying to design a drag&drop game. I looked into lots of answers in stack overflow but not getting very similar examples(or maybe I couldn't figure out). Basically, I tried to do a recycling game where you can drag and drop different...

Angular does not recognize the dynamically loaded page in Extjs


javascript,angularjs,extjs,extjs4,angularjs-scope
I have a SPA in Extjs system. I have also included angular and the necessary modules which i want to use on a page (external html referred in a panel of extjs). Angular is defined in and working everywhere except in newly loaded page.The problem is that i have to...

How to using variable when define not using initComponent ExtJs


extjs
I have a question when defining 1 panel. Ex1: Ext.define('AppTest.view.AppMain', { extend: 'Ext.panel.Panel', xFile: "File", // Init initComponent: function () { Ext.apply(this, { items: [ { xtype: 'button', action: 'file', text: this.xFile // Using variable here } ] }); this.callParent(); } }); Ex2: Ext.define('AppTest.view.AppMain', { extend: 'Ext.panel.Panel', xFile: "File", items:...

ExtJs 5.1 - Ext.Panel with XML-Highlighting, editing, linenumbering capabilities


javascript,html,extjs,codemirror
Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing. I have searched through the web and found the Javascript API CodeMirror. I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the...

How can I make different shapes of a canvas draggable and particular area of it droppable in the same canvas


javascript,canvas,drag-and-drop
I want to create a Canvas in which there will be two areas (Left and right), Left panel will contain some shapes which will be draggable(static as well) and on the right side I would be able to drop them, but I am facing following problem, I am not able...

ExtJS: What are the only required files for grid?


extjs,extjs5
I have a .net application in which I have used ExtJS grid on only one page. I have included the complete EXT folder in my application that has increased the application size to a considerable amount. I am populating the grid in Ext.onready function and currently the requirement of ExtJS...

Easeljs snap to grid


javascript,canvas,drag-and-drop,easeljs,createjs
I am building an app using HTML5 in which a grid is drawn. I have some shapes on it that you can move. What I'm trying to do is to snap objects to some points defined when you hover them while moving a shape. What I tried is to save...

How to display nested objects in a GridPanel in ExtJS (and Sencha architect)?


javascript,extjs,extjs5,sencha-architect,extjs-grid
I've got an incoming array of Offering objects that looks like this: [{ "id" : 16, "price" : 500, "quantity" : 2000, "denomination" : "case", "denominationPlural" : "cases", "product" : { "id" : 14, "description" : "This is the text description for product 14." } }, { "id" : 18,...

Ext.device.filesystem.FileEntry.read() - type: “text” returns blank file


extjs,filesystems,device
I am facing a problem with Ext.device.filesystem.FileEntry.read() method. When I try to read the text/JSON file as text, I get a blank file. Any idea? Looks like readastext method of extjs file reader is buggy. Following does not work: var fileEntry = new Ext.device.filesystem.FileEntry(newFilePath, fileSystem); fileEntry.read({ //type: "binaryString", encoding: 'UTF8',...

ExtJS - row renderer - if cell has certain value, highlight entire row


html,extjs
If the column cell value is > 5000, I want to highlight that entire row. Right now I am only able to highlight that cell. Grid column renderer: renderer:function(val_, meta_, rec_) { if(val_> 5000) { meta_.style = "background-color:red;"; } } ...

ToolTip in bryntum scheduler


extjs
I am new to Extjs. I am using bryntum scheduler in my application. In that I want to show tooltip over scheduled item. I checked with bryntum api and found that I can use tooltipTpl to show tooltip and tipCfg to configure it. I added eventmouseenter listener and in respective...

How to achieve the following in extjs


extjs,layout,header,panel
--Title------------------------------- | | | | | <Content> | | | |_____________________________________| How to achieve the above panel in extjs? Edit: It should look something like this: http://oi57.tinypic.com/eiw49.jpg...

Sencha/Extjs rest call with all parameters


json,rest,extjs,sencha-touch
I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields. When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server....

Loading delay extjs


javascript,extjs,panel,loading,mask
I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the...

Can a dialog intercept drag'n'drop messages passed to its controls?


winapi,mfc,drag-and-drop
If a dialog registers some of its controls as drop-targets, will drag'n'drop messages intended for those controls pass through the dialog's message processing in a way that the dialog can register a message handler to be notified/intercept those messages? In a similar fashion to this question, I want to catch...

calling the parent controller function in Ext.Ajax.request


extjs,view,controller,scope
I have a login Page which authenticates the user.On correct username and password it should hide the loginview and display the next view.When I call the function to do the same it gives an error saying "Uncaught TypeError: this.functionname is not a function.Here is my code for the same: startMain...

Extjs Progressbar in span/div is not correct


javascript,jquery,css,extjs
I want to render component progress-bar in my span and insert it in text/tooltip/cell etc. Then I render progressbar in body: Ext.create("Ext.ProgressBar", { renderTo: Ext.getBody(), value: chartCase.key / 100, width: 100 }); Style for "x-progress-text" taking the width of component (100px in this case), so it is center-justified. Then I...

Save ajax response to file


javascript,ajax,extjs
Let's assume I have following button code: Ext.create('widget.button', { handler: function () { Ext.Ajax.request({ method: 'POST', url: 'index.php?r=store/exportXLS', params: { queryName: me.exporting.name, queryGroups: Ext.JSON.encode(me.exporting.groups) }, success: function (response) { //??? } }); }, dock: 'top', text: 'Экспорт в XLS' }); Because groups variable hold too much parameters, I must send...

ExtJS grid emptyText not visible in panel with vbox layout


extjs
I'm using Ext JS 5.1.0. If I create a grid in a vbox layout with no records, the emptyText is rendered in the DOM, but the height of the grid is calculated incorrectly and the text is not visible. Is there a way to get it to automatically grow without...

Unable to listen to load event in the controller


extjs,model-view-controller
I scanned many threads here at stackoverflow (this and this), but none of them helps me to solve my problem. So, I have a store which is defined like this: Ext.define('fileseditor.store.fileseditorNavigStore',{ extend:'Ext.data.TreeStore', ... I've heard about getters and tried to do this in my controller: init: function(){ this.getfileseditorNavigStoreStore().addListener('load', this.finishedLoading, this);...

ExtJS Find the id of an element


javascript,extjs,extjs5
I have an app with the MVC model, in the view I create a slider with the listeners, but I want that the listeners are in the controller class, and I want to get the id of the element, but it is generated by a variable from a tree panel.......

How to catch Delete key event in tree panel controller


extjs
I have a tree panel view (defined as FilesEditorNavigTree) and a controller. In a controller I want to catch Delete key event in order to perform some procedure. I tried to do it like this: ... init:function(){ this.control({ 'FilesEditorNavigTree':{ specialkey:function(a, b){ alert(b.keyCode); // just for testing reasons } But it...

button click issue in Ext js


extjs,logic
i have small query i created four text fields and one button,in text fields i gave property allowblank:true if user enter shows error message,it's working perfect.If the click the button the inserted perfect,after that the textboxes becomes empty it's showing blank errormessage.If iam using Allowblank:false it's working fine.but i require...

Not able to click ExtJS Dropdown button and select list elements - Selenium Webdriver Java


java,selenium,testing,extjs,selenium-webdriver
I am having difficulty in clicking a drop down and selecting option from the list. Below screenshot of the application. Our application uses heavy ExtJS and below is the HTML code for dropdown button and textbox. <div id="combobox-1115-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" role="presentation" style="width: 325px;"> <div id="ext-gen1273" class="x-hide-display x-form-data-hidden" role="presentation"></div> <input id="ext-gen1272"...

what is “root:'data' ” extjs store config


javascript,extjs,proxy,treeview
I am very new to ExtJs and I have the following code for a treeView,,which has a default root in the beginning and then an Ajax call to a servlet .But i don't understand the 'root' field with value 'data' .Is data an alias or xType .Here is the code:...

Extjs Cellediting onclick of a button


javascript,extjs
I have activate button on each row of grid so users can activate only the row they want to edit and the button changes to deactivate.how can I save status of the buttons for next time I reopen the panel? below is my code and also: https://fiddle.sencha.com/#fiddle/ofp Ext.application({ name :...

Override Sencha Touch class


javascript,extjs,sencha-touch
I am working in a Sencha Touch application and I have the next doubt/issue with this code. Ext.each(records, function(record){ newItem = Ext.create('Ext.Panel', { material: record.get('material'), cls: 'setitems-item', tpl: '<div class="setitems-item-material">{material}</div>' + '<div class="setitems-item-atpstatus {atpstatus}">{cquantity}</div>' + '<div class="setitems-item-cdd">{[Cicero.Helper.formatSAPdate2Str(values.cdd)]}</div>' + '<div...