I can add element to tree in extjs and I want to see it just after adding. How can I focus on than element (expand everything before it and put selection on it)?
You can use the method selectPath on your TreePanel as detailed here:
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.tree.Panel-method-selectPath
This method will open every nodes needed to access your element and select this element. The way you express the path is as follow:
Ext.getCmp('treePanel').selectPath('/Root/Leaf/Element', 'text')
Here, the text property of my TreeModel has been used (The second parameter), but you can change that for anything, like the id.
Ext.getCmp('treePanel').selectPath('/1/16/42', 'id')
To build this path, the better way is to use the method getPath on the particular item you want to select:
item.getPath('text')
Related
other buttons on the page has same elements except the numeric part in the id.
COMMUNICATE
I tried below xpath to locate the element but it did not work. Got below error
stale element reference: element is not attached to the page document
Can any one please help me to write code for clicking this button
You can try to get the xpath with "contains", if it's changing some part of the id.
But stale element reference is something different. It means that the element you're trying to interact, is changed after you create a webelement reference (like refresh etc.). Can you give a url, if it's public?
I am trying to set up mouse events for an element stamped out by dom-repeat. The event should trigger a style change for a different element in the dom-repeat template, basically just a color change for an icon in a box on a box hover.
As automatic node finding is not available for dynamic nodes, the docs say I should use the $$ selector.
However, $$ only returns the first node in the local DOM that matches selector, and I want the hover effect for all boxes stamped out by the dom-repeat.
As $$ selects an element's property, that leaves me thinking I would need to set up a dynamic attribute for the icon from the dom-repeat, so that I can select every repeated icon instance in the mouse event change functions.
The repeater gives me the index, but how would I set a dynamic property with it, instead of a dynamic value?
What am I missing?
This should do what you want:
var nodes = Polymer.dom(this.root).querySelectorAll(...)
If you modify the DOM you might need to use the Polymer.dom(...) API for the individual nodes you are modifying.
Polymer.dom(nodes[i])...
We are using slickgrid in our angular directive.
And we would like to use another list directive (simple select element with input) in a cell/column of Slickgrid.
I want the list element to be visible when the grid is available, so user knows there is a list. Therefor I am using the list directive as formatter. It Is visible when the grid is rendered.
The Problem:
When the cell that holds list element is clicked, the editor mode is never fired because of the list element click event.
We thought to use an image of list that user knows there is a list, and when clicked open the list.
Is there a better way to do it?
We have managed to get it done using list directive as our rendere/formatter as well as editor.
We made our list directive as ReadOnly so it does not fire click event. And now one sees a list element when grid is rendered. And when one clicks on the cell with list, the list is automatically opened via code. The only problem we have now with this solution is that how to copy selected Item from editor to formatter (if anyone knows, please share).
Any better solution is also welcomed.
I have a problem of locating one radio button from a list of buttons using #FindBy annotation.
I have a title option web elements with Mr Ms .. Dr as a radio button since they are located in the same div then the they have almost the same xpath or id apart from ending indexer,
and I dont want to have 6 of #FindBy for every corresponding option of title
the solution that I'm looking for is when I use cucumber feature file with a step
Given Im 'Mr'
Given Im 'Ms'
it will go to the page object and #FindBy(............) WebElement title
.....
title.click //annotation will click the corresponding title
If you want to make a dynamic #FindBy then it's not possible, you can have dynamic By locator, or a String element in that By locator, but what you provide to the FindBy annotation must be immutable. So you should know what you are looking for exactly if you are using FindBy
It's hard to tell without a page source code example how to get to the radio button itself, but using xpath it can easily be achieved as most probably your radio buttons have their names or even ids set up, as a last resort you can search for a text within element.
e.g:
"//input[#id='btnId']" (in case of present id I would suggest using css selector "input#btnId")
"//label[contains(text(), 'Mr')]/input"
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.