Sencha Touch 2带有工具栏的列表布局

Question

我有一个列表，我使用的工具栏停靠在顶部。该列表还包含一个indexBar。工具栏似乎在推下列表。因此indexBar没有正确的垂直对齐，当我向下滚动列表并到达最后一个项目时，它不能正确显示。有谁知道如何正确布置这个工具栏不会推下列表？这里是我的代码：

app.customerList = Ext.define('CustomerList', { 
    constructor: function() {   
     this.listComponent = Ext.create('Ext.List', { 
      itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
      store: customerListStore, 
      id: 'customer_list', 
      grouped: true, 
      indexBar: true, 
      listeners: { 
       itemtap: { 
        fn: function (list, index, item, evt) { 

        }, 
        element: 'element' 
       } 
      } 
     }); 

     this.listWrapper = Ext.create('Ext.Panel', { 
      fullscreen: true, 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'toolbar', 
        docked: 'top', 
        title: 'Customers', 
        items: [ 
         { 
          xtype: 'button', 
          text: 'Home', 
          ui: 'back', 
          listeners: { 
           tap: { 
            fn: function() { 

            }, 
            element: 'element' 
           } 
          }        
         } 
        ] 
       }, 
       this.listComponent 
      ] 
     }); 

    } 
}); 

正如你看到的我是从商店得到我的数据。我可以通过列出底部的css规则来解决这个问题：38px，但我知道这是一个黑客，所以我宁愿不这样做。我已经观看了名单上的Sencha视频，他们谈论了这个确切的困境。他们的解决方案是将列表放入封装器中，工具栏停靠在封装器中。所以我这样做了，但我仍然无法按照它应该的方式进行布局。

Answer 1

这似乎是你的代码的问题，而不是框架的错误。

我打算假定您希望最终结果是一个可滚动列表，即屏幕的大小，并将工具栏停靠在顶部。

这里是你需要为了改变什么的一些注意事项要做到这一点：

1. 当定义使用Ext.define一个新的类，你不需要将其设置为参考（app.customerList你情况），因为引用是使用传递的第一个字符串自动创建的。所以你的情况，你这样做：

   app.customerList = Ext.define('CustomerList', { ... }); 
   

   但是，你应该这样做：

   Ext.define('app.customerList', { ... }); 
   

   您已经定义了它之后，你就可以重新使用类你喜欢的地方，就像这样的：

   `var view = Ext.create('app.customerList'); 
   

   我也想在这里请注意，使用app.customerList是不是煎茶建议你做的关于命名约定，所以我建议你看看他们的Class System Guide当你有时间阅读应该如何命名的时候。

2. 当您定义一个类时，99％的时间需要扩展另一个类。在你的情况下，你应该扩展Ext. Container，因为我们想创建最外面的组件（你定义为this.listWrapper），它包括列表和停靠的工具栏。

3. 在Sencha Touch中扩展课程时，不应重写constructor方法，而应使用initialize方法。在这种方法中，我们将添加停靠的工具栏和我们的列表。下面是它应该是什么样子：

   initialize: function() { 
       this.callParent(); 
   
       this.listComponent = Ext.create('Ext.List', { 
        itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
        store: customerListStore, 
        id: 'customer_list', 
        grouped: true, 
        indexBar: true, 
        listeners: { 
         itemtap: { 
          fn: function (list, index, item, evt) { 
   
          }, 
          element: 'element' 
         } 
        } 
       }); 
   
       this.add([ 
        { 
         xtype: 'toolbar', 
         docked: 'top', 
         title: 'Customers', 
         items: [ 
          { 
           xtype: 'button', 
           text: 'Home', 
           ui: 'back', 
           listeners: { 
            tap: { 
             fn: function() { 
   
             }, 
             element: 'element' 
            } 
           } 
          } 
         ] 
        }, 
        this.listComponent 
       ]); 
   } 
   

   有几件事情，从这个片段要记住：

   • 您总是需要调用父类中initialize，作为家长可能做一些我们需要的逻辑。您只需拨打this.callParent();即可完成此操作。
   • 首先我们定义我们的listComponent，我们将在后面插入这个app.customerList容器。
   • 接下来我们调用this.add和一组对象。这个方法会在初始化时将我们的项目插入到我们的新容器类中。我们传递的第一个对象是我们工具栏的配置 - 与您的代码相同。作为数组中的第二个对象，我们通过了listComponent。

4. 我们希望我们的新的容器类的内部列表，延伸到我们的容器的大小，所以我们可以做到这一点的加入fit的layout配置到我们班的配置块。

   config: { 
       layout: 'fit' 
   } 
   

   请记住，这个配置块仅用于使用Ext.define定义新的类时。如果您使用Ext.create或将新组件作为对象传递（如上所述），则不需要将它们放入此特殊对象中。

5. 最后，您不需要使用fullscreen配置。相反，我们可以创建一个新类的实例，并将其直接添加到Ext.Viewport中。

   var customerList = Ext.create('CustomerList'); 
   Ext.Viewport.add(customerList); 
   
   // add this point you can reference the listComponent without the customerList like this: 
   console.log(customerList.listComponent.getStore()); 
   

并为您的自定义类的最终代码：

Ext.define('CustomerList', { 
    extend: 'Ext.Container', 

    config: { 
     fullscreen: true, 
     layout: 'fit' 
    }, 

initialize: function() { 
    this.callParent(); 

    this.listComponent = Ext.create('Ext.List', { 
     itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
     store: customerListStore, 
     id: 'customer_list', 
     grouped: true, 
     indexBar: true, 
     listeners: { 
      itemtap: { 
       fn: function (list, index, item, evt) { 

       }, 
       element: 'element' 
      } 
     } 
    }); 

    this.add([ 
     { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Customers', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Home', 
        ui: 'back', 
        listeners: { 
         tap: { 
          fn: function() { 

          }, 
          element: 'element' 
         } 
        } 
       } 
      ] 
     }, 
     this.listComponent 
    ]); 
} 
}); 

var customerList = Ext.create('CustomerList'); 
Ext.Viewport.add(customerList); 

// add this point you can reference the listComponent without the customerList like this: 
console.log(customerList.listComponent.getStore()); 

很抱歉的完整重构，但我想我会告诉你写这样一个自定义类的正确方法这个。