Question

我正在尝试与最新的Sencha Touch 1.1.0开源分发版一起提供的列表搜索示例，我收到此错误：

Ext.List: itemTpl is a required configuration.
[Break On This Error] throw new Error("Ext.List: itemTpl is a required configuration.");
sencha...ebug.js (line 23220)
WebKitPoint is not defined
[Break On This Error] var point = window.webkitConve...age(this.dom, new WebKitPoint(0, 0)); 
sencha...ebug.js (line 11612)

有人可以帮忙吗？

Answer 1

将“tpl”项从listConfig更改为itemTpl，列表至少会呈现。看一下这个例子，我不确定它的功能。它将搜索字段作为列表中的停靠项，但我认为您不能将项目停靠在列表中。它应该在面板中包装，面板中的停靠项目和列表作为面板项目。 James Pearce展示了如何使用Sencha教程在PhoneGap MVC中进行布局的示例：

http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap

它在那里说：

不幸的是，无法将工具栏直接停靠在Ext.List上，因此也就是面板包装器。

所以看起来可能列表搜索示例刚刚过时（我也在看1.1.0版本）。

Answer 2

我使用mikerowehl建议修改了index.js以正常运行。在这里，如果有人需要它：

    Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });


    myStore = new Ext.data.JsonStore({
            model  : 'Contact',
            sorters: 'lastName',
            getGroupString : function(record) {
                return record.get('lastName')[0];
            },

            data: [
                {firstName: 'Tommy',   lastName: 'Maintz'},
                {firstName: 'Rob',     lastName: 'Dougan'},
                {firstName: 'Ed',      lastName: 'Spencer'},
                {firstName: 'Jamie',   lastName: 'Avins'},
                {firstName: 'Aaron',   lastName: 'Conran'},
                {firstName: 'Dave',    lastName: 'Kaneda'},
                {firstName: 'Michael', lastName: 'Mullany'},
                {firstName: 'Abraham', lastName: 'Elias'},
                {firstName: 'Jay',     lastName: 'Robinson'},
                {firstName: 'Tommy',   lastName: 'Maintz'},
                {firstName: 'Rob',     lastName: 'Dougan'},
                {firstName: 'Ed',      lastName: 'Spencer'},
                {firstName: 'Jamie',   lastName: 'Avins'},
                {firstName: 'Aaron',   lastName: 'Conran'},
                {firstName: 'Dave',    lastName: 'Kaneda'},
                {firstName: 'Michael', lastName: 'Mullany'},
                {firstName: 'Abraham', lastName: 'Elias'},
                {firstName: 'Jay',     lastName: 'Robinson'}
            ]
    });

    Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen : 'phone_startup.png',    
    icon       : 'icon.png',
    glossOnIcon: false,

    onReady: function() {
         var listConfig = {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock : 'top',

                    items: [
                        {xtype: 'spacer'},
                        {
                            xtype      : 'textfield',
                            placeHolder: 'Search...',
                            listeners  : {
                                scope: this,

                                keyup: function(field) {
                                    var value = field.getValue();

                                    if (!value) {
                                        myStore.filterBy(function() {
                                            return true;
                                        });
                                    } else {
                                        var searches = value.split(' '),
                                            regexps  = [],
                                            i;

                                        for (i = 0; i < searches.length; i++) {
                                            if (!searches[i]) return;
                                            regexps.push(new RegExp(searches[i], 'i'));
                                        };

                                        myStore.filterBy(function(record) {
                                            var matched = [];

                                            for (i = 0; i < regexps.length; i++) {
                                                var search = regexps[i];

                                                if (record.get('firstName').match(search) || record.get('lastName').match(search)) matched.push(true);
                                                else matched.push(false);
                                            };

                                            if (regexps.length > 1 && matched.indexOf(false) != -1) {
                                                return false;
                                            } else {
                                                return matched[0];
                                            }
                                        });
                                    }
                                }
                            }
                        },
                        {xtype: 'spacer'},                        
                    ]
                }
            ]
        };

        if (!Ext.is.Phone) {
            new Ext.Panel(Ext.apply(listConfig, {
                floating     : true,
                width        : 380,
                height       : 420,
                centered     : true,
                modal        : true,
                hideOnMaskTap: false,
                items:
        {
            xtype:'list',
            itemTpl : '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>',

            itemSelector: 'div.contact',
            singleSelect: true,
            grouped     : true,

            store: myStore,
        },
            })).show();
        } else {
            new Ext.Panel(Ext.apply(listConfig, {                       
                fullscreen: true,
                items:
        {
            xtype:'list',
            itemTpl : '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>',
            itemSelector: 'div.contact',
            singleSelect: true,
            grouped     : true,
            store: myStore,
        },
            }));
        }
    }
});

Answer 3

尝试在列表中添加itemTpl。如错误消息所示，这是列表组件工作所必需的。

我制作了一些应该有帮助的Sencha Touch截屏视频：list component上的一个，以及Xtemplates（part one和part two上的两部分系列。

Sencha Touch列表搜索不起作用

3 个答案: