Левая навигацияПросмотр в Sencha Touch Framework (вопрос о Ext.data.TreeStore) - PullRequest
1 голос
/ 05 марта 2011

Я хочу динамически настроить левое навигационное меню, как в стиле iPad.
Итак, я делаю некоторые модификации на демонстрационном примере. Вы также можете посетить этот официальный пример здесь .

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

Для упрощения реализации я пытаюсь получить данные JSON из "words.json". (В идеале тип JSONP лучше ... попробовал, но не повезло.)

Вот содержание "words.json":

{
    text: 'User Interface',
    cls: 'launchscreen',
    items: [{
        text: 'Buttons',
        card: demos.Buttons,
        source: 'src/demos/buttons.js',
        leaf: true
    },  
    {   
        text: 'Forms',
        card: demos.Forms,
        source: 'src/demos/forms.js',
        leaf: true
    },  
    {   
        text: 'List',
        card: demos.List,
        source: 'src/demos/list.js',
        leaf: true
    }]  
}

В итоге ничего не появляется. В чем дело? Я ошибаюсь? (API здесь )

Что я хочу сделать?

Как словарь, левая сторона - это те элементы навигации слова. При нажатии на него значение слова будет показано в правой части экрана.

Я не могу запустить пример NestedList в sencha framework . Я хочу сделать щелчок по ячейке таблицы и выдвинуть в нее другое представление (т.е. в Sencha: NestedList).

Попробовал и не повезло:

  1. используйте пример NestedList
  2. заменить прокси ScriptTagProxy (JSONP)
  3. использовать более простую реализацию прокси (показано в коде)

Я не уверен, достаточно ли ясно мое описание или нет, не стесняйтесь сказать мне, какая часть неясна. И заранее спасибо!

1 Ответ

0 голосов
/ 28 июня 2011

Если words.json выглядит так, как у вас выше, то это может быть вашей проблемой.

Вот как это должно выглядеть.

{
    "text": "User Interface",
    "cls": "launchscreen",
    "items": [{
        "text": "Buttons",
        "source": "src/demos/buttons.js",
        "leaf": true
    }, {
        "text": "Forms",
        "source": "src/demos/forms.js",
        "leaf": true
    }, {
        "text": "List",
        "source": "src/demos/list.js",
        "leaf": true
    }]
}

Я также приложил полностью рабочую копию того, что вы хотели, используя как прокси памяти (по умолчанию), так и прокси ajax.

Ext.regApplication({
    name: 'test',
    launch : function(){
        var nL = new Ext.NestedList({
            store: test.stores.testTreeStore,
            fullscreen: true,
            itemTextTpl : '{text}'
        });
    }
});
Ext.ns('test.data');

test.data.words = {
    text: 'User Interface',
    cls: 'launchscreen',
    items: [{
        text: 'Buttons',
        source: 'src/demos/buttons.js',
        leaf: true
    },  
    {   
        text: 'Forms',
        source: 'src/demos/forms.js',
        leaf: true
    },  
    {   
        text: 'List',
        source: 'src/demos/list.js',
        leaf: true
    }]  
};

test.models.testTreeModel = Ext.regModel('testTreeModel', {
    fields: ['text','source','card','leaf'],
    proxy: {
        type: 'memory',
        data: test.data.words,
        //type: 'ajax',
        //url: 'words.json',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
test.stores.testTreeStore = new Ext.data.TreeStore({
    model: 'testTreeModel'
});
...