List generation Sencha Touch 2 from HTML

Question

I am working on a project where we create a Sencha Touch 2 version of a web site, and all the resources we got is the web site itself.

My problem is that I have a list of search results in HTML and want to dynamically add these to a list (e.g. map all elements to an element in the list)

Do you have any ideas on how to process this?

The HTML for one element in the list looks like this:

<li>
    <p><input type="checkbox" name="chk" value="FF032A" />
        <a href="/files/documentPage.html">Title</a>
    </p>
    <div class="long">
        <p>CATEGORY DESCRIPTION</p>
        <p>3/12/2012</p>
    </div>
</li>

Welcome to SO. Please add more details to your question. – Jakub Konecki Dec 05 '12 at 12:19 — Jakub Konecki, Dec 05 '12 at 12:19

score 2 · Accepted Answer · answered Dec 05 '12 at 22:25

Use Ext.DomQuery to systematically extract the relevant data (using element selectors) and then build it into JSON array. You can then use the raw data (in JSON format) to import into the store, which will feed the list.

For example I took your example code, and duplicated it three times (so you have three list items you want to extract). I then used Ext.DomQuery with the matching selectors, like this:

var listItems = Ext.DomQuery.select('li > div[class="long"]');

So now we have an array of three list elements, and next we need to build an object from the inner elements of each list element. We can do this by using the native map function on the new array. This takes each item in the array, and then returns the data object. The data object is built from the

elements using child number under the item element. Make sure to update your key names accordingly.

var finalArray = listItems.map(function(item){
    var itemEl = Ext.get(item);
    return {
        description: itemEl.child('p:nth-child(1)').getHtml(),
        date: itemEl.child('p:nth-child(2)').getHtml()
    };
});

This new array can then be turned into a JSON string simply enough, for example:

var finalString = JSON.stringify(finalArray);

You can just copy and paste that into your Sencha Touch code if you want static data, or do anything else that can be done with JSON data.

List generation Sencha Touch 2 from HTML

1 Answers1