Sencha Touch：尝试将列表添加到面板

Question

我有一个由文本框、按钮和 ListView 组成的面板。我相信我已经正确设置了这个列表，但列表除外。 Listview 不显示来自商店的数据。请帮助我尝试添加如下：

Ext.define('Abc.view.Trains', {
extend: 'Ext.Panel',
xtype:'searchtrains',
requires: [ 'Ext.dataview.List','Ext.Label','Ext.form.FieldSet'
'Abc.view.SearchTrainResults','Abc.view.SampleList'],
config: {
    title: 'Train Enquiry',
    items: [


        {
            xtype: 'fieldset',
            style:'width:74%;  float:left',
            margin:'10px',
            items: 
                {
                    xtype: 'textfield',
                    placeHolder: 'Username',
                    itemId: 'trainNoTextField',
                    name: 'trainNoTextField',
                    required: true
            }

        },
        {
            xtype: 'button',
            itemId: 'trainSearchButton',
            ui: 'action',
            padding: '10px',
            text: 'Go',
            style:'width:20%; margin-top:10px; float:right'
        },
        {
            xtype: 'sampList',
        }
     ]
    ]};

Abc/view/SampleList

  Ext.define('Abc.view.SampleList', {
extend: 'Ext.List',
xtype: 'sampList',
requires: ['TrainEnquiry.store.SampleList'],

config: {
    title: 'Train Enquiry',
        itemTpl: '<div class="myContent">'+ 
                '<div><b>{status}</b> </div>' +
                '</div>',
        store: 'SampleList',
},
});

Abc/store/SampleList

  Ext.define('Abc.store.SampleList', {
extend: 'Ext.data.Store',

config: {
    fields: ['status'],
    data: [
        { status: "Live! Train Statusjhgkbvdsbvfbnsdfvsdgfjasdgjhagsdhjasgdahjsgdjhasdbahjsgdsajhdgahjsgdashdgajhsdgajhsdvahjsdg" },
        { status: "Live! Station Statustusjhgkbvdsbvfbnsdfvsdgfjasdgjhagsdhjasgdahjsgdjhasdbahjsgdsajhdgahjsgdashdgajhsdgajhsdvahjsdg" },
        { status: "Train Time Tabletusjhgkbvdsbvfbnsdfvsdgfjasdgjhagsdhjasgdahjsgdjhasdbahjsgdsajhdgahjsgdashdgajhsdgajhsdvahjsdg"}
    ]
}
});

Answer 1

这样的？

Ext.define('Abc.view.Trains', {
extend: 'Ext.Panel',
xtype:'searchtrains',
requires: ['Ext.dataview.List','Ext.Label','Ext.form.FieldSet','Abc.view.SampleList'],
config: {
title: 'Train Enquiry',
layout:'vbox',
items: [
{
    flex:1,
    xtype:'panel',
    layout:'hbox',
    items:[{
        flex:2,
        xtype: 'fieldset',
        style:'width:74%;  float:left',
        margin:'10px',
        items: 
        {
            xtype: 'textfield',
            placeHolder: 'Username',
            itemId: 'trainNoTextField',
            name: 'trainNoTextField',
            required: true
        }
    },{
        flex:1,
        xtype: 'button',
        itemId: 'trainSearchButton',
        ui: 'action',
        padding: '10px',
        text: 'Go',
        style:'width:20%; margin-top:10px; float:right'
    }]
},{
    flex:10,
    xtype: 'sampList',
}]
}
});

Answer 2

如果您刚刚复制了代码，那么可能是因为您忘记在“Ext.form.FieldSet”之后添加逗号

requires: [ 'Ext.dataview.List','Ext.Label','Ext.form.FieldSet'
'Abc.view.SearchTrainResults','Abc.view.SampleList'],

我厌倦了以下内容，它对我有用：

查看\Trains.js

Ext.define('Abc.view.Trains', {
extend: 'Ext.Panel',
xtype:'searchtrains',
requires: ['Ext.dataview.List','Ext.Label','Ext.form.FieldSet','Abc.view.SampleList'],
config: {
title: 'Train Enquiry',
layout:'vbox',
items: [
{
    flex:1,
        xtype: 'fieldset',
        style:'width:74%;  float:left',
        margin:'10px',
        items: 
            {
                xtype: 'textfield',
                placeHolder: 'Username',
                itemId: 'trainNoTextField',
                name: 'trainNoTextField',
                required: true
        }

    },
    {
    flex:1,
        xtype: 'button',
        itemId: 'trainSearchButton',
        ui: 'action',
        padding: '10px',
        text: 'Go',
        style:'width:20%; margin-top:10px; float:right'
    },
    {
    flex:1,
        xtype: 'sampList',
    }
]}
});

查看\SampleList.js

Ext.define('Abc.view.SampleList', {
extend: 'Ext.List',
xtype: 'sampList',
requires: ['Abc.store.SampleList'],

config: {
    title: 'Train Enquiry',
    itemTpl: '<div class="myContent">'+ 
            '<div><b>{status}</b> </div>' +
            '</div>',
    store: 'SampleList',
},
});

存储\SampleList.js

Ext.define('Abc.store.SampleList', {
extend: 'Ext.data.Store',

config: {
fields: ['status'],
data: [
    { status: "Live! Train Statusjhgkbvdsbvfbnsdfvsdgfjasdgjhagsdhjasgdahjsgdjhasdbahjsgdsajhdgahjsgdashdgajhsdgajhsdvahjsdg" },
    { status: "Live! Station Statustusjhgkbvdsbvfbnsdfvsdgfjasdgjhagsdhjasgdahjsgdjhasdbahjsgdsajhdgahjsgdashdgajhsdgajhsdvahjsdg" },
    { status: "Train Time Tabletusjhgkbvdsbvfbnsdfvsdgfjasdgjhagsdhjasgdahjsgdjhasdbahjsgdsajhdgahjsgdashdgajhsdgajhsdvahjsdg"}
]}
});

index.html

<html>
<head>
    <link href="sencha-touch.css" rel="stylesheet" type="text/css">
    <script type="text/javascript"  src="sencha-touch-all-debug.js"></script>
    <link rel="stylesheet" href="resources/css/app.css" type="text/css">
</head>

<body>
    <script type="text/javascript">

Ext.application(
{
    name: 'Abc',
    views: ['Trains','SampleList'],
    stores:['SampleList'],

    launch: function() 
    {
        Ext.Viewport.add(Ext.create('Abc.view.Trains'));    
    }
});

    </script>
</body>
</html>