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']
    }
});

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

非常感谢任何帮助！谢谢！

杰克

----------- UPDATE -------------

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

搜索列表：

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

好问题。我假设您正在尝试构建List或数据视图。这里的关键是给你的商店一个'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'
            }
        }
    }
});

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

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'
        }
    }

},

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

1 个答案: