2011-05-26 115 views
2

下面的代码似乎不完整或者我做错了什么? 问题是该列表不向右滚动。sencha touch :: list不滚动右边

Ext.ns('simfla.ux.plugins.demo'); 

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

simfla.ux.plugins.demo.store = new Ext.data.Store({ 
    model: 'Contact', 
    sorters: 'firstName', 

    data: [ 
     {firstName: 'Tommy', lastName: 'Maintz'}, 
     {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: 'Tommy', lastName: 'Maintz'}, 
     {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: 'Tommy', lastName: 'Maintz'}, 
     {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: 'Tommy', lastName: 'Maintz'}, 
     {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 app = new Ext.Panel({ 
      fullscreen: true, 
      layout: 'fit', 
      dockedItems:[{ 
       xtype: 'toolbar', 
       title: 'EditableList Plugin', 

      }], 
      items: [ 
      { 
       xtype: 'panel', 
       title:'topPanel', 
       items:{ 
        xtype:'button', 
        cls: 'editChildBtn', 
        text: 'Einstellungen', 
        width: 150, 
        handler: function(){} 
       } 
      }, 
      { 
       xtype: 'list', 
       style: 'background-color: Transparent;', 
       id: 'MyList', 
       allowDeselect: true, 
       clearSelectionOnDeactivate: true, 
       //layout: 'fit', 
       store: simfla.ux.plugins.demo.store, 
       itemTpl: '{firstName} <strong>{lastName}</strong>', 
       grouped: false, 
       indexBar: false, 
       singleSelect: true, 
       }] 
      }); 

    } 
}); 

thanx for a look!

编辑:不向右滚动意味着它是让失去抓地力时翻转回到初始位置......

+0

你可以更具体一点,你是什么意思不向右滚动? – stan229 2011-05-27 15:37:35

+0

舒尔。该列表的行为就像它不是一个列表,而是一个正常的面板,当你松开手指/鼠标时,它会向后滑动。 – headkit 2011-05-30 09:56:18

+0

仍然不明确? – headkit 2011-05-31 20:46:17

回答

4

我认为这个问题是父容器将无法找出因为有两个孩子,所以名单应该具有高度,所以“适合”并不是真的有意义。如果您将父级的布局从适合状态更改为vbox,请将“topPanel”更改为固定高度,并且列表中的两个孩子的弹性应填满屏幕。

var app = new Ext.Panel({ 
     fullscreen: true, 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     dockedItems:[{ 
      xtype: 'toolbar', 
      title: 'EditableList Plugin', 

     }], 
     items: [ 
     { 
      xtype: 'panel', 
      title:'topPanel', 
      height: 50, 
      items:{ 
       xtype:'button', 
       cls: 'editChildBtn', 
       text: 'Einstellungen', 
       width: 150, 
       handler: function(){} 
      } 
     }, 
     { 
      xtype: 'list', 
      flex: 1, 
      style: 'background-color: Transparent;', 
      id: 'MyList', 
      allowDeselect: true, 
      clearSelectionOnDeactivate: true, 
      //layout: 'fit', 
      store: simfla.ux.plugins.demo.store, 
      itemTpl: '{firstName} <strong>{lastName}</strong>', 
      grouped: false, 
      indexBar: false, 
      singleSelect: true, 
      }] 
     }); 
+0

thnx - 我会很快尝试这个! – headkit 2011-06-29 09:07:09

+0

工作!大。日Thnx! – headkit 2011-07-08 11:13:29

1

'padding-bottom'风格的面板围绕两个面板。

在我的情况下'100px'是最好的。

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady : function() { 
     var app = new Ext.Panel({ 
      fullscreen: true, 
      layout: 'fit', 
      style: 'padding-bottom:100px;', 
      dockedItems:[{ 
       xtype: 'toolbar', 
       title: 'EditableList Plugin', 

      }], 
      items: [ 
      { 
       xtype: 'panel', 
       title:'topPanel', 
       items:{ 
        xtype:'button', 
        cls: 'editChildBtn', 
        text: 'Einstellungen', 
        width: 150, 
        handler: function(){} 
       } 
      }, 
      { 
       xtype: 'list', 
       style: 'background-color: Transparent;', 
       id: 'MyList', 
       allowDeselect: true, 
       clearSelectionOnDeactivate: true, 
       //layout: 'fit', 
       store: simfla.ux.plugins.demo.store, 
       itemTpl: '{firstName} <strong>{lastName}</strong>', 
       grouped: false, 
       indexBar: false, 
       singleSelect: true, 
       }] 
      }); 

    } 
});