Having a Dynatree with nodes loaded in lazy mode, is there a way to tell him that a node is a parent before the children nodes being "lazily" loaded?
jQuery(document).ready(function() {
jQuery("#tree").dynatree({
width:300,
title: "Lazy Tree",
keyboard: true,
persist: true,
autoCollapse: true,
clickFolderMode: 3,
fx: {height: "toggle", duration:300},
initAjax: {
type: 'POST',
url: 'treeNodes.php',
dataType: 'json',
data: {key: 0},
},
onActivate: function(node) {
node.toggleExpand();
// Do this and that when some label is clicked
},
onLazyRead: function (node) {
node.appendAjax({
type: 'POST',
url: "treeNodes.php",
dataType: 'json',
data: {key: node.data.key}
});
}
});
});
MySQL request in treeNodes.php to load the nodes:
if ($parent==0) { // Load first level nodes
$req = "SELECT name AS title, id AS 'key', isparent AS isLazy FROM `".$database['database']."`.`".$database['prefix']."categories` WHERE parent=0";
} else { // Load sub-nodes from the given parent
$req = "SELECT name AS title, id AS 'key', isparent AS isLazy FROM `".$database['prefix']."categories` WHERE parent=".$_POST['key'];
}
The isparent column stores if a node is parent or not.
Using it to set isLazy as 1 or 0 tells the tree to display with expandable nodes. But the nodes display with an "unknown status" (blue diamond icon) until they are clicked.
I'm looking for something equivalent to an "isParent" node parameter, so that as soon as it is displayed, each node comes with a [+] symbol if it does have children and no symbol else.
If you know that a node does not have children, set "isLazy": false, so no expander icon is displayed.
If you know it has children, you could send them directly with the current request, so a [+] is displayed.
If you know it has children, but you don't want to send them with the current request, set "isLazy": true, so a [*] is displayed. This indicates that the user can expect more nodes to be loaded on expand.
You may override the icon to a [+] with custom CSS, of course.
p.s.
Note that DynaTree is no longer actively maintained. I recommend switching to Fancytree.
Related
While developing contextmenu based extension for Chrome, i'm facing a situation where invoking chrome.contextMenus.onClicked.addListener in a loop adds action cumulatively for each subcontext menu item.
So, when subcontextmenu is clicked it triggers event listener for all subcontext menus, instead for the context menu which was clicked.
var parent;
chrome.runtime.onInstalled.addListener(() => {
parent = chrome.contextMenus.create({"title": "CCM", "id":"CCM", "contexts":["selection"]});
});
Object.keys(msgs).forEach(function(key) {
chrome.runtime.onInstalled.addListener(() => {
var createCM = chrome.contextMenus.create(
{"title": "subcontextmenu"+key, "id":"scm"+key, "parentId": parent, "contexts":["selection"]});
});
chrome.contextMenus.onClicked.addListener(function(info,tab){openAction(info,tab,JSON.stringify(msgs[key]['msg']));}
);
});
In the above example, msgs is a JSON object containing message to be displayed when each subcontextmenu is clicked. Also, the msgs JSON context is bound to change dynamically. So, we can't tweak openAction to hardcode the numbers and associate the messages.
Hope my question is clear. Any help for clearing this confusion will be a great time saver for me.
Use one listener for onInstalled and onClicked (it provides menuItemId in its parameter).
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({title: 'CCM', id: 'CCM', contexts: ['selection']});
Object.keys(msgs).forEach(key => {
chrome.contextMenus.create({
title: 'subcontextmenu' + key,
id: 'scm' + key,
parentId: 'CCM',
contexts: ['selection'],
});
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
openAction(info, tab, JSON.stringify(msgs[info.menuItemId].msg));
});
I would like to search datagrid in Kendo UI during typing into input field above the grid.
How can I do it?
Thanks for any advice.
Here is example of columns:
$("#grid").kendoGrid({
dataSource: dataPacket,
filterable: true,
pageSize: 10,
pageable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: ["id",
"username",
"name",
"surname",
"email",
{
field :"created",
title : "Created at",
format: "{0:M/d/yyyy}",
parseFormats: ["dd-MM-yyyy"],
type: "date"
},
Kendo make this thing really easy for you, what is needed is to create a filter and pass it to the DataSource.
http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-filter
However, this problem must be divided into two different tasks:
a) Capture the key events in the search box, throttle it and start the search "operation".
b) Build a filter and pass it to the DataSource.
So for throttling the keyboard events, we need a timeout. Or use the throttle function from underscorejs. Why? We don't wanna trigger a search operation on each key press. Only 250 milliseconds (this number is up to you) after the last keystroke.
Here is your sample HTML
<input type="text" id="search" />
Here is your sample script. I wrap everything as a self calling function as you don't wanna create a mess declaring global variables.
(function($, kendo){
// ID of the timeout "timer" created in the last key-press
var timeout = 0;
// Our search function
var performSearch = function(){
// Our filter, an empty array mean "no filter"
var filter = [];
// Get the DataSource
var dataSource = $('#grid').data('kendoGrid').dataSource;
// Get and clean the search text.
var searchText = $.trim($('#search').val());
// Build the filter in case the user actually enter some text in the search field
if(searchText){
// In this case I wanna make a multiple column search so the filter that I want to apply will be an array of filters, with an OR logic.
filter.push({
logic: 'or',
filters:[
{ field: 'username', operator: 'contains', value: searchText },
{ field: 'name', operator: 'contains', value: searchText },
{ field: 'surname', operator: 'contains', value: searchText },
{ field: 'email', operator: 'contains', value: searchText }
]
});
}
// Apply the filter.
dataSource.filter(filter);
};
// Bind all the keyboard events that we wanna listen to the search field.
$('#search').on('keyup, keypress, change, blur', function(){
clearTimeout(timeout);
timeout = setTimeout(performSearch, 250);
});
})(window.jQuery, window.kendo);
Bottom-line: Make sure you are using the right DataSource configuration.
If you configured serverFiltering = true, this filtering logic will be part of your Ajax request, so your server will have to interpret and perform the filtering on server-side.
In case you configured serverFiltering = false all this filtering logic will be evaluated on client side using JavaScript (damn fast!). And in this case, the schema (what data-type is expected on each column) must be also well-configured.
Let's say I have a TabPanel that gets two components added to it. Each component contains an Infinite Grid. Each Infinite Grid loads its data from a service call, and each set of data contains 2,000 records. After the components are added to the TabPanel, we set each one to be the active tab, using setActiveTab. We first set the 2nd tab as the active tab and then set the first tab. When the page loads, the first tab is selected, as we expected.
When looking at the first tab, everything looks fine... we can infinitely scroll, sort, hide columns, etc. However, if we switch to the second tab, we see that it has partially loaded, and we can't scroll past the x records that have loaded, hide columns, sort, etc. It's almost as if using setActiveTab was a bit premature with rendering the grid... as if the store wasn't completely loaded, but the tab was rendered anyway. (this is what I'm assuming the issue is)
I do have code, but it takes a little work on your end to reproduce (because you need a service call). I'm using CompoundJS within a Node.js application, so it was very easy for me to create the test case. If you have access to a database, and can make a quick service call, just modify my Ext JS code, but if you want to use Node.js, you can try this:
Ext JS 4.2.1
Ext.onReady(function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: Ext.getBody()
});
Ext.define('myGrid', {
extend: 'Ext.grid.Panel',
constructor: function(config) {
this.columns = config.columns;
this.store = Ext.create('Ext.data.Store', {
fields: config.fields,
buffered: true,
leadingBufferZone: 20,
pageSize: 50,
proxy: {
type: 'ajax',
url: '/getData?id=' + config.id,
reader: {
totalProperty: 'totalCount',
type: 'json',
root: 'root'
}
},
autoLoad: true
});
this.id = config.id;
this.callParent();
}
});
var grid1 = Ext.create('myGrid', {
id: 'blah',
columns: [{
text: 'one',
dataIndex: 'one'
}, {
text: 'two',
dataIndex: 'two'
}, {
text: 'three',
dataIndex: 'three'
}],
fields: ['one', 'two', 'three'],
title: 'grid1'
});
var grid2 = Ext.create('myGrid', {
id: 'bleh',
columns: [{
text: 'one',
dataIndex: 'one'
}, {
text: 'two',
dataIndex: 'two'
}, {
text: 'three',
dataIndex: 'three'
}],
fields: ['one', 'two', 'three'],
title: 'grid2'
});
var c1 = [];
c1.items = [grid1];
c1.title = "BLAH";
c1.layout = 'fit';
var c2 = [];
c2.items = [grid2];
c2.title = "BLEH";
c2.layout = "fit";
tabPanel.add([c1, c2]);
tabPanel.setActiveTab(1);
tabPanel.setActiveTab(0);
});
Node.js code
compound init test && cd test
npm install
compound g s testcontroller
Replace app/controllers/testcontrollers_controller.js with:
load('application');
action('getData', function(data) {
var query = data.req.query;
var id = query.id;
var page = query.page;
var pushObj;
if (id === 'blah') {
pushObj = {
one: 'bye',
two: 'goodbye',
three: 'auf wiedersehen'
};
}
else {
pushObj = {
one: 'hi',
two: 'hello',
three: 'guten tag'
};
}
var obj = [];
for (var i = 0; i < 50; i++) {
obj.push(pushObj);
}
send({
totalCount: 2000,
root: obj,
page: page
});
});
In config/routes.js, remove testcontroller's map.resources line, and add this:
map.get('getData', 'testcontrollers#getData');
In public/index.html, make it a generic HTML file, and add in your links to Ext JS and my above Ext JS code.
Now, once you've done all of that, you should be able to reproduce my issue. The first tab will open and be just fine, but the second tab only loads the first x amount of records and doesn't function properly. I believe this is due to the store not loading completely when setActiveTab is fired, which makes the rendering load an impartial store.
What I want to know is, how do I get this to work properly? I've tried waiting for the store to load, and then adding it to the tab, but that still gives me inconsistent results, as well as tried waiting for the grid to stop rendering, but still, I get inconsistent results... inconsistent meaning, sometimes the grid loads all the way, and the tab is fine, but other times, I get a cannot read property 'length' of undefined in ext-all-dev.js:135,786... which makes it seem like the store hasn't completely loaded, as that line contains a reference to records.length.
If anyone has any ideas, I'd love to hear them! Cross-posted from the Sencha forums.
EDIT: Thanks to #rixo, I was able to reproduce the problem in this example. If you enable Firebug, you'll see the error about property length of undefined, as I stated above.
I tracked the issue down to the plugin caching incorrect size values when it is hidden.
Here's an override that would fix this behavior:
/**
* Prevents BufferedRenderer plugin to break when buffered views are
* rendered or refreshed while hidden, like in a card layout.
*
* Tested with Ext 4.2.1
*/
Ext.define('Ext.ux.Ext.grid.plugin.BufferedRenderer.HiddenRenderingSupport', {
override: 'Ext.grid.plugin.BufferedRenderer'
/**
* Refreshes the view and row size caches if they have a value of 0
* (meaning they have probably been cached when the view was not visible).
*/
,onViewResize: function() {
if (this.rowHeight === 0) {
if (this.view.body.getHeight() > 0) {
this.view.refresh();
}
} else {
this.callParent(arguments);
}
}
});
That being said, I advice against using this and unnecessarily bloating your code base.
You should rather organise your code in a way that avoid this situation. The problem is created by the fact that you're calling setActiveTab multiple time in the same execution frame. If you avoid that, Ext will handle the situation correctly all by itself.
As a general principle, you should try to make your Ext code more declarative... Ext architecture rather expects you to build big configuration objects to create your component at once (allowing for atomic DOM updates, etc.), and use methods that will update the state only later, to drive the components behaviour.
In your precise case, you should use the activeTab option to set the initial tab, and only call setActiveTab later, when you actually need to change the tab. That will save some unnecessary processing at initialization, and will also resolve your rendering issue...
Here's how your code should look like:
Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 400,
// Use this option to set the initial tab.
activeTab: 2,
// You don't need to overnest your grids into another Panel, you can add
// them directly as children of the tab panel.
items: [
// Ideally, you should give an xtype to your class, and add this to
// avoid instantiating the object yourself... Thus giving Ext more
// control on the rendering process, etc.
Ext.create('myGrid', {
id: 'blah',
title: 'Bleh',
columns: [{
text: 'one',
dataIndex: 'one'
}, {
text: 'two',
dataIndex: 'two'
}, {
text: 'three',
dataIndex: 'three'
}],
fields: ['one', 'two', 'three'],
title: 'grid1'
}),
Ext.create('myGrid', {
id: 'bleh',
title: 'Bleh',
columns: [{
text: 'one',
dataIndex: 'one'
}, {
text: 'two',
dataIndex: 'two'
}, {
text: 'three',
dataIndex: 'three'
}],
fields: ['one', 'two', 'three'],
title: 'grid2'
})
]
});
As you can see, the tab panel child items are set at creation time, avoiding useless processing with the add method. Likewise, the activeTab option avoid to initialize the panel in a given state and change it right away... Later (in another execution frame, for example in a button handler), you can use setActiveTab without triggering the bug demonstrated in your original example.
I'm, trying to add a search box exactly as one on sencha docs home page http://docs.sencha.com/ext-js/4-0/
I used the code from the example
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
and everything works as expected except for one thing ..
when I select an option from a list in my search box the combobox value is set to the selected value .. and when I press arrow down button it performs a new search with modified query ..
but I just want to see the results of the previous search - exactly the behaviour of the search box on sencha page
any ideas how to achieve that ?
After trying various things the code below does what i need, but maybe there is a better way ..
I had to set triggerAction to 'query' and also had to manually reset the text of the combobox in the the select event handler
var searchBox = {
xtype: 'combo',
store: dataStore,
displayField: 'title',
valueField: 'id',
autoSelect: false,
typeAhead: false,
fieldLabel: 'Search for',
hideTrigger:true,
anchor: '100%',
mode:'remote',
triggerAction: 'query',
listeners: {
'select' : function(combo) {
var selected = this.value;
combo.setValue(combo.lastQuery);
showResult(selected);
}
},
listConfig: {
loadingText: 'Searching ...',
emptyText: 'No matching posts found.',
getInnerTpl: function() {
return '<a class="search-item" href="?term={id}" onclick="return javascript:showResult(\'{id}\')">' +
'<h3><span>{title}<br /></span>{id}</h3></a>';
}
},
pageSize: 10
}
You need first sample from this page. Type "A" first
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html
I am trying to call resetCombo method once i click on link from tooltip which is rendered on combo
But i am not able to access it because of scope issue not sure what i am missing. Please help me on this.
Ext.define('test.BasicForm', {
extend: 'Ext.form.Panel',
renderTo:Ext.getBody(),
initComponent :function(){
this.items=[
{
fieldLabel: 'Test',
xtype: 'combo',
displayField: 'name',
width: 320,
labelWidth: 130,
store: [
[1, 'Value 1'],
[2, 'Value 2'],
[3, 'Value 3'],
[4, 'Value 4']
],
listeners:{
afterrender: function(combo) {
Ext.create('Ext.tip.ToolTip', {
target: combo.getEl(),
autoHide: false,
name:'tool-tip',
scope:this,
html: 'Old value was '+ combo.getValue()+ ' test',
listeners: {
beforeshow: function() {
return combo.isDirty();
}
}
});
}
},
value:'1'
}];
this.callParent(arguments);
},
resetCombo:function(){
alert('called');
}
});
First this has nothing to do with ExtJS4's MVC features which are generally associated with a controller's control method:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-method-control
Second, you may be able to instead get the effect you want by switching to the following, fully qualified path to reset combo:
onclick="javascript:test.BasicForm.resetCombo();" //etcetera
Lastly, though you may get the above to work, it is far from best practice. I don't have time to give the complete answer, but essentially what you want to do consists of:
Adding a click event handler to the tooltip's underlying Element
Then inside the element use the arguments to Ext.dom.Element.click (see http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-event-click) to ensure it was an <A> tag that got clicked
Then invoke the desired function without having to use Javascript pseudo-URL's and a fully qualified path to the function
Here is my working re-write of the afterrender listener following the above guidelines, with some tweaks to scope, in particular storing a reference to the form in a variable of the same name.
listeners:{
afterrender: function(combo) {
var form = this;
var tooltip = Ext.create('Ext.tip.ToolTip', {
target: combo.getEl(),
autoHide: false,
name:'tool-tip',
html: 'Old value was '+ combo.getValue()+ ' <a class="tooltipHref" href="#">test</a>',
listeners: {
beforeshow: function() {
return combo.isDirty();
},
afterrender: function() {
tooltip.el.on('click', function(event, element) {
if (element.className == 'tooltipHref') {
form.resetCombo();
}
});
}
}
});
},
scope: this
}
test
this code is attempting to call a function named resetCombo which is stored inside the top-level object (the window object).