Sencha Touch可搜索列表-带有数据代理的新视图

Question

这里有两个简单的问题...如何使用此示例

http://try.sencha.com/touch/2.0.0/examples/list-search/

可搜索列表，但在新视图中打开？ 该示例将其定义为app.js中的主要应用程序，但是我想在“ FirstApp.view.searchlist”中使用它

我知道答案很简单，但我仍然很年轻，需要朝正确的方向发展。

此外，与其像从示例中那样从嵌入式存储中提取数据，不如对其进行修改以从我的外部/代理JSON存储中提取数据，其定义如下：

商店：

Ext.define('FirstApp.store.StudentStore',{
extend:'Ext.data.Store',

config:{

    autoLoad:true,
    model:'FirstApp.model.people',
    sorters: 'lastName',
    proxy:{
        type:'ajax',
        url:'http://xxxyyyzzz.com/data/dummy_data.json',
        reader:{
            type:'json',
            rootProperty:'results'
        }
    }
}
});

模型：

Ext.define('FirstApp.model.people', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['firstName', 'lastName' , 'image','status', 'phone','rank','attendance', 'discipline','recent']
    }
});

那么，如何通过数据存储和模型将该示例转换为应用程序内部的“视图”？

任何帮助是极大的赞赏！ 谢谢！

杰克

-----------更新-------------

好的，太好了。 通过将您的方法与我发现的另一个教程结合起来，我能够实现搜索功能（调用）。 现在再问一个问题...似乎很简单，但很难！ 选择/单击项目后，如何打开新的“详细信息”视图？

搜索清单：

Ext.define('FirstApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',

config: {
    store : 'Students',

    itemTpl:
        '<h1>{firstName:ellipsis(45} {lastName:ellipsis(45)}</h1>' ,
    itemCls:'place-entry',

    items: [
        {
            xtype: 'toolbar',
            docked: 'top',

            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search People...',
                    itemId: 'searchBox'
                }
            ]
        }
    ]
}
});

详细信息视图（当我从“搜索”列表/“主面板”视图中单击名称时要打开的视图）：

Ext.define('FirstApp.view.Details',{
    extend:'Ext.Panel',
    xtype:'details',
    config:{
    layout:'fit',
    tpl:'<div class="image_container"><img src="{image}"></div>' +
        '<h1>{firstName:ellipsis(25)} {lastName:ellipsis(25)}</h1>'+
        '<div class="status_container">{status:ellipsis(25)}</div> '+
        '<div class="glance_container">    <div class="value_box"><div class="value_number"> {rank:ellipsis(25)}</div> <p class="box_name">Rank</p> </div>    <div class="value_box"><div class="value_number"> {attendance:ellipsis(25)}</div> <p class="box_name" style="margin-left: -10px;">Attendance</p> </div>  <div class="value_box"><div class="value_number">{discipline:ellipsis(25)}</div> <p class="box_name" style="margin-left: -4px;">Discipline</p> </div>    <div class="value_box"><div class="value_number"> {recent:ellipsis(25)}</div> <p class="box_name">Recent</p> </div> </div> '+
        '<h2>Phone:</h2> <div class="phone_num"><p><a href="tel:{phone:ellipsis(25)}">{phone:ellipsis(25)}</a></p></div>'+
        '<h3>Some info:</h3><p>Round all corners by a specific amount, defaults to value of $default-border-radius. When two values are passed, the first is the horizontal radius and the second is the vertical radius.</p>',

    scrollable:true,
    styleHtmlContent:true,
    styleHtmlCls:'details'
}

})

搜索控制器：

Ext.define('FirstApp.controller.SearchController', {
    extend : 'Ext.app.Controller',

    config: {
        profile: Ext.os.deviceType.toLowerCase(),
        stores : ['StudentStore'],
        models : ['people'],
        refs: {
            myContainer: 'MainPanel',
            placesContainer:'placesContainer'
        },
        control: {
            'mainPanel': {
                activate: 'onActivate'
            },
            'mainPanel searchfield[itemId=searchBox]' : {
                clearicontap : 'onClearSearch',
                keyup: 'onSearchKeyUp'
            },
            'placesContainer places list':{
                itemtap:'onItemTap'
            }
        }

    },

    onActivate: function() {
        console.log('Main container is active');
    },

    onSearchKeyUp: function(searchField) {
        queryString = searchField.getValue();
        console.log(this,'Please search by: ' + queryString);

        var store = Ext.getStore('Students');
        store.clearFilter();

        if(queryString){
            var thisRegEx = new RegExp(queryString, "i");
            store.filterBy(function(record) {
                if (thisRegEx.test(record.get('firstName')) ||
                    thisRegEx.test(record.get('lastName'))) {
                    return true;
                };
                return false;
            });
        }

    },

    onClearSearch: function() {
        console.log('Clear icon is tapped');
        var store = Ext.getStore('Students');
        store.clearFilter();
    },



    init: function() {
        console.log('Controller initialized');
    },
    onItemTap:function(list,index,target,record){  // <-----NOT WORKING 
        this.getPlacesContainer().push({
            xtype:'details',
            store:'Students',
            title:record.data.name,
            data:record.data
        })

    }
});

Answer 1

好问题。 我假设您正在尝试构建列表或数据视图。 这里的关键是为您的商店提供一个“ storeId”。 我在下面修改了您的商店：

Ext.define('FirstApp.store.StudentStore',{
    extend:'Ext.data.Store',
    config:{
        storeId: 'Students', // Important for view binding and global ref
        autoLoad:true,
        model:'FirstApp.model.people',
        sorters: 'lastName',
        proxy:{
            type:'ajax',
            url:'http://xxxyyyzzz.com/data/dummy_data.json',
            reader:{
                type:'json',
                rootProperty:'results'
            }
        }
    }
});

然后在视图内部，引用要绑定的商店。 这是我的一个应用程序中的示例列表视图。 请注意，配置对象具有引用我们上面的商店的“商店”：

Ext.define('app.view.careplan.CarePlanTasks', {
    extend: 'Ext.dataview.List',
    xtype: 'careplanTasks',
    requires: [
        'app.view.template.CarePlan'
    ],
    config: {
        store: 'Students', // Important!  Binds this view to your store
        emptyText: 'No tasks to display',
        itemTpl: Ext.create('app.view.template.CarePlan'),
    },

    constructor : function(config) {
        console.log('CarePlan List');
        this.callParent([config]);
    }
});

有了storeId后，您可以通过执行以下操作在应用程序中的任何位置访问此商店：

Ext.getStore('Students')

您还可以通过调用load方法从服务器中加载记录：

Ext.getStore('Students').load();

您可以在应用程序中的任何位置执行此操作，但是通常最好在控制器中执行此操作。

希望这可以帮助。

=======更新到您的更新======

因此，查看您的代码，我认为您需要修改List视图和控制器。 给'FirstApp.view.MainPanel'一个xtype：'MainPanel'。 接下来，如下修改您的控制器配置：

config: {
    profile: Ext.os.deviceType.toLowerCase(),
    stores : ['StudentStore'],
    models : ['people'],
    refs: {
        mainPanel: 'MainPanel',    // set the object KEY to the name you want to use in the control object and set the VALUE to the xtype of the view
        placesContainer:'placesContainer'
    },
    control: {
        'mainPanel': {   //  this matches the key above, which points to your view's xtype
            activate: 'onActivate',
            itemtap: 'onItemTap'  //  listen for the item tap event on this List
        },
        'mainPanel searchfield[itemId=searchBox]' : {
            clearicontap : 'onClearSearch',
            keyup: 'onSearchKeyUp'
        },
        'placesContainer places list':{
            itemtap:'onItemTap'
        }
    }

},