[revised]
I'm creating a TreePanel in ExtJs that is loading its children from a JSON file. I'm having trouble adding a click action to the nodes. I'm not sure whether it's added in the script creating the tree, or if its added as a property in the JSON, and if so, what the syntax would be. Any help would be appreciated! Please provide an example if possible.
Add a listener to the TreePanel:
listeners: {
click: function(node, event){
console.log(node);
}
}
and use the data in the node.
This is a very commonly talked about question(events in general), so I would suggest searching the extjs forums and reading what they have in their learning center.
Event listeners can be assigned on creation of the TreePanel or attached to an existing TreePanel.
I have a similar (and common) setup where I have a tree that I use as a navigation menu and each leaf node acts as a link that should be opened in a TabPanel.
To handle the node clicks, you could do something like:
Ext.get('your-tree').on('click', function(node, event){
if(node.isLeaf()){
// do what you need to with the node.
}
});
Jozef Sakalos(aka Saki) has allot of great information on his site extjs.eu. I think you would be most interested in the component communication example.
Gerry is putting you on the right track, and you can never go wrong with Saki's examples. I just answered a very similar question. That answer may give you more information as well:
How do I find the selected node in an ExtJS TreePanel?
Related
I've added a plugin that allows the user to add a specially styled div via a dialog. The issue now is, this element should not be clickable inside the edtior. The problem is the users manage it to click inside the div and enter text there and by this screw it up.
I've already spent some time searching the documentation but couldn't find the right approach to do this yet. I'm not asking for code, just some advice how to do it, a pointer to the right API method would be good enough for me. I guess I can somehow access the elements or intercept an users click and prevent them from adding something to my element somehow, I just couldn't yet figure out how to do it.
Use the Widget System.
Widget Tutorial.
Demos.
I've finally managed to get this done by making the elements content not editable. When I create the element in my dialog:
hrElement.setAttribute('contenteditable', false);
When loading the plugin:
init: function (editor) {
editor.on('contentDom', function () {
var stiching = (this.document.getElementsByTag('div'));
console.log(stiching);
for(var i=0;i<stiching.count();i++){
if (stiching.getItem(i).hasClass('stitching')) {
stiching.getItem(i).setAttribute('contenteditable', false);
}
}
});
}
I'm pretty sure this is not the most best solution (don't like to iterate over the elements) but at least it works for me now. Any suggestions how to improve it for future cases are welcome.
I am using Sencha ExtJs grid 4.2 . I am using a Expander plugins for my grid and try to load data under expanded region from Ajax. Right now I am using this code to show data on expanding.
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<br><img height="31" width="32" src="../upload/patient/thumb/{patient_image}">',
' <p><b>{fname}, {lname}</b></p>',
'<br> {accordian_view}'
)
}],
Here you can see that data is pre populated, but my requirement is to load data on expanding. I am trying hard to find the event or process to do it. But still no luck. If anyone have any idea please share.
Thanks in Advance
You might check out the expandbody event on the RowExpander plugin: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowExpander-event-expandbody
This event passes not only the row's bound record, but also the expanded element, so you could:
Request data via Ext.Ajax.request({...})
Handle response
Add content to expanded row
One thing to keep in mind, however, is the async nature of this approach. That is, the row is going to expand immediately, regardless of how long the subsequent request takes to come back. So it would probably be a good idea to do something like this instead when handling the expandbody event:
Add "loading" text/icon/whatever into expanded row area
Make Ajax request
Handle response
Replace loading text/icon/whatever with the data returned from the Ajax request
It's likely someone has already done so, but you could also (and I would highly suggest it) wrap this process into a custom plugin of your own that extends the RowPlugin. That way you could use it elsewhere in your app for any grid. If you end up creating a custom plugin, please share it with the community!
EDIT: A quick Google revealed a number of custom plugins that do precisely this. For example: https://github.com/nickbretz/Ext.ux.AsyncRowExpander/blob/master/AsyncRowExpander.js
I'm a QA, and I'm new to android automation as such, and I am having problem in automating the spinner / Dropdown related activities in my app. I am using Robotium 4.1 for my automation.
The Spinner in my app is implemented using actionbarsherlock. The Hierarchyviewer shows it as Popupwindow:SOME-RANDOM-ID. It looks like the implementation is internal to actionbarsherlock. After talking to the dev he tells me that it's a "non-visible" element. I don't understand what that means, because I can see the element.
Also, I can't find the methods mentioned in some of the other questions here.
I suppose the right way is to use solo.getViews(), and solo.getCurrentViews etc. but I don't know how to use the parameters in there, so whatever I tried didn't work.
Can someone guide me with a detailed example? (including how to give the parameters to getViews etc will be much appreciated.)
How to get number of items:
mSpinner.getAdapter().getCount();
How to click on specified item on spinner:
solo.pressSpinnerItem(indexOfSpinner, indexOfItem);
How to get current spinners:
ArrayList<Spinner> currentSpinners = solo.getCurrentViews(Spinner.class);
How to get spinner with specified index:
Spinner spinner = getView(Spinner.class, index);
Okay, so it took some digging here, I hope the solution I found is useful. I hope even more, though, that there is a less jacked-up way to do this, and someone can point it out.
I was trying to figure out how to get the source of a delegated tap event from an item that is in a carousel, rather than a list or other similar structure with built-in passable arguments in Sencha Touch 2; the scope of the event is, by default, the container that has the listener. All of the arguments that were passed through the function were related to the mouse click event, rather than the source. See below for my solution.
One more way
tap: function(list, index, target, record, e, eOpts){
var elm = Ext.get(e.target);
Ext.getCmp(elm.dom.id);
}
Like I said, this is a hacky solution, if there's something better that'd be awesome, please post it here. Anyway, this is the delegate listener code I used:
{
element: 'element',
delegate: '.completed_button',
event: 'tap',
fn: function(element){
var source_id = element.getTarget().id;
Ext.getCmp(source_id);
}
}
In other words, pass the click event argument, get its target, and get that target's id. I found this through snooping around what console.log(element) showed me.
I have some questions regarding GWT (2.1) with MVP and events.
Got DockLayoutPanel with some components in it. A Tree component to the west and a SimplePanel in center. Each component has a presenter and a view. The problem is that I want to handle the components events in their presenter class, but now they are only catchable in the container which is the DockLayoutPanelPresenter . I want to handle the tree's event s in the TreePresenter. I think that the TreePresenter should handle its 'SelectedItem' events and the it can put it on the eventbus so that my other components can react to it.
Has anyone else faced this? Posted on GWT groups list, but got no reply. I think this is an imporant topic for decoupling components.
In this case, where different regions of the page each have a Presenter, you could use the approach suggested by David Chandler of the GWT team:
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/2812e1b15a2a98a6/8c82d629b7a48e56?lnk=gst&q=EastActivityMapper#8c82d629b7a48e56
You should read the post, but in summary, you would do something like this:
WestActivityMapper westActivityMapper = new WestActivityMapper();
WestActivityManager westActivityManager = new WestActivityManager(westActivityMapper, eventBus);
westActivityManager.setDisplay(westPanel);
EastActivityMapper EastActivityMapper = new EastActivityMapper();
EastActivityManager eastActivityManager = new EastActivityManager(eastActivityMapper, eventBus);
EastActivityManager.setDisplay(eastPanel);
dockLayoutPanel.addWest(westWidget, 50);
dockLayoutPanel.addEast(eastWidget, 50);
RootLayoutPanel.get().add(dockLayoutPanel);
The west activity mapper would be responsible for displaying your Tree, and the east mapper would contain the body of your application.
We are using this approach to display a list of items in our west docked panel (not a tree, but close enough) which then updates what is displayed in the body of our app. When a user selects an item from the list we trigger a new Place event, and include the list item's id as the Place Token, so that the user can use the back button. However, you could also use the EventBus as you pointed out.