加载后在Sencha Touch中更新列表项

Question

I am using using Sencha Touch to make a web-mobile-app. I'm not extremely familiar with the way EXTJS works. I set up my list like this:

sink.Structure = [{
        text: 'Name'
    },
    {
        text: '&nbsp;&nbsp;&nbsp;<?php echo $name; ?>'
    },
    {
        text: 'Friend'
    },
    {
        text: '&nbsp;&nbsp;&nbsp;<?php echo $friend; ?>'
    },
    {
        text: 'Shop'
    },
    {
        text: '&nbsp;&nbsp;&nbsp;<?php echo $shop; ?>'
    }];

            Ext.regModel('Demo', {
            fields: [
                {name: 'text',        type: 'string'},
                {name: 'source',      type: 'string'},
                {name: 'preventHide', type: 'boolean'},
                {name: 'animation'},
                {name: 'card'}
            ]
        });

        sink.StructureStore = new Ext.data.TreeStore({
            model: 'Demo',
            root: {
                items: sink.Structure
            },
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            }
        });

So this renders the list perfectly, exactly what I want it to but how do I change the value of the row that echos $name;

On initial load I have the value in a PHP variable but if the user changes it I want it to change the value of this. Do I need to rewrite the whole structure?

In Jquery I could just give the element an ID an then alter it's .html contents. But I've noticed that the way this is structured my list item doesn't have any identifying selector which I could use to reference it. Any advice would help, thank you!

UPDATE: So I made some progress with this, instead of echoing the PHP Variable inside the List Structure, I print a Javascript variable called name which is set initially as the PHP variable. I also, put the sink.Structure setup in a function which takes in the values and then is supposed to reset them, but it doesn't. I've tried making the function include the sink.StructureStore as it seems this is whats rendering the list (maybe? this is a guess) and also just the sink.Structure array list, but nothing seems to affect the list thats already been set, please help!

Answer 1

Lists are data bound. Update the data in the underlying data store and any lists which are bound to the data store will automatically update their user interface.

Answer 2

1. You have to update your Data.Store with new values.
2. YourList.bindStore(YourStore);
3. The second line of code automatically populate the list.

Answer 3

I have to say I'm disappointed with the way Sencha Touch works in this regard, it appears the list is rendered at first load and cannot be re-rendered because it dynamically creates all the div's with a class of "x-list-item." I've tried numerous methods to try to get rid of the list and recreate a new one but to no avail.

The ONLY way I managed to get this to work was by putting in a div tag inside a list element with an id and then using JQuery to select the element and alter it's html. This is the first app I've made with Sencha Touch and I hope its the last.

The only reason why we went with this is because of its compatibility with Android, but loading the app on the Android Emulator (2.2) none of the page-flick animations worked anyway! Also, tested on Nexus One, it did load faster but slide transitions were absent. Even though there are a few more capabilities of Sencha, JQTouch is certainly my preference when it comes to web-mobile-apps. Sorry just had to get that off my chest :)