I am stuck at what seems to be a simple thing to do,
I am new to the whole Sencha touch environment and still need to get my head around a lot of things.
here is the issue Im facing,
I have built the gettingStarted app from Sencha homepage, this app is simple where it loads a list from JSON data & on clicking the item in the list, it shows the HTML content of the chosen item
What Im trying to do is create another list so that
1- List one loads on startup
2- On clicking an item in List 1, it loads another list 2
3- on cicking the list 2, it loads the HTML content.
I have written webservice to return data as JSON based on which I would like to build the second list.
Im calling a function "showPost" on itemTap and it looks like this:
showPost: function(list, index, element, record){
Ext.Ajax.request({
url: 'http://localhost/mobig/ws/search.php?cat='+record.get('category'),
success: function(response){
var text = response.responseText;
var responses = Ext.JSON.decode(response.responseText);
alert(responses.posts[0].title);
}
});
I also have, this:
this.getBlog().setData({
xtype:'panel',
title:record.get('category'),
html:'<img src='+record.get('imageURL')+'/>',
scrollable:true,
styleHTMLContent:true
});
}
which loads the HTML content from List 1.
Thanks for your help in advance, and sorry about the bad english,
If you can point me to some examples, It will be a good place to learn.
Thanks!
Mo.
The most convenient way to save your time is to use Ext.NestedList, but I don't recommend it because currently nested list performance in Sencha Touch 2 is still so terrible (scrolling, event catching, etc.), if you care more about performance, you should use 2 seperated Ext.List, for eg. list_one with store_one and list_two with store_two, when list_one fires itemtap event, catch record parameter and process it (maybe through reading a TreeStore, or write your own API such as http://yourdomain/api=get_list_two&record_from_list_one=record)
Hope it helps.
It sounds like you want to set up a nested list. Here's the nested list tutorial, which should point you in the right direction.
Related
From the documentation, it says I can have a collaborative list which contains other collaborative objects, namely another collaborative list. Therefore in my "onFileLoaded" event, I have the following code:
var myRoot = doc.getModel().getRoot().get('myList');
var newList = doc.getModel().createList();
newList.push('Level2');
myRoot.push(newList);
I understand that everytime I reload the file, a new list will be added to "myList". Everything works fine except when I reload the document, that's when the API will only give me "myList" and the "newList" is gone and disappeared into thin air. If I add a string or any other data, the data will persist when I reload the document, but not adding another list to the current list. What am I doing wrong? Thanks in advance.
I am not sure why the above does not work for me, but when I moved the list adding codes out of "onFileLoaded", specifically, adding list to lists only when I click on some DOM element, everything works fine. I supposed these codes should be out of "onFileLoaded" anyways, so it's all good and hopefully someone find these useful.
I have an array from ajax and i need to create jQuery Mobile Listview. I don't found a method for this, so is it possible?
Here's a working example: http://jsfiddle.net/Gajotres/SS7vJ/
And another example with an array: http://jsfiddle.net/Gajotres/yHHWQ/
$(document).on('pagebeforeshow', '#index', function(){
$('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
$('<li>').append('Audi').appendTo('#test-listview');
$('<li>').append('Mercedes').appendTo('#test-listview');
$('<li>').append('Opel').appendTo('#test-listview');
$('#test-listview').listview().listview('refresh');
});
Also don't forget to call .listview( twice, first without refresh parameter, and second time with a refresh parameter. Without it you will receive this error:
cannot call methods on listview prior to initialization
If you want to find out more about how jQuery mobile handles dynamically added content and its markup take a look at this ARTICLE, to be transparent it is my personal blog, or find it HERE.
I've got the following problem, my boss wants me to make our app far more responsive without any waiting time between switching views. It used to a "standard" application based on a ViewNavigator but with just one View that was destroyed and re-created with different content based on the user's selection of tabs he created himself. Views were switched with the default SlideViewTransition. I'm down to half a second now with a slightly more lightweight approach as described below, however that half second is still too much.
The app is a tabbed application where the user can create and edit new views himself, so create/edit/delete tabs and their corresponding tabs.
My current implementation is based on a ButtonBar and a Group that is used to display the "views". The group's content is created based on the selected tab. The content is based on XML data that stores all the required information to build the "view". Naturally, removing and creating the component's takes a little while (the half second I talked about), so I'm after another solution.
What I thought about is using the ViewNavigator and create all stored views upon application start.
Very much like this:
for each (var _view:XML in _allViewsConfig.children()) {
var compView:View = new View();
compView.percentHeight = 100;
compView.percentWidth = 100;
compView.name = _view.label;
for each (var _groupElement:XML in _view.vgroup) {
var group:VGroup = new VGroup;
group.percentWidth = 100;
group.percentHeight = 100;
for each (var _windowElement:XML in _groupElement.window) {
var window:WindowContainer = new WindowContainer;
for each (var _componentElement:XML in _windowElement.component) {
var component:UIComponent = _componentManager.create(_componentElement.#type, _componentElement);
window.addElement(component);
}
group.addElement(window);
}
compView.addElement(group);
}
views.addItem(compView);
}
views is an ArrayList that is used to store the created views.
The only problem I've got right now is that I can't use the Views stored in this ArrayList in the corresponding ViewNavigator.
I tried it the usual way, i.e. navigation.pushView(_viewCreator.views.getItemAt(0) as Class);
This, however doesn't work, no error or anything, the ViewNavigatorjust doesn't do anything, so I guess that a View class can't be created like this.
So how can I make this work?
Also, do you guys think that this is a proper solution to the problem, especially considering the whole dynamic nature of the application (being based on tabs)?
Naturally, slide transitions will be completely disabled as they are quite slow with our complex components.
Any help, comments or thoughts would be greatly appreciated!
EDIT:
On second thought, simply using Groups instead of ViewNavigator and View should make this a little more lightweight and solve the issue of views not being pushed.
In fact ViewNavigator pushView() is a mechanism which create an instance of a given Class (method parameter).
For all navigation history purpose, ViewNavigator uses NavigationStack objects to store relevant values (that you can customize too).
I don't have a straightforward answer for you, but I think you'll have to implement your own custom ViewNavigator mechanism (extending ViewNavigator to leverage existing useful methods and override others).
I am developing an Windows Forms application using VB.NET that offers the user to lookup addresses on Google Maps through a Web Browser. I can also successfully show the directions between two points to the user, as well as allow the user to drag the route as he/she pleases. My question now is - is it possible for me to get the lattitude/longitude information of the route, i.e. the overview_polyline array of encoded lattitude/longitude points and save it to e.g. a text file on my computer? Or is it possible to get a list of all the addresses located both sides of the route over the entire length of the route, and then save the data to a file on my computer? I'm using HTML files to access and display the Google Maps data in the Web Browser item.
Thank you
This is actually pretty simple if your just looking for the screen coordinates.
// this probably should be in your form initialization
this.MouseClick += new MouseEventHandler(MouseClickEvent);
void MouseClickEvent(object sender, MouseEventArgs e)
{
// do whatever you need with e.Location
}
if your strictly looking for the point in the browser, you need to consider the functions
browser.PointToClient();
browser.PointToScreen();
So, this method is usable if you know exactly where your form is (easy to get its coords) and where you webbrowser control is (easy to get coords of this as well since it's just a control in your form) and then, as long as you know how many pixels from the left or right, and from the top or bottom the image will be displayed, once you get the global mouse click coords (which is easy) you can predict where it was clicked on the image.
Alternatively, there are some scarier or uglier ways to do it here...
You can use the ObjectForScripting property to embed code to do this in the webbrowser. It's ugly to say the least. MSDN has some documentation on the process here: http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.objectforscripting.aspx
Because its really ugly, maybe a better solution is to use AxWebBrowser - it's ugly too but not so scary.
In addition, I found this post of someone wanting to do it on a pdf document, and a MSFT person saying its not possible, but really what he is trying to say is that it isn't built in, even with a pdf document its still possible to predict with high to certain accuracy where it was clicked if you use the first method i described. Here is the post anyway: http://social.msdn.microsoft.com/Forums/en/csharpgeneral/thread/2c41b74a-d140-4533-9009-9fcb382dcb60
However, it is possible, and there are a few ways to do it, so don't get scared from that last link I gave ya.
Also, this post may help if you want to do it in javascript:
http://www.devx.com/tips/Tip/29285
Basically, you can add an attribute on the image through methods available in the webbrowser control, you can add something like onclick="GetCoords();" so when it is clicked, the JavaScript function will get the coords, and then you can use javascript to place the values in a hidden input field (input type="hidden") which you can add through the webbrowser control, or if there is one already on the page, you can use that. So, once you place the coords using javacript into that input field, you can easily grab the value in that using the webbrowser control, eg:
webbrowser1.document.getElementById("myHiddenInputField").value
That will get the value in that field, which you've set through JavaScript. Also, the "GetCoords()" function i mentioned is called SetValues() in the javascript method link i provided above (in the devx.com site) but I named it GetCoords because it makes more sense and didn't want to confuse you with the actual name they used, you can change this to any name you want of course. Here is the javascript they were using, this only gets the coords into a variable, doesn't put it into a hidden input field, we will need to do that in addition (at the end of the javascript SetValues/GetCoords function).
function SetValues()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
document.getElementById('divCoord').innerText = s;
}
These guys are just saving it inside a div element, which is visible to users, but you can make the div invisible if you want to use a div field, there is no advantage or disadvantage in doing that, you would just need to set the visible property to false using javascript or css, but still, it is easier to use a hidden input field so you don't need to mess with any of that.
Let me know how you get along.
I would like to re-use a Request.JSON object, but I am not sure how. I'm looking for something like the following example:
// In initialize/constructor
this.request = new Request.JSON( {
method : 'get'
});
// Elsewhere
this.request.setOptions({
url : 'http://...',
onSuccess : onSuccess,
onFailure : onFailure
}).send();
there are going to be certain issues with this kind of approach.
if you only have the one instance handling all requests, then you need to make sure whilst a request is taking place, there is nothing else that can restart it with the new options as its asynchronous. additionally, events will stack up. every new instance that you run will addEvent onComplete/onSuccess/onFailure and they won't always be relevant. so you need to apply removeEvents() to the request instance before each run.
have a look here http://www.jsfiddle.net/dimitar/8a7LG/4/
i am not showing this as an example of how i'd write it but to see the problems that come with it. click the second link first then the first one (jsfiddle adds 2 seconds network lag) and you will see the alert from the second link's onComplete event stacked up on the first one as well. further more, for each click on link 2 you will see a new alert in addition to the old ones.
you must also consider how applicable it is to extend Request.JSON instead but it all depends on your needs.
p.s. if you go over to Request.JSONP this kind of structure may play some tricks, in particular with the callback functions being reset etc.
best of luck :)
edit here's the thing working with removeEvents so you don't get the stacking up: http://www.jsfiddle.net/dimitar/8a7LG/5/
I don't differ with the accepted answer's point, but it actually sidesteps the question IMHO.
Take a look at the following blog post (it's not mine); there, under the subtitle Multiple Links with Request.HTML you can find some guidance about how to reuse the Request instance.
http://ryanflorence.com/basic-ajax-and-json-requests-with-mootools/