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 Video，他们谈到了这个确切的困境。他们的解决方案是将列表放在包装器中，工具栏停靠在包装器中。所以我做到了，但我仍然无法按照应有的方式进行布局。

Answer 1

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

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

以下是为了实现这一目标需要改变的一些注意事项：

使用Ext.define定义新类时，您不需要将其设置为引用（在您的情况下为app.customerList），因为引用是使用传递的第一个字符串自动创建的。所以在你的情况下，你这样做：
```
app.customerList = Ext.define('CustomerList', { ... });
```
但是，你应该这样做：
```
Ext.define('app.customerList', { ... });
```
在您定义之后，您可以在任何您喜欢的地方重用该类，就像这样：
```
`var view = Ext.create('app.customerList');
```
我还想在此注意，使用app.customerList并不是Sencha建议您对命名约定所做的事情，因此我建议您在有Class System Guide时查看它们是时候阅读如何命名事物。
定义类时，99％的时间需要扩展另一个类。在您的情况下，您应该扩展Ext. Container，因为我们要创建包含列表和停靠工具栏的最外层组件（您定义为this.listWrapper）。

在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。

我们希望新容器类中的列表能够扩展到容器的大小，因此我们可以通过将layout fit配置添加到我们的配置块中来实现。类。
```
config: {
    layout: 'fit'
}
```
请记住，此配置块仅在使用Ext.define定义新类时使用。如果您正在使用Ext.create，或者将新组件作为对象传递（就像我们上面所做的那样），则无需将它们放在此特殊对象中。

最后，您不需要使用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());

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

Sencha Touch 2使用工具栏列出布局

1 个答案: