Restrict drag and drop in ExtJs tree panel - extjs4.2

I developed two tree panels in ExtJs (Tree-1 and Tree-2). These trees are working with drag and drop in between two of them in all the cases. I want drag and drop in the following cases
(From Tree-1 to Tree-2), (From Tree-1 to Tree-1) and (From Tree-2 to Tree-2) only. That is want to restrict drag and drop from Tree-2 to Tree-1. The following is my source code.
/*Tree1*/
Ext.create('Ext.tree.Panel', {
title: 'From Agent:',
collapsible: true,
collapseDirection: Ext.Component.DIRECTION_TOP,
frame:true,
width: 310,
minHeight: 50,
margin: '0 0 0 0',
store: store1,
listeners:{
checkchange:function( node, checked, eOpts){
node.cascadeBy(function(n){n.set('checked', checked);} );
}
},
rootVisible: false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
sortOnDrop: true,
containerScroll: true
}
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
/*Tree2*/
Ext.create('Ext.tree.Panel', {
title: 'To Agent:',
frame: true,
collapsible: true,
collapseDirection: Ext.Component.DIRECTION_TOP,
width: 310,
margin: '0 0 0 20',
minHeight: 50,
store: store2,
listeners:{
checkchange:function( node, checked, eOpts){
node.cascadeBy(function(n){n.set('checked', checked);} );
}
},
rootVisible: false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
sortOnDrop: true,
containerScroll: true
}
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
These codes are working as cut and paste while drag and drop. I want to make these code as copy and paste while drag and drop. Please, help me.
Thanks in advance.

Take a look at this example from the docs:
http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/tree/custom-drop-logic.html
Basically it uses nodedragover event to control when one can drop or not.
Return false when you don't want to allow the drop.
As far as making it copy instead of cutting, the documentation mentions the following (although I've never tried it myself):
This plugin provides drag and/or drop functionality for a TreeView.
It creates a specialized instance of DragZone which knows how to drag
out of a TreeView and loads the data object which is passed to a
cooperating DragZone's methods with the following properties:
copy : Boolean
The value of the TreeView's copy property, or true if the TreeView was
configured with allowCopy: true and the control key was pressed when
the drag operation was begun.
Try setting copy: true to the two views.

Related

ExtJS - How to highlight form itself

I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.

How to disable certain rows in grid in Extjs 4.2

I have a grid with two checkcolumns and a text field
{
xtype: 'checkcolumn',
id: 'apprId',
text: '<b>Approve</b>',
width: 100,
dataIndex: 'aprvInd'
},
{
xtype: 'checkcolumn',
id: 'declId',
text: '<b>Decline</b>',
width: 100,
dataIndex: 'declInd'
},
{
id: 'declResnId',
header: '<b>Decline Reasons</b>',
dataIndex: 'declineReason',
align: 'center',
width: 200,
editor: new Ext.form.TextField({
maxLength: 100000
}),
}
if my grid has three rows, first row 'approve' checkbox checked, second row 'decline' checkbox checked and third row nothing checked.
on click of save button, i am doing a rest call and i m passing the data to db, and on success call back , i m reloading grid.
After reloading, the rows which have approve/decline checked should be disabled along with the 'declineReasons' text field.
How can i do this?
If you want to grey out the row I would look at the metaData parameter of the renderer config. Probably the trCls is referenced there.
To disable a checkbox I also would look at the renderer.
To disable the editor plugin look at the beforeedit event.

ExtJS - Setting a message box over disabled forms

So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'

How to update enhanced grid with new data

I have an enhnaced grid connected to a JSONRest and i have it populating after the grid starts up.
I'm confused as to how to update the Grid store when a new query is performed, can anyone help ?
var store = new JsonRest({
target: "rest/search"
});
dataStore = new ObjectStore({ objectStore: store });
/*set up layout*/
var layout = [[
{'name': 'Name', 'field': 'col1', noresize: true, 'width': '100%'},
]];
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true,
plugins: {
pagination: {
pageSizes: ["10", "25", "50"],
description: true,
pageStepper: true,
maxPageStep: 4,
defaultPageSize: 5,
sizeSwitch: true,
position: 'bottom'
}
}
}, document.createElement('div'));
grid.setQuery({
term: "term",
category: "category"
});
grid.startup();
Doing a store.query does hit my back end, but how do i repopulate the Grid with the results?
store.query({term: "newterm", category: "newcategory"},
{
start: 10,
count: 10,
}).then(function(data){
});
In order to populate the grid, you shouldn't be performing a store query directly - you should be instructing the grid to use the store, and it will query it itself.
You already appear to be assigning the store instance in your call to the DataGrid constructor, and you're properly wrapping it with dojo/data/ObjectStore (since dojox grid doesn't support dojo/store), so it's not clear to me why you are even attempting to perform a query beyond that. You should see a network request to your service as soon as you call grid.startup().
If you're seeing a network request being made when you create the grid but you're not seeing results in the grid, chances are your service does not actually follow the conventions that dojo/store/JsonRest expects. See http://dojotoolkit.org/reference-guide/1.9/quickstart/rest.html for information on what is expected in requests and responses.
If you're actually asking how to tell the grid to use a different store at some point in the future, call grid.setStore(newstore).

How to move between panels in Sencha touch

When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this