I have an ExtJs TreePanel in which i've set the enableDrop as true and set the property ddGroup to one of the groups. I have this another ExtJs view from where i need to drag and drop the images. And i know that ddGroup defined for this is media
However the drag and drop never happens. This is my code snippet:
var treePanel = new Ext.tree.TreePanel({
"id": "myTree",
"lines": true,
"animate": true,
"enableDrop": true,
"enableDrag": false,
"ddGroup": "media",
"containerScroll": true,
"autoScroll": true,
"split": true,
"stateful": true,
"renderTo": "treeStruc",
"loader": //my loader,
"root": new Ext.tree.AsyncTreeNode(treeRootConfig),
"dropConfig": {
"ddGroup": 'media'
},
"listeners": {
"nodedrop": function(e) {
//do the check
}
}
});
Is there anything else that needs to be done?
Thanks.
Although the documentation states that nodedrop is fired when a "DD object" is dropped on a tree node, the source seems to indicate that it's still expecting a valid node.
In order to implement the drag-drop from view to tree, I believe you would have to initialize your own TreeDropZone to handle dropped DD items that are not tree-compatible nodes.
This example: http://dev.sencha.com/deploy/dev/examples/dd/dragdropzones.html shows something similar (although it is a view to grid drag-drop), but you'll likely have to use a TreeDropZone instantiation where they've used a straight out Ext.dd.DropZone object.
Also, make sure that your source view and the target tree share the same ddGroup - although I think you mentioned that they do.
I hope this is in any way helpful!
Related
I have a custom section in Umbraco, when you click a node in my custom tree, the URL is correctly displayed and the data loads successfully.
When you then click another node in the tree (sibling, exactly the same controller and view)
All the data loads...... except for the data that should shown in the calender control. If I reload the page the data loads.
For testing, I created and added an extra control but this time it is just a Umbraco.Textbox, and the data always loads correctly
So what is it about the Umbraco.DateTime all the other controls I have on the same page load drop downs, check boxes etc
Is there something I can do in my Angular(v1.6) controller to force these to update everytime?
Update: Code in my view looks like this.
<umb-property property="vm.endDateTimeTxt">
<umb-editor model="vm.endDateTimeTxt"></umb-editor>
</umb-property>
<umb-property property="vm.startDateTimePropertyEditor">
<umb-editor model="vm.startDateTimePropertyEditor"></umb-editor>
</umb-property>
<umb-property property="vm.endDateTimePropertyEditor">
<umb-editor model="vm.endDateTimePropertyEditor"></umb-editor>
</umb-property>
And For the Umbraco.DatePicker controls this is the method that genrates the property editor
function buildUmbracoClockPropertyEditor(alias, editor, view, label, description, config, mandatory = true) {
return {
editor: "Umbraco.DateTime",
label: label,
description: description,
hideLabel: false,
view: view,
alias: alias,
value: null,
validation: {
mandatory: mandatory,
pattern: ""
},
config: {
pickDate: true,
pickTime: false,
useSeconds: false,
format: "YYYY-MM-DD HH:MM:SS",
icons: {
time: "icon-time",
date: "icon-calendar",
up: "icon-chevron-up",
down: "icon-chevron-down"
}
},
}
I have also updated the format of the string when it is loaded in to the text box so now this is before a hard refresh.
And this is after
So as you can see the data is there, it gets loaded in to the text box first time you click on a node, but required me to go to my browser address bar and press enter to get the dates to load in to the Umbraco.DateTime controls.
this is just nuts! the data is there, the format is the same... what else could it be!
The reason is that Umbraco is loading all javascript on load and we need to force it to load again.
I have tried to recycle AppPool, restart website, touch web.config etc. its not easy to reload it.
I needed an AngularJS based multi-level accordion to bind a tree data structure from the back end and I came across this one https://github.com/LukaszWatroba/v-accordion.
It worked pretty well, except it fully collapses (closes any expanded sub accordions) every time data are updated in the controller. I have a timer in the controller that calls the back end to pool data at certain time intervals (e.g., every 3 minutes). I don't know if this is the accordion's built-in behavior or not, but if yes, how this could be fixed?
Any suggestions / help would be appreciated.
Resolved
I reached out to Łukasz Wątroba, the author of this plugin, and with his kind help I was able to resolve this task. Would like to share his feedback in case anybody has a similar goal.
Solution:
To your JSON data structure you would need to add two more properties,
1) the "id" of the pane and
2) the state of the pane "isExpanded" - true/false
These two properties are specifically designed for the front end, to maintain the expand-collapse state of any pane you might have interacted with.
[
{
id: 'pane-1b',
isExpanded: true,
.................
all your initial properies...
.....................
},
{
id: 'pane-2b'',
isExpanded: false
.................
all your initial properies
.....................
},
{
id: 'pane-3b,',
isExpanded: false
.................
all your initial properies
.....................
subpanes: [
{
id: 'subpane-1b',
isExpanded: false
.................
all your initial properies
.....................
},
{
id: 'subpane-2b',
isExpanded: false
.................
all your initial properies
.....................
}
]
}
]
Your HTML would have the following structure, where "panes" is your JSON data.
<v-pane id="pane.id" ng-repeat="pane in panes" expanded="pane.isExpanded">
.................
<!--For multi level HTML you would have a nested ng-repeat-->
<v-pane id="subpane.id" ng-repeat="subpane in pane.subpanes" expanded="subpane.isExpanded">
</v-pane>
.............
</v-pane>
I use ExtJS 5. I use Sencha Architect.
I have 2 views: View1 (alias: widget.view1) and View2 (alias widget.view2). Those views are declared in views folder but are not linked in application. One of them is created at runtime and added to container in beforerender:
component.add({xtype: 'view' + type});
where type variable is calculated earlier.
I build app with
sencha app build testing
and in created JS file there is no View1 neither View2 included. Also there is no appropriate ViewController neither ViewModel.
Then I've added subsections in app.json file in section js:
{
"path": "app/view/View1.js",
"x-compile": true,
"includeInBundle": true
},
{
"path": "app/view/View1ViewController.js",
"x-compile": true,
"includeInBundle": true
},
{
"path": "app/view/View1ViewModel.js",
"x-compile": true,
"includeInBundle": true
},
and rebuild app. Now the View1 class is available in compiled JS and also during runtime.
Question: how can I make SA to modify app.json file? There is a file app.json.meta created by SA (I guess). The content of both files is similar.
I've found solution.
I need to add AppName.view.View1 and AppName.view.View2 to requires table of container where I need to add views.
A grid has editable rows, connected to a store which has a proxy.
It uses the api e.g.
proxy: {
type: 'ajax',
api: {
create: 'dm/acct/new.php',
read: 'dm/acct/read.php',
update: 'dm/acct/update.php',
destroy: 'dm/acct/rm.php'
},
extraParams: {
sess: 2345
},
If I add extraParms to the store's proxy e.g. {abc:123} as shown above, when I come to edit a field on a grid, that detail is accompanied by the record at the server with the value defined. I can inspect it in the read.php.
However, for testing, I tried replacing abc with an application level var, e.g.
{abc:RPA.app.A_GLOBAL_VAR}
results in
Uncaught TypeError: Cannot read property 'A_GLOBAL_VAR' of undefined - this surprised me since the var is declared at the Application level and I thought would be scoped and available. This error causes the application to fail to run at all.
I have got it working but I don't like my approach because I think it is using the wrong event and I have not been able to spot a more suitable one.
On the grid' cell dblClick event I have:
var sto = Ext.getCmp('acc_grid').getStore();
var proxy= sto.getProxy();
proxy.setExtraParam('abc', somevar );
I definitely get the value of abc:somvar server-side - so does what I want. I just think it is bad design/wrong event and wondered if there is a better way of attaching the extra param to the record when the update on an editable grid? I have looked at other examples but not stumbled across one that I have been able to relate to.
Many thanks
Kevin
Listen to the CellEditor plugin edit event rather than the cell dblclick...
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.plugin.CellEditing
When you set your cell editing plugin...
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners:{
edit:function(){ doSomething }
}
})
],
I need to get(retrieve) updated cell value in controller. (MVC)
So I tried this,
var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array
var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array
but always it returns empty array even I updated some cell value.
anybody know what I am doing wrong?
Here is my part of view code,
Ext.define("App.view.orders.ItemList_view", {
extend: "Ext.grid.Panel",
alias: "widget.itemList_view",
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
initComponent: function () {
this.store = "ItemList_store";
this.columns = [
{
xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
},
{ header: "test", width: 100, dataIndex: "test",
editor: {
xtype : 'textfield'
}
}
];
this.selModel = Ext.create("Ext.selection.CheckboxModel");
//this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.
this.callParent(arguments);
},
.
.
.
Thank you!
[EDIT]
Thank you very much for your answer! I have some more question about editor grid.
Its much different from Ext3. so I'm very confusing now :(
Q1. How to collect edited record data (once click button)?
the event fired once the grid cell be changed.
but I want collect edited grid record once I click the 'Update edited cell' button, and I want to update all together at the once.
In Ext3, I did like this,
(button) click : function(){
var modified = mygridStore.getModifiedRecords();
var recordsToSend = [];
Ext.each(modified, function(record){
recordsToSend.push(record.data);
});
var grid = Ext.getCmp('grid');
grid.el.mask('Updating','x-mask-loading');
grid.stopEditing();
recordsToSend = Ext.encode(recordsToSend);
Ext.Ajax.request({
url : '/test/test',
params : {
data : recordsToSend
},
success : function(response){
grid.el.unmask();
alert(response.responseText);
mygridStore.commitChanges();
},
failure : function(response){
mygridStore.rejectChanges();
}
});
}
How can I change the code for Extjs4 ?
Q2. I don't know still how to find out for changed checkcolumn.
I tried this, but I does not work for checkcolumn (of cause I tested after change checkbox)
// grid coumn
{
xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}
-
// in control
'myGrid': {
validateedit: function (plugin, edit) {
console.log(edit);
},
checkchange: function (plugin, edit) {
console.log(edit);
console.log(edit.value);
}
}
Q3. When I click the cell to edit, the show some HTML tag in -_-;;
I really appreciate for your help. and thank you very much for your valuable time!
The editors (cell editors or row editors) do not commit their values to the store until you complete the edit - which means pressing ENTER or blurring the active cell editor by clicking elsewhere on the page, or clicking the save button on the row editor form .
If your purpose for reading the updated value in your editor is to perform some kind of validation I would suggest simply listening to the validateedit event in your grid's controller, as described here.
The second argument that this event passes to your handler contains a lot of data about the edit that you can then perform validation with. If the edit doesn't pass your validation you can return false from your handler and the value in the celleditor will revert to it's original value. The validateedit event gets fired from the editor grid itself so you would add an event handler in your controller for it like this:
Ext.define('MyApp.controller.MyController', {
init: function() {
this.control({
'mygridpanel': {
validateedit: function(plugin, edit) {
// silly validation function
if (edit.value != 'A Valid Value') {
return false;
}
},
},
});
},
});
But you should check out the link above to see all the different objects available in that second argument I named edit.
The validateedit event is fired right before the record is committed into the store - after the user has already clicked ENTER or blurred the editor, i.e., while the editor is closing.
If you are trying to get the celleditor's value before it starts to close, for some reason other than validation for example, you could get the active celleditor's value like this:
// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
var value = myGrid.editingPlugin.getActiveEditor().field.value
console.log('value: ' + value);
}
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
One other point I should make, for validation in editor grids, I found that it is easiest to just put a validator config in the grid column's editor definition. That will give you all the handy validation CSS while the user is setting the field's value and alert him if there is a problem with the value before he tries to save it.
To get an idea of what I mean, try entering letters in the date column of this example. Mouse over the editor cell and you will get the error message.
EDIT
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
Question 1
Once you have completed an edit (clicked ENTER or ), your call to mygridStore.getModifiedRecords() should be working fine because the record will have been committed to the store. I see that it was not working, I will cover that in a moment.
I should point out that ExtJS4 has a store.sync() method as covered here.
Instead of extracting the modified records from the store, encoding them, manually doing an ajax request to save them to the server and then manually committing them you can call this sync method and it will take care of all of these actions for you.
If you have different URLs to handle the different create, read, update, destroy operations fired off by your store's load and sync methods, you can use the store's proxy api config to map your URLs to these operations as covered here. Or you can set-up your server side controller to be able to differentiate between your store's load request (read operations default to HTTP GET) and it's sync requests (create, update and delete operations default as HTTP POST).
There could be many different ways to go about doing this on the server side, the way I usually do it is to have one SQL stored procedure for GET requests and one for POST requests for any given store. I include the store name as an extra param and then my server side controller runs the appropriate stored procedure based on whether it is a GET or a POST request.
Question 2
Cell editing doesn't support checkcolumn edits. You have to make a different handler to listen to changes on that, something like this:
checkchange: function (column, rowIndex, checked) {
var record = store.getAt(rowIndex),
state = checked ? 'checked' : 'unchecked'
console.log('The record:');
console.log(record)
console.log('Column: ' + column.dataIndex);
console.log('was just ' + state)
}
Your call to mygridStore.getModifiedRecords() should be able to pick up the check changes also however, they get committed to the grid's store right away after being checked. store.sync() would also pick up changes to checkcolumn.
Question 3
I can't completely tell what is causing that problem but it may be something strange going on with your validateedit event, your handler should be returning true or false.
As I said earlier, I misunderstood the reason you originally asked this question. I thought you were trying to do some kind of validation while an edit was in progress. Now I understand that you are trying to get all of the modified records from the store after all the editing is completed in order to save them to the database, I was thrown off because in ExtJS 4 a store is usually saved to the database with the sync method as I mentioned.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
The actual problem you are having might be trouble with the store's getter methods (getModifiedRecords, getUpdatedRecords) in some 4.07 versions, take a look at this post and this one.
So with all that said, the best advice I can give you is 1) try out the stores sync method for saving modified data to the database and 2) upgrade to ExtJS 4.1, there were a lot of bugs that were straightened out between 4.07 and 4.1 which you should be able to take advantage of, I cut out about 75% of the overrides I was using to make things work when I switched over to 4.1.
EditedGrid.plugins[0].completeEdit();
This will make the active changes commit and call edit event also.
listeners: {
validateedit: function (editor, e) {
//console.log(editor);
var oldVal = editor.originalValue;
var newVal = editor.value;
}
}