ExtJS expand and select at startup - json

I need some solution in ExtJS.I have tree store:
Ext.onReady(function(){
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad:false,
expanded: false,
proxy: {
type: 'ajax',
url: 'getOneLevelChilds',
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true,
children:[]
},
...
]
});
and when my tree loads at the first time I load last selected child (for example yesterday I open tree and select one. I saved it's JSON on database. so now Expand my tree)
storeTree.load({
url: 'getLastSelectedChild'
});
OK, everything works! but now I need some solution.
when I load my tree at the startup (when it was loaded) I have JSON:
[
{"id":3, "text":"first",},
{"id":4, "text":"second",},
{
id:"0", text: "third", expanded: true, children:
[
{
id:"1", text: "child1", leaf: true
},
{
id:"2", text: "child2", leaf: true
}
]
},
]
but I also save selected node id in database. I know that id="2" was selected yeasterday. How can I select automatically that node at startup? (Only at startup, only when my tree will be loaded). how can I do that?
P.S when I use proxy in tree Store, selection is not workin like this:
var record = this.getStore().getNodeById('1');
this.getSelectionModel().select(record)
but it works when I dont use Proxy.
and also, I need that selection only at sturtup

Assuming by "only at startup" you mean with the store's first load event and you actually have a tree panel (otherwise you cannot select a node):
treeStore.on({
'load': function(store) {
var node = store.getNodeById(2); // your id here
treePanel.getSelectionModel().select([node]);
// alternatively, if also want to expand the path to the node
treePanel.selectPath(node.getPath());
},
single: true
});

Related

TreeStore: different behaviour beetween autoLoad configuration and load() function

The test case in fiddle is working with autoLoad: true but with autoLoad: false (line 86) the load() function called at line 161 in the TreePanel beforerender event does not load the data...
For (non tree) panels I allways have set autoLoad to false and load the store on render of the GridPanel and it works perfectly. I do it like this to prevent loading all the stores at the beginning (and to set filters sometimes).
The beforeload event of the store is preventing double-load.
Where is my fault for this TreeStore ? I am looking for a solution for a long time without any result...
There has been similar issue in Ext JS 4 explained here ExtJS 4. Hidden treepanel with autoload false .
What I did in your fiddle is that I just added the following
autoLoad: false,
root:{
//expanded: true, // optional
children: []
}
to line 91 in your store configuration. Everything worked magically.
I think I've solved your problem.
Use the root property for your TreeStore.
/*
* Store
*/
Ext.define('Chronos.store.Clockings', {
extend : 'Ext.data.TreeStore',
requires: [
//'Chronos.store.Session'
],
model : 'Chronos.model.Presence',
autoLoad : false, //true, // false,
//autoSync : true, // DEBUG
sortOnLoad : false,
pageSize : 0,
remoteFilter: true,
root: {
id: 'id',
expanded: true
},
listeners: {
load: function(treestore, records, success) {
console.log(Date(), 'clockings loaded: ', success, treestore);
},
beforeload: function (treestore) {
if(treestore.isLoading()) return false;
}
}
});
Hope this is what you are looking for!

ExtJS4, tree.Panel null using a json proxy

I am trying to use Ext.tree.Panel with an Ext.data.TreeStore and an Ext.data.Model. I think I am doing things right but when checking my tree I can see a beatiful 'null' and that is not normal. And I think it could be because of my json url.
Let me explain how I am proceeding.
Here is how I define my Model:
Ext.define('SelectedModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'id', type: 'string'},
{name: 'leaf', type: 'bool'},
{name: 'children', type: 'auto'},
{name: 'singleClickExpand', type: 'bool'},
{name: 'status', type: 'int'},
{name: 'checked', type: 'boolean'},
{name: 'fullIceCode', type: 'string'},
{name: 'withMenu', type: 'bool'},
]
});
I read that fields 'leaf' and 'children' are present by default in all trees (with 20 others fields). So I am not sure I have to mention them. All these fields are precisely those presents in my json response (however they are not always all present in every item, like you will see in my example below). As I don't really understand how ExtJS works (this is my first week of practicing) I am wondering if I really need to write in my Model all the fields present in my json response, or just those which are present in every item of my tree.
Let see how I define my Store in my Tree:
store: Ext.create("Ext.data.TreeStore",{
model: 'SelectedModel',
proxy: {
type: 'ajax',
url: this.myaction,
reader: {
type: 'json',
}
}
})
At the end of the Tree constructor, if I write a console.log(this.myaction) I obtain exactly what I want which is 'stSearchAction.do?action=product_tree'.
This url is the one that set the json response to the servlet. It leads to this method:
private ActionForward getSpecialToolProductTree(
HttpServletRequest request, HttpServletResponse response) throws SystemException, ApplicativeException {
if (strJsonProduct == null)
{
strJsonProduct = getAndCreateSessionIfNeeded(request).getStrJsonProductSelector();
}
System.out.println(strJsonProduct);
setResponse(response, strJsonProduct) ;
return null ;
}
The System.out.println(strJsonProduct) you can see shows me precisely the json string I want:
[{text : 'CASE CONSTRUCTION', id : '5 -122001754' , leaf : false , children : [{text : 'Engines', ... ... ... ... ... ... ..., singleClickExpand : true , status : 1 , checked : false , fullIceCode : 'Y.A.01.001', withMenu : true }
] , singleClickExpand : true , status : 1 }] , singleClickExpand : true , status : 1 }] , singleClickExpand : true , status : 1 }]
I don't see for now where is the problem, but I admit that I can be pretty blind sometimes.
Now the Tree:
Ext.define('Application.TreePanel', {
extend: 'Ext.tree.Panel',
requires: ['Ext.data.TreeStore'],
myaction: 'Unknown Url',
myrender: 'Unknown Render',
xtype: 'check-tree',
rootVisible: false,
useArrows: true,
frame: true,
title: 'Unknown title',
width: 250,
height: 300,
constructor: function(myaction, mywidth, myheight, myrender, mytitle) {
if (myaction) {
this.myaction = myaction;
}
if (myrender) {
this.myrender = myrender;
}
if (mytitle) {
this.title = document.getElementById(mytitle).innerHTML;
}
if (mywidth) {
this.width = mywidth;
}
if (myheight) {
this.height = myheight;
}
console.log(this.height);
},
config:{
renderTo: this.myrender,
store: Ext.create("Ext.data.TreeStore",{
model: 'SelectedModel',
proxy: {
type: 'ajax',
url: this.myaction,
reader: {
type: 'json',
}
}
})
}
});
When I check the different attributes set in my constructor with some console.log, I got exactly what I want...
All the extJs code I showed you is in a same file, tree421.js (because using ExtJS 4.2.1).
What I think is there is a problem with my store, I am not doing the right thing, maybe this is not the way of using the url config for a proxy... but I can't find the good way.
I obtain some strange results.
When executing these lines at the end of my tree421.js
var tree = Ext.create("Application.TreePanel", 'stSearchAction.do?action=product_tree', 300, 270, 'tree-div', 'lbl_st_tree_selection');
console.log(tree);
console.log(tree.getSelectionModel());
console.log(tree.getRenderTo());
console.log(tree.getRootNode());
I can read
j {myaction: "stSearchAction.do?action=product_tree", myrender: "tree-div", title: "Product selection", width: 300, height: 270…} tree421.js:117
A {events: Object, views: Array[0], modes: Object, selectionMode: "SINGLE", selected: A…} tree421.js:118
undefined tree421.js:119
null tree421.js:120
The second log is just a test to see what would be written but I don't really care. We can see that the tree.getRenderTo() is undefined, but I put it in config block so getters & setters should be generated, and a console.log(this.myrender) in the constructor wrote something good, so I don't understand what is going on.
And last but not least my tree.getRootNode() is null...
It would be appreciated if someone with a better ExtJS understanding could advice me. I feel like there is something wrong with my way of using json url but I don't understand why. Or maybe it is something else...
Thank you for your time.
Poney
Ok so I worked on others trees from less important projects to get familiar with this concept and with javascript and EXTJS.
So now I come back on this one and I can say that it worked fine in fact but I was not correctly getting the informations after the tree construction.
The reason is that I am working on the migration of some projects from extjs-3.2.1 to extjs-4.2.1 and the whole tree system has changed. The operations node.attributes.something I used to make to get informations from a node don't work anymore and I have to pass through node.data.somethingor node.raw.something. That's all.
I just had to precise a reader and a root to my tree too.
Anyway here is the essential part of the tree:
Ext.define('SelectedModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'id', type: 'string'},
{name: 'leaf', type: 'bool'}
]
});
var tree = Ext.create('Ext.tree.TreePanel',{
renderTo:myrender,
title: document.getElementById(mytitle).innerHTML,
height: myheight,
width: mywidth,
useArrows:true,
autoScroll:true,
animate:true,
ddConfig:{
enableDrag:false,
enableDrop:false
},
containerScroll: true,
rootVisible: false,
frame: true,
store: Ext.create('Ext.data.TreeStore',{
model: 'SelectedModel',
proxy:{
type: 'ajax',
url: myaction,
reader: {
type: 'json'
},
root: {
type: 'async'
}
},
autoLoad: false
});
So there was not any problem, I just had to practice a little javascript and extjs4 and get used to javascript debugging. :)
Now I can appreciate it a little more.
Thank you

CKeditor removes ul list

I am copying html code which has "ul","li" tags, clicking "Source" and pasting it to CKEditor. However, when i go to design, it replaces those tags with "". Is this a bug or did i configure something wrong? Below is the config.js file content.
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: ['clipboard', 'undo'] },
{ name: 'editing', groups: ['find', 'selection', 'spellchecker'] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: ['mode', 'document', 'doctools'] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
{ name: 'paragraph' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
config.filebrowserImageBrowseUrl = '/Admin/BrowseImage';
config.filebrowserImageUploadUrl = '/Admin/UploadImage';
I'm assuming that you're using latest CKEditor (4.1) which comes with Advanced Content Filter. It means that lists will be cleared out of your content unless you have either list plugin loaded with all the features (buttons and commands) or explicitly defined config.allowedContent to accept lists.
It also means that if you remove list buttons, editor assumes that you don't want list in your content and they're simply gone. Your config.toolbarGroups has no list entry and this the root of your problem. You can check whether tag is allowed by typing this in your console:
CKEDITOR.instances.yourEditorInstance.filter.check( 'li' );
>> false
When you add something like this to your config, lists will be back in the editor with UI:
{ name: 'paragraph', groups: [ 'list' ] }
If you really want to preserve your toolbar but allow lists, you can specify:
config.extraAllowedContent = 'ul ol li'.
Also read more about allowedContent rules to know more and use things intentionally.

Load data from bd in senchaTouch app using webservice who return a json

I try to display some data in my Sencha touch application, but it doesn't work... and i can't find what I'm doing wrong.
My webSiste return a json object who look like this
[{"name":"a","id":1}]
the script is getting the Json and display it:
Ext.regApplication({ name: 'Command',
phoneStartupScreen: 'phone-startup.png',
phoneIcon: 'apple-touch-icon.png',
launch: function(){
this.viewport = new Ext.Panel(
{
layout: 'fit',
fullscreen: true,
items: [{xtype: 'list',
itemTpl: new Ext.XTemplate('<div>{name}</div>'),
store: stores
}],
dockedItems: [{xtype: "toolbar",
dock: "top",
title: 'MovieCommand',
items: [{ui: 'back',text: 'back',handler: function(){}}]
}]
});
}
});
Ext.regModel('Commands', {
fields: ['name', 'id' ]
});
var stores = new Ext.data.Store(
{model: 'Commands',
proxy: {type: 'scripttag',
url: 'http://localhost:8080/GTI710/commandes/liste.htm',
format: 'sencha',
reader: new Ext.data.JsonReader ({
type: 'json',
})
},
});
stores.load();
I don't have any error in the java script but nothing is displayed.
I just want to have the "a" displayed but it doesn't work, I don't know why...
The ScriptTagProxy, which you are using, requires a response from server that's composed of legitimate Javascript code.
Specifically, the code is a callback function with the desired JSON data you what as the its first argument:
someCallback([{"name":"a","id":1}]);
The name of someCallback is generated dynamically by Sencha Touch when the request is sent. In other words, your attempt to store the response with a static file will not work.
The name of someCallback is passed as a parameter in the GET request sent by Sencha Touch, the key of which defaults to callback.
If you don't want to have a web server as the data source, checkout Ext.util.JSONP.

Specifying a root in the JSON for an EXTJS tree

I am creating a tree in ExtJS 3.4.0. I understand the JSON the component is expecting should be returned like this:
[{
id: 1,
text: 'Brian',
leaf: true,
checked: false
}]
but the JSON that i am getting retrurned to me has a root node like this:
{"message":
{"nodes":
[{
"text":"Brian",
"id":"1",
"leaf":true,
"checked":false
}]
}
}
I don't see a way to specify in my configuration where in the JSON, the actual tree data is. Is this even possible? I see a "root" paramater, but that is different. Is there a way to specify where in the incoming JSON to "start" from.
Oh and I don't have control over the incoming JSON or obviously I would just change the JSON. :-)
Thanks
I think you could do something like along these lines (from looking at the ext docs):
var treePanel = {
xtype: 'treepanel',
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode({
expanded: true,
children: myJsonObject.message.nodes
})
}
The is a 'root' option in the reader for your Store's Proxy that you can use.
proxy: {
reader: {
type : 'json',
root : 'nodes'
},
// Other configs
}