煎茶觸摸列表搜索無法正常工作

Question

我想指出，隨着最新的煎茶觸摸走來列表搜索例如1.1.0開源distributin，和我收到此錯誤：

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

嘗試將itemTpl添加到列表中。如錯誤消息所示，這是列表組件工作所必需的。

我做了一些煎茶觸摸屏幕錄像，這應有助於：一個在list component，並在Xtemplates（part one和part two）兩個部分組成的系列。

Answer 2

將'tpl'項目從listConfig更改爲itemTpl，列表將至少呈現。但看看這個例子，我不確定它的功能。它將搜索字段作爲列表中的停靠項目，但我認爲您不能將項目停靠在列表中。它應該被包裹在一個面板中，面板中的停靠項目以及列表作爲面板項目。詹姆斯·皮爾斯給出瞭如何與煎茶教程做的佈局在PhoneGap的MVC的例子：

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

它說在那裏：

Unfortunately, it's not possible to dock a toolbar directly onto an Ext.List, hence the panel wrapper.

所以看起來也許該列表搜索例子剛剛過時（我也在看1.1.0版本）。

Answer 3

我修改了index.js使用mikerowehl建議正常工作。這裏如果有人需要它：

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, 
     }, 
      })); 
     } 
    } 
});