Sencha touch list with index bar : auto scroll - sencha-touch

I'm starting in sencha touch ,and I try to create an application.only,I have a problem. I use a list with indexbar. this list is in a panel. and I wonder if it's possible to add an event listener to the panel, to jump to an index to the next. Let me explain with an example:
-We have a list of products and these products are sorted by their type (phones,computers...), the indexbar lets you know what type of product it is.
-To switch from one type to another,We Have to scroll.
What I seek to do is put a listener to the panel so that the scroll from one type to another is automatic every time you tap on the panel or on a next button. for example.
Please excuse my english and help
Thank you.

Try using dom property scrollTop .
For example:
el.dom.scrollTop = 1000;//this will push the panel down by 1000px;
You can always get the el, dom from panel/element properties/ attributes list.

Related

Expandable List View setonchildlistener not working

I was working with expandable list view in kotlin. I wanted it to open a new activity when I clicked on a child in the list. But I couldn't do it. If you know of a way to do this, please be helpful.
enter image description here
this tried method
try with method: setOnItemClickListener instead of childClickListener.

How to create Framework7 side panel in normal vue?

I'm working with Vue+F7.
Is it possible to create new side panel in Vue, according to my scenario I need something like when app open the first page will come with one left side panel. Now when the user logged in I need to another side panel rather than the first one, because the content I would like to place is different.
If possible can anyone tell me how to create that panel in my example.vue?
Thanks
You can create a component where you sent a Json with the menu data.
For example:
{[
{"name":"name_route1", "route":"#/miRuta1.vue"},
{"name":"name_route2", "route":"#/miRuta1.vue"},
{"name":"name_route3", "route":"#/miRuta1.vue"}
]}
This way you would have the same component (you would use the same panel) but dynamically you would pass the elements that it is going to mount.
you can simply make both panels and show them conditionally based on the loggedIn boolean. with v-show this is very easy. check these out:
v if
v else if
v show

Cytoscape.js, add title to whole complex & right click enable

a) I have a complex of nodes and edges. I want to add a title to the complex. Is there any way in Cytoscape.js, where I can display the title of the complex?
b) Additionally, I want to give user an option to download the complex in png file with a right click option, but my right click on the cytoscape div doesn't work. Is there any way or any flag I need to change to enable my right click on the picture?
Looks like no one is going to answer my question, answering them myself:
So, after struggling with these questions; I have got the solution for my first problem i.e. putting the title. We can have a parent node with the label as your complex title and then display it on the node. Don't think that it is a good way to do it. There should be something in cytoscape.js to display the title as well. But I don't think it is there yet.
In cytoscape there is an option to bind the event on right click, "cxttap" I used that to make a right click event. But I don't know how to give options on that click, working on that..!! If you are looking for same solution, stay tuned ;)
You can use right button with cytoscapejs by modifying the code below, adding your code
cy.on('cxttap', function(e){
console.log("right click!"); // just to check that it works, look at the console
// add here your code...
// ....
})

Dojo dijit tree hide expand icon

I've got a dijit Tree which is populated via a store wrapped in Observable, essentially the example here: http://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html#id7 (Not that the example actually runs from the dojo site though: unless that's just my browser).
It's working well and I can expand and collapse items. However, it displays an expand icon even for the last item in a hierarchy - i.e. an item that doesn't have any children. When you try and expand such an item, it seems to realise this and the expand icon then disappears.
Does anyone know of how to supress the expand icons from appearing in the first place?
Thanks!
Implement the mayHaveChildren() method of the model:
Implementing logic here avoids showing +/- expando icon for nodes that
we know don't have children. (For efficiency reasons we may not want
to check if an element actually has children until user clicks the
expando node)
This method inputs one of your items and outputs true if it can be expanded; false otherwise.

Dojox.grid.DataGrid - in a widget - only renders on visible tab

I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});