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

Posted 2023-02-26

【中文标题】Sencha Touch：尝试将列表添加到面板

【英文标题】：Sencha Touch : Trying to add a list to a panel

【发布时间】：2013-03-06 10:17:05

【问题描述】：

我有一个由文本框、按钮和 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"
    ]

);

【参考方案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',
]

);

【参考方案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>

【讨论】：

感谢您的快速帮助。还有一件事我希望水平视图中的文本框和按钮和列表视图占据它们下方的整个屏幕。提前致谢。