ExtJs 5: TreePanel: Not getting the default leaf icons and lines - javascript

I created a sample TreePanel using Sencha ExtJs 5.
I followed the sample example in the documentations and I am able to see the items (leaves and branches) but they are not coming as a Tree, but as a list.
Here is my code:
Store:
Ext.define('MyApp.store.ResourcesStore', {
extend : 'Ext.data.TreeStore',
root : {
expanded : true,
children : [ {
text : "UI Forms",
leaf: false,
expanded : true,
children : [ {
text : "Web",
leaf : true
}, {
text : "Smart Phone",
leaf : true
}, {
text : "Tablet",
leaf : true
}, ]
}, {
text : "Reports",
leaf : true
}, {
text : "Dashboards",
leaf : true
}, {
text : "Entities",
leaf : true
}, {
text : "Queries",
leaf : true
}, {
text : "Services",
leaf : true
} ]
}
});
View:
Ext.define('MyApp.view.leftpanel.ResourcesView', {
extend : 'Ext.TreePanel',
xtype : 'resources-panel',
title : 'Resources',
store : 'ResourcesStore',
rootVisible : false
});
Here is what my output looks like:
After executing the sencha app build command:
Accordion panel got impacted.

If you use Sencha Cmd then you most likely need to:
sencha app refresh
sencha ant sass
and if it does not help then
sencha app build
Application bootstrap needs to know that you are using trees so it knows which css to load.

I had similar problem and found that just stopping "Sencha app watch" and restarting it resolved it.

Me too,the icons do not show,it looks like a list.And in my case, the sencha app build does not work. But I used sencha app watch,and the icons come around.I guess there must be something wrong with the the sencha cmd of my version 'Sencha Cmd v5.1.2.52',the watch cmd works is due to it helps to add the sass I needed.

Related

How to close a layer folder on Photoshop using CEP/ExtendScript/JavaScript?

I'm developing an extension in Photoshop and I need to close a layers folder (containing a lot of information) to make the layers view cleaner.
I haven't found anything in the Photoshop documentation and nothing on the forums.
From :
To :
Thanks in advance for your help !
this works in Ps 23.5
photoshop.core.executeAsModal(function _executeAsModal(){
return photoshop.action.batchPlay([{
_obj: "set",
_target: [{ _ref: "property", _property: "layerSectionExpanded" }, { _ref: "layer", _id: 1234 }],
to: true // true to open/expand, false to collapse/close
}], {}).then(res=>{
return 'should be expanded now';
});
},
{ commandName: 'open/expand group layer' }
).then(console.log).catch(console.error);
related: Is there a way to EXPAND a group in Photoshop? https://gist.github.com/JimaDobes/371fcaf0d8f61fb5d1175d54e85209c7
Thank you Ghoul Fool for finding this thread :
https://community.adobe.com/t5/photoshop-ecosystem-discussions/expand-collapse-a-group-via-javascript/td-p/7286289

Is it possible to add more options to jstree after instantiate it?

I have a page where i'm using jstree and i would like to know if it's possible to add more options after instantiate it. In that case i want to add the dnd plugin depending if the user loged has that role assigned.
That's how i instantiate it:
$treeview.jstree({
"core" : {
"check_callback" : function (operation, node, node_parent, node_position) {
}
,"multiple":false
}
,"plugins" : [ "contextmenu","state" ]
,"dnd": {
copy : false
}
,"contextmenu": {"items": rewriteItems}
,"state": { "key":$treeview }
});
You must add the plugins that you need when jstreeis going to be instantiate but exists a way that can control if the nodes are draggable or not.
Your code will look like this:
var isDraggable = true;
$treeview.jstree({
"core" : {
"check_callback" : function (operation, node, node_parent, node_position) {
}
,"multiple":false
}
,"plugins" : [ "contextmenu","state","dnd" ]
,"dnd": {
copy : false,
is_draggable:function() { return isDraggable; }
}
,"contextmenu": {"items": rewriteItems}
,"state": { "key":$treeview }
});
You need to create a boolean variable isDraggable where you will keep true/false depending if the user is able to do that action. Then when you run your code and if the user is not able to drag the nodes the value will be false and he won't be able to drag it.

enhancedgrid filter plugin at server-side in Dojo

i am new to dojo,..struggling alot in this please help.....
i am using the filter plugin in EnhancedGrid in dojo....i am doing great at client side but coming to server side i dont know how to call the servlet and get the filtered rows in to grid please help in this .....
i tried something like this....
grid = new EnhancedGrid({
id : 'grid',
store : yourStore,
structure : layout,
rowSelector : '20px',
plugins : {
search : true,
pagination : {
pageSizes : [ "50", "100"],
description : true,
sizeSwitch : true,
pageStepper : true,
gotoButton : true,
maxPageStep : 2,
position : "bottom"
},
filter : {
closeFilterbarButton : true,
ruleCount : 5,
ruleCountToConfirmClearFilter:2,
itemsName : "rows",
isServerSide:true,
isSateful:true,
url:"http:myaddress:8080/GridExample/Filter",
setupFilterQuery: setupFilter
}
}
});
var setupFilter = function(commands, request){
if(commands.filter && commands.enable){
// some filter is defined and valid. You can modify the request object here.
}else{
// no filter is valid.
}
};
grid.placeAt("myGrid");
grid.startup();
}
});
First : have you load the Plugin correct?
dojo.require("dojox.grid.enhanced.plugins.Filter");
And maybe this helps you with your Problem:
http://dojotoolkit.org/reference-guide/1.8/dojox/grid/EnhancedGrid/plugins/Filter.html#introduction-to-server-side-filtering
Regards
UPDATE 1
Hi there!
I have to dig a little into the width of the Web but lately i think i found the answer to your question how to define the filter.
plugins: {
filter: {
isServerSide: true,
setupFilterQuery: function(commands, request){
if(commands.filter && commands.enable){
console.log(commands.filter);
request.query = {
"Name": "L*"
}
}
}
itemsName:'songs',
closeFilterbarButton: true,
ruleCount: 8
}
}
I grab this from here: https://bitbucket.org/dojo/dojox/src/64328839903b/grid/tests/enhanced/test_enhanced_grid_filter.html
This example defines a filter that searches the store for all Names that begins with the letter "L". With the other supported Operators you can define your own filter.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/EnhancedGrid/plugins/Filter.html#supported-operators
Hope this helps you!
Regards

JsTree multitree cookie

Hello guys I use jstree and I have multiple tree in the same page. I have two problems:
1) I want cookies in order to distinguish which nodes are open in each tree. I try to implement this functionality using prefix but unfortunately:
"cookies" : { "cookie_options" : { "prefix" : "home" } },
does not work since only the last opened node is re-opened after refresh.
2) I do not want to be able to create new root nodes.I only want to be able to create files or transfer files into my root directory.
I am trying to achieve that using:
"types" : {
"types" : {
// The default type
"default" : {
"valid_children" : "none",
"icon" : {
"image" : "./file.png"
}
},
// The `folder` type
"folder" : {
"valid_children" : [ "default", "folder", "file" ],
"icon" : {
"image" : "./folder.png"
}
},
// The `drive` nodes
"drive" : {
// can have files and folders inside, but NOT other `drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "./root.png"
},
// those prevent the functions with the same name to be used on `drive` nodes
// internally the `before` event is used
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false
}
}
},
but I am still able to post files into my root directory. Should I create another <li> without rel=drive above the root directory?
Thanks.
The solution for cookies in multiple trees:
.
.
"cookies": {
"save_selected": "node_selected_" + tree_id
"save_opened": "node_opened_" + tree_id
},
.
.
There is no such option as "prefix". "save_selected" and "save_opened" take either a string or false. By providing different tree_id you effectively use different cookies for each tree.

Nested list inside of TabPanel?

I've started a project with sencha touch (my first real experience with JS), and I'm afraid I've bitten off more than I can chew..
I've created most of my app but I'm having a problem trying to put a Nested list inside of a tab panel. I get this error:
Uncaught TypeError: Cannot call method 'getRootNode' of undefined.
And here's how I'm trying to insert it:
{
title: 'Settings',
iconCls: 'settings',
layout: 'card',
items: [nestedPanel]
}
Can someone point me in the right direction?
Your code should be something like :
App.views.MyNestedList = Ext.extend(Ext.NestedList, {
iconCls : '',
iconMask : true,
title : '',
store : '',
itemTpl : '',
});
Ext.reg('MyNestedList', App.views.MyNestedList);
App.views.myTabs = Ext.extend(Ext.TabPanel,{
items : [
{xtype : 'MyNestedList'}
]
});

Categories