I would like to create an event listener to detect when my nestedlist is at the top level, and then hide a component on the page. For example:
onNestedlistActiveItemChange: function(container, value, oldValue, options) {
if (this.getMyNestedList().atLevel(0)) <-- seudo code, does not work
{
Ext.getCmp('myButton').hide();
}
}
Thanks in advance for your help
The _backButton._hidden property of the nested list will return true when the default back button is hidden and false when the button is displayed. The button is hidden only when the nested list is at the top level.
The trick is to use the nested list's "back" event, which returns the state of the toolbar after the back event has occurred:
onMynestedlistBack: function(nestedlist, node, lastActiveList, detailCardActive, options){
if(nestedlist._backButton._hidden) {
Ext.ComponentQuery.query('#myButton')[0].hide();
}
}
That is, if the nested list's back button is hidden, then the list is at the top level, so hide myButton.
There are certainly more rigorous ways to do it, but most of them would involve overriding the toolbar's default button handling.
You can get the list level by checking the index of the list
var idx = nestedlist.getInnerItems().indexOf(list);
if (idx === 0) {
// top level...
}
[UPDATE]
You can also check the depth level of the record
var depth = record.getData().depth;
if (depth === 1) {
// top level...
}
Related
I use vue-chartjs to draw some chart like line, bar, etc.
In my project, there are many cases using specific value or lable of data in chart.
Using tooltip option of vue-chartjs, I can check that value or label of data item when hovered.
I want to know how to access or get information of specific data matched with point on graph when clicked(not hovered).
Here is my code about chart options.
chartOptions: {
responsive: false,
onClick: function(evt){
//Some logic to get value of label of specific data...(type, label, value, ...)
}
In my case, I use 'onclick' option to access specific data on point triggered 'click' event. In 'onClick' callback, I checked all of chart elements and dataset, etc.
How can I get value of label specific dataItem on point of graph(like line) or bar of graph(like bar) when triggered click event?
I was not able to find a solution that worked for me, but I dug a little bit and this is what I came up with.
onClick: function(evt, array) {
if (array.length != 0) {
var position = array[0]._index;
var activeElement = this.tooltip._data.datasets[0].data[position]
console.log(activeElement);
} else {
console.log("You selected the background!");
}
}
This will get the position in the array that you clicked and grab the data from what position you clicked. This may not be the prettiest or best example, but it worked for me.
This solution use the getElementAtEvent method of chartjs, but to use that you need reference to the Chart itself, not the Vue component. We can get that from the $data._chart property. To use this in a parent Vue component, we use the $refs as seen below`.
So parent defines the chart options
{
...
options: {
onClick: this.handleChartClick
}
...
}
and then parent method, using $refs with $data._chart to get the chart. We get the datasetIndex and value and also the tooltip
handleChartClick(evt, elements) {
var chart = this.$refs.periodChart.$data._chart;
const chartIndex = chart.getElementAtEvent(evt);
if (chartIndex.length !== 0) {
const datasetIndex = chartIndex[0]._datasetIndex;
const position = chartIndex[0]._index;
const info = {
datasetIndex: datasetIndex,
valueIndex: position,
label: chart.tooltip._data.labels[position],
value: chart.tooltip._data.datasets[datasetIndex].data[position]
};
console.log(info);
} else {
console.log("Background clicked");
}
I was trying to use dynatree with lazy loading on in my project.
When I tried to combine the select functionality with the checkboxes and select mode 3 I was disappointed to see that the select rule for mode 3 which is select everything including children children .... children when the parent is selected.
This is because the children havent yet been loaded.
Does anyone have a workaround to get this working ? I would very much appreciate any suggestions.
Zank ya!!
When adding the children of the parent you selected, check if the parent has children. If TRUE, add each child and set each of those children to selected.
Here is some code below. The onLazyRead will go up top. Every time you click on a lazy node, this function will trigger. Inside this function should be a call to your function that fetches child data for the node you just selected.
The code below that is the way I solved this problem. Pretty much all it is doing is checking if the parent of the node you are adding is selected. If TRUE, you add the node, then .select() it.
This is much simpler when deselecting a node because all the nodes are already loaded. When deselecting, just go down the hierarchy of the tree from the node that is being deselected and simply un-check each node.
I know this is a lot of code to just throw at you, but hopefully you can grasp the idea out of it. If you cannot, I will try to check back to this thread during work. Maybe you can even post what you have so far?
onLazyRead: function(node){
jQuery("#tree2").dynatree("getTree").disable();
var pParentID = node.data.key;
//Select the Node
doChildReport(pParentID); //Get Children for this node's ID
},
///....
//Methods to grab data from a "XMLHttpRequest GET" go here
//....
//When you finally want to add the children that you fetched using the ID of the node you selected...
//treeArray is an array of node data that has been parsed out of a
//string returned by a "XMLHttpRequest GET"
//Contents of array in order, repeating: treeArray[0] = ParentID, [1] = nodeID [2] = nodeName
//Example, the array would return [111], [222], ["Child Node"]
if(){ //IF Next fetched node is on the last level, ie. no children
//add normally
}
else{ //If NOT, add lazy.
if(treeArray[1] != "nill" && treeArray[1] != undefined){
//IF THE PARENT NODE IS SELECTED
if(jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[0]).isSelected() == true){
//AND IF the child node does not exist
if(jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]) == null){
//Add the child node and then mark it selected
addChildNodeLazy(treeArray[1], treeArray[2], treeArray[0]);
jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]).select();
}
}else{
if( jQuery("#tree2").dynatree("getTree").getNodeByKey(treeArray[1]) == null){
addChildNodeLazy(treeArray[1], treeArray[2], treeArray[0]);
}
}
}
}
Lazy load function...
function addChildNodeLazy(NodeID, NodeName, ParentID){
jQuery("#tree2").dynatree("getTree").getNodeByKey(ParentID).addChild({title: NodeName, key: NodeID, icon: false, isFolder: true, isLazy: true});
}
Admittedly, the following is a bit of a hack...but it solves this problem:
onSelect: function (flag, node) {
if (flag && node.childList == undefined) {
node.reloadChildren(function() {
node.select(false);
node.select(true);
});
}
If node is being selected (flag == true) AND the node has not been loaded yet (childList == undefined) then call reloadChildren with a callback function. The callback runs after the data is loaded and simply toggles the checkbox off/on. This causes all the child nodes (which now exist) to be selected.
I have an ExtJS 4 grid with GroupingSummary Feature. ExtJs Default is grid is expanded when user clicks on any cell in grouping row. I want to disable this feature, no expansion should take place except when user clicks on designated 'expand' icon. How do I accomplish this?
There is the 'groupclick' event, is there a way to override its default behaviour and do nothing / remove it?
Thanks in advance
The method for it appears to be inherited from Grouping rather than GroupingSummary, so I suspect you need to override this method to prevent the current behaviour:
onGroupClick: function(view, group, idx, foo, e) {
var me = this,
toggleCls = me.toggleCls,
groupBd = Ext.fly(group.nextSibling, '_grouping');
if (groupBd.hasCls(me.collapsedCls)) {
me.expand(groupBd);
} else {
me.collapse(groupBd);
}
So you will need another file with something similar to the following:
Ext.require('Ext.grid.Grouping');
Ext.define('your.class.here', {
override: 'Ext.grid.Grouping',
onGroupClick: function() {
//do nothing
});
)};
Then you should be able to write a function that mimicks it was doing on groupclick, but instead on your icon click. Hope that helps.
I have a tabpanel with items of nestedlists. Each nested list goes several levels deep. If I drill down one of the nested list, then i click on a different item in the tabpanel, then click back to it, the nested list is still drilled down, instead of refreshing to the top level of the nested list.
How do I get the nestedlist to display the top level instead of the drilled down level everytime I return to it?
Additional Info
OK, I'm part way there. Here's the code I have now:
var tabBar = new Ext.TabPanel({
fullscreen: true,
id : 'footer',
cardSwitchAnimation:false,
listeners: {
cardswitch: {
fn: function() {
Ext.getCmp('footer').getActiveItem().setActiveItem(0);
}
}
},
tabBar: {
dock: 'bottom'
},
items: [/* some nestedlist components */]
});
So the final problem is that everytime I cardswitch, I see the "drillup/slideback" animation of the nested list sliding back or drilling back to the top level item. How do I get it to just show the top level item without this drill up/slide back animation? I want to preserve the slide forward and drill down animation when the user drills down the nestedlist.
You can try to set the cardSwitchAnimation parameter to false in the setActiveItem method
[UPDATE] Deselect item
Add an event listener for the item tap event on the nested list
nestedList.on("itemtap", function(nestedlist, index, item, e){setTimeout(function(){nestedlist(index);},500);}, this);
[UPDATE] From John
For some reason your code didn't do anything for me. But this one worked:
var nestedList = new Ext.NestedList({
store: store,
listeners: {
itemtap: function(dv, ix, item, e) {
// Clear the selection soon
setTimeout(function(){dv.deselect(ix);},500);
}
}
});
In March 2014, with version 2.3.1, I had the above problem with the Ext.dataview.NestedList object. The suggested approach of using the "deselect" method did not work for me - probably because of the two years that have gone by since the original question.
To resolve problem, I used the following:
nestedList.goToNode( nestedList.getStore().getRoot() );
I have a nestedList with a few levels that appears when the user presses a button on the screen. When the nestedList appears, there is no back button (because we're at the top of the tree, so understandably there is nowhere to go back to), whereas tapping on items in the list takes you to screens with a back button.
I'd like to add a back button to the first screen. I have managed to do this, but not without adding the same back button to every sublist in the nestedList - this has the effect of 1 back button at the top level, and 2 back buttons (one to take you out of the nestledList completely, and one to take you up a level) at every subsequent level.
Can anyone help me figure out how to have 1 back button on each screen, including the top level to close the list?
Many thanks
PS a nasty workaround that I'm using at the moment is to have a "close" button in the top right of every screen instead.
I don't know how comfortable you are with the inner workings of Sencha Touch so how you go about doing this is up to you--
The back button is there, hidden, when the nested list is shown (created in the initComponent function with hidden: true), and then onBackTap, onItemTap and setActivePath will all call syncToolbar near the end of their functions which is where the back button is hidden when you are at a depth of 0.
So there are 2 places you need to do something about, first is initComponent which is easy-- just implement initComponent in your nestedList, call the superclass' initComponent and then set the backButton visible
var myNestedList = new Ext.NestedList({
...,
initComponent: function() {
myNestedList.superclass.initComponent.call(this);
this.backButton.setVisible(true);
},
...
});
That takes care of showing it intially.. how you care to deal with fixing syncToolbar is up to you. You can use Ext.override, you can straight up copy and paste the whole syncToolbar function into your nestedList object which would also override it or you could do what you're told never to do and just edit the sencha-touch.js file directly. However you decide to do it, what you're looking to change is
syncToolbar: function(card) {
...
backToggleMth = (depth !== 0) ? 'show' : 'hide';
if (backBtn) {
backBtn[backToggleMth]();
if (parentNode) {
backBtn.setText(backBtnText);
}
}
... };
You can either change backToggleMth to = 'show' or just delete the if (backBtn {...} all together.
In the Sencha Touch 2.2 I had to use a different code:
Ext.create('Ext.NestedList', {
...,
listeners: {
initialize: function(obj) {
obj.getBackButton().show();
},
back: function(obj, node, lastActiveList, detailCardActive) {
switch(node.getDepth()) {
case 1:
obj.getBackButton().show();
break;
case 0:
alert("wohooooooo!");
break;
}
}
}
}