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

我有一个列表，上面有一个工具栏。此列表还包含一个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
            ]
        });

    }
});

app.customerList=Ext.define（'customerList'{
构造函数：函数（）{
this.listComponent=Ext.create（'Ext.List'{
itemTpl:“{first_name}{last_name}”，
商店：customerListStore，
id:'客户列表'，
对,，
indexBar：是的，
听众：{
项目点击：{
fn：功能（列表、索引、项目、evt）{
},
元素：“元素”
}
}
});
this.listWrapper=Ext.create（'Ext.Panel'{
全屏：对，
布局：“适合”，
项目：[
{
xtype:'工具栏'，
停靠：“顶部”，
标题：“客户”，
项目：[
{
xtype:'按钮'，
文本：“主页”，
ui:'返回'，
听众：{
点击：{
fn：函数（）{
},
元素：“元素”
}
}                            
}
]
},
这个.listComponent
]
});
}
});

---

正如你所看到的，我正在从一家商店获取数据。我在iPhone上通过给列表一个css规则bottom:38px来解决这个问题，但我知道这是一个黑客行为，所以我不想这样做。我看了列表上的Sencha视频，他们谈到了这个确切的困境。他们的解决方案是将列表放入包装器中，工具栏停靠在包装器中。所以我这样做了，但我仍然无法让它按应有的方式进行布局。

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

我假设您希望最终结果是一个可滚动的列表，屏幕大小，顶部有一个工具栏

以下是您需要更改哪些内容才能实现此目的的一些注意事项：

使用

Ext.define

定义新类时，不需要将其设置为引用（在您的情况下为

app.customerList

），因为引用是使用传递的第一个字符串自动创建的。因此，在您的情况下，您正在这样做：

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

但是，您应该这样做：

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

定义该类后，可以在任何地方重用该类，如下所示：

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

我还想在此指出，Sencha建议您不要使用

app.customerList

来命名约定，因此我建议您在有时间阅读如何命名事物时查看它们

定义一个类时，99%的时间需要扩展另一个类。在您的情况下，您应该扩展

Ext.Container

，因为我们希望创建最外层的组件（您将其定义为

this.listWrapper

），其中包括列表和停靠的工具栏

在Sencha Touch中扩展类时，不应重写

构造函数

方法，而应使用

初始化

方法。在这个方法中，我们将添加停靠工具栏和列表。下面是它的外观：

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

请记住，此配置块仅在使用

Ext.define

定义新类时使用。如果您正在使用

Ext.create

，或将新组件作为对象传递（就像我们上面所做的那样），则无需将它们放入此特殊对象中

最后，您不需要使用

全屏

配置。相反，我们可以创建一个新类的实例，并将其直接添加到

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());

Ext.define（'CustomerList'{
扩展：“Ext.Container”，
配置：{
全屏：对，
布局：“适合”
},
初始化：函数（）{
这是callParent（）；
this.listComponent=Ext.create（'Ext.List'{
itemTpl:“{first_name}{last_name}”，
商店：customerListStore，
id:'客户列表'，
对,，
indexBar：是的，
听众：{
项目点击：{
fn：功能（列表、索引、项目、evt）{
},
元素：“元素”
}
}
});
这个。添加([
{
xtype:'工具栏'，
停靠：“顶部”，
标题：“客户”，
项目：[
{
xtype:'按钮'，
文本：“主页”，
ui:'返回'，
听众：{
点击：{
fn：函数（）{
},
元素：“元素”
}
}
}
]
},
这个.listComponent
]);
}
});
var customerList=Ext.create（'customerList'）；
Ext.Viewport.add（customerList）；
//添加此点您可以在不使用customerList的情况下引用listComponent，如下所示：
log（customerList.listComponent.getStore（））；

---

很抱歉进行了完整的重构，但我想我应该向您展示编写这样的自定义类的正确方法。

这似乎是您的代码的问题，而不是b

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());