How can I use Ext.tree.ViewDDPlugin's events?
I have a TreePanel that uses DDPplugin, but I'd like to know how to listen to the drop event.
This is what my code looks like:
var monPretree = Ext.create('Ext.tree.Panel',{
id : 'treepanel',
title : 'TITRE',
//width : 800,
//height : 600,
width : 500,
enableDD: true,
useArrows : true,
viewConfig : {
plugins : {
ptype: 'treeviewdragdrop',
appendOnly: true,
listeners: {
drop: function (node, data, overModel, dropPosition) {
alert('CHANGE');
},
notifyDrop: function (dragSource, event, data) {
var nodeId = data.node.id;
alert(nodeId);
},
notifyOver: function (dragSource, event, data) {
alert('over');
}
}
}
},
singleExpand : false,
store : monPrestore,
rootVisible : false,
I would like to fire drop events for example, but my code doesn't work
Thanks :)
I've got same question and found this page.
There is note in documentation, in event section:
"This event is fired through the TreeView. Add listeners to the TreeView object"
I've tryed to found method in tree.Panel class to get view, unsuccessfully. So, all you need to do, just put listners block in configuration to viewConfig section (not in plugin section):
viewConfig : {
plugins : {
ptype: 'treeviewdragdrop',
...
},
listeners: {
drop: function (node, data, overModel, dropPosition) {
alert('CHANGE');
},
}
}
},
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-drop
Take a look at the doc :
beforeinsert( Tree tree, Node parent, Node node, Node refNode, Object options )
Fires before a new child is inserted in a node in this tree, return false to cancel the insert. ...
As an addition to Anton's correct answer above: The code below shows how to "connect from the outside" to drop events, for example from a Controller etc:
// Drag & Drop on the TreePanel
var ganttTreeView = ganttTreePanel.getView();
ganttTreeView.on({
'drop': me.onDrop,
'scope': this
});;
You can also catch the drop event by overriding dropConfig inside a TreeGrid or TreePanel. Here is an example how I did.
var myTree = new Tree.TreePanel({
id: 'treepanel',
title: 'My Title',
enableDD: true,
ddGroup: 'GridDD',
dataUrl: 'yourMethodURLForJSONData',
dropConfig: {
dropAllowed: true,
ddGroup: "GridDD",
notifyDrop: function(source, e, data) {
alert("A node/leaf is dropped");
//If you want few more details
if (data.grid) {
var node = data.selections[0].data;
alert("This is a node dropped from a Grid.");
} else {
var node = data["node"];
alert("This is a node dropped from a Tree.");
}
}
}
});
You can also do the same for Ext.ux.tree.TreeGrid. Hope It will help.
Related
How do I access my treepanel from an event handler inside of an Ext.tree.Panel ?
The following itemClick code does not work. I have tried going both 'up' and 'down'.
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
store: store,
listeners: {
itemclick: function(dv, record, item, index, e) {
var me = this;
var panel = me.up('treepanel');
var rn = panel.getRootNode(); //panel undefined :(
}
}
}
However if I have a button in a toolbar it works fine :
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Search',
handler: function () {
var me = this;
var panel = me.up('treepanel');
var rn = panel.getRootNode(); // :)
}
}]
}]
Both these examples are illustrated in this fiddle.
This is how scope works in ExtJS(To be more specific, in Javascript). In the first example, 'this'(me) it self is treepanel. Try following
`listeners: {
itemclick: function(dv, record, item, index, e) {
//var me = this;
//var panel = me.up('treepanel');
var panel = this; //'this' is treepanel
var rn = panel.getRootNode();
}
}`
Coming to the second example, if you observe the config pattern, it is a shortcut pattern to create a button inside the toolbar, hence 'this' becomes the button and you can get tree by component query.
As you are inside the panel Bala's approach should work. If it doesn't try like below. The first parameter of the itemclick function is the view. You can get the panel from it.
listeners: {
itemclick: function(dv, record, item, index, e) {
var panel = dv.up('treepanel');
var rn = panel.getRootNode();
}
}
Hello i have the following RowEditing plugin i use
ar rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
errorSummary:false,
onEnterKey: function(e) { console.log(e); },
listeners:{
'beforeedit':function(grid,eOpts){
},
'canceledit':function(grid, eOpts){
if(grid.grid.store.data.getAt(0).data.id == "new"){
grid.grid.store.removeAt(0);
}
},
'afteredit':function(editor, changes, record, rowIndex){
editor.grid.store.reload();
},
'validateedit': handleUpdate{{params.alias}}
}
});
But the enter action is still performed and no console log is performed... i tried to put it inside the listeners as well but no change...
here's my item in my grid
{
header: 'Description',
width: 160,
align: 'left',
dataIndex: 'description',
filters: {
type: 'string'
},
enableKeyEvents: true,
editor: {
xtype: 'textfield',
allowBlank: false,
listeners: {
keydown: {
element: 'el',
fn: function(el){
if (el.ENTER){
alert('test');
return false;
}
}
},
},
}
}
so my next try as to 'disable' the firing of the enter (or submitting the rowedit) inside the field itself. but a return false still submits the form, and a onEnterKey doesn't work there either... anyone has an idea what i am doing wrong?
I did find that onEnterKey is part of the parent Editing class but it doesn't say how i should call that..
First of all, onEnterKey is marked as private, so you shouldn't be overriding it, especially not upon instantiation. If you want to override class methods, you should do that by creating a new class which inherits from the class containing the methods:
Ext.define('My.grid.plugin.Editing', {
extends: 'Ext.grid.plugin.RowEditing',
onEnterKey: function() {
this.callParent(arguments);
// your code here
}
});
Regarding your problem, I suggest one of the following approaches:
A) If you really want to disable the ENTER key event only, you should do that on the editor field(s). Your attempt was close, but the event listener was not doing the right things yet:
editor: {
allowBlank: false,
listeners: {
keydown: function(e){
if (e.getKey() == e.ENTER){
e.stopEvent();
}
}
}
}
Note that with this approach the user will still be able to submit any change by just clicking the "Update" button of the row editing plugin.
B) If you just want to prevent the editing plugin from writing the changes to the store under certain conditions, you can also use the validateedit event on the editing plugin:
listeners: {
validateedit: function(editor, e) {
if (true) { // your condition here
return false;
}
}
}
This will also work, if the user clicks on the "Update" button.
I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
Am trying to move nodes in a Tree panel in EXTJS 4. The locations of these nodes are stored in a SQL database. What should happen when i move the nodes is that, the id's of those nodes should get changed in the database, depending on the location on the tree. Till now, i have managed to get only the id of the parent node, and not the actual node itself. I dont understand why this is happening. Each time i move a node,its returning me the id of the parent node. Code is as follows:
function buildTree() {
consoleWrite('BUILD THE TREE!!!');
var tree = Ext.create('Ext.tree.Panel', {
title : '',
border : false,
height : SYSTEM.panelHeight,
viewConfig : {
listeners : {
},
enableDD : true,
plugins : {
ptype : 'treeviewdragdrop'
}
},
collapsible : false,
useArrows : true,
rootVisible : false,
store : TREEst,
multiSelect : false,
singleExpand : true,
id : 'PAGETREE',
listeners : {
afterRender : function() {
MASK.tree.hide();
},
itemmove : {
fn : function(v, node, oldParent, newParent, index) {
var nodeID = node.data.id;
alert(nodeID);
}
}
This nodeID is printing the id of the parent node, as its stored in the database, and not the actual node itself. If anyone could provide me with guidance on how to proceed, that would be really great. Thanks in advance.
I don't think your itemmove params signature is correct. The API docs for 4.1 say:
itemmove( Ext.data.NodeInterface this, Ext.data.NodeInterface oldParent, Ext.data.NodeInterface newParent, Number index, Object eOpts )
So your node is actually referring to oldParent.
I am getting problem that how to implement search field on tree store getting data from the server in sencha touch.Any working code will be appreciated.
In Search field You can use key up event and filter a store as type charterer match to store and show filter data in list and on select on item in list you hide list as bellow done
{
xtype: 'searchfield',
name : 'Name',
label: 'Name: ',
id : 'Name',
record:'Details',
placeHolder: 'Name',
listeners: {
focus: function( field, e, eOpts ){
Ext.getCmp('FilterDropDown').show();
},
keyup: function(field) {
var value = field.getValue();
var Store = Ext.getStore('Details');
var FilterStore = Ext.getStore('FilterDetails');
FilterStore.removeAll();
count=0;
var thisRegEx = new RegExp(value, 'i');
for(cnt=0;cnt<Store.getCount();cnt++){
if(thisRegEx.test(Store.data.items[cnt].data.name)){
FilterStore.add({
'id':Store.data.items[cnt].data.id,
'name': Store.data.items[cnt].data.name,
'email': Store.data.items[cnt].data.email
});
}
}
}
}
},
{
xtype:'FilterList',
id: 'FilterDropDown',
height:200,
hidden : true,
listeners: {
itemtap: function( field, index, target, record, e, eOpts ){
Ext.getCmp('Name').setValue(record.data.name);
Ext.getCmp('Email').setValue(record.data.email);
Ext.getCmp('Mobile').setValue(record.data.mobileno);
Ext.getCmp('FilderDropDown').hide();
}
}
},
xtype FilterList code is
Ext.define('appname.view.FilterList', {
extend: 'Ext.dataview.List',
xtype: 'FilterList',
require: ['FilterDetails'],
config:{
store: 'FilterDetails',
scrollable: true,
cls: 'drop_down_list',
ui: 'round',
itemTpl: '<div>{name}</div>'
}
});
It will help you :)
Assuming the data is already in the store when you search this isn't too difficult to implement using the methods referenced by speznaz.
In your view have a xtype "searchfield" or "textfield".
{
xtype: "searchfield",
}
In the controller bind a "keyup" event to this field.
refs: {
searchfield: 'mypanel searchfield'
},
control: {
searchfield: {
keyup: 'doSearch'
}
}
For your function to search something like:
doSearch: function(searchfield, e, eOpts) {
var searchterm = searchfield.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.find(fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] );
}
This is assuming you want to search on keyup. You may want to use the "action" event instead.
Assuming you already have data in the store.
Here is the working code:
{
xtype: "searchfield",
name:'searchName'
}
In the controller bind a "keyup" event to this field.
refs: {
searchName: 'searchfield[name=searchName]'
},
control: {
searchName: {
keyup: 'doSearch'
}
}
For your function to search :
doSearch: function(field, e, eOpts) {
var searchterm = field.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.filter(fieldName,searchterm);
}
Use try.sencha.com it has lot of examples on how to use the framework.
You need to use an Ajax store for getting data from server. I think this guide will be a good start for that, it also implements a tree store.
This example explains how to filter data in a list based on what you type in a searchfield.
Hope it helps