Question

我一周前开始研究Sencha touch，但我仍然无法弄清楚如何创建视图。我想创建textfield和listView。 Listview shold显示在文本字段下方。我可以显示ListView或textfield，因为我只能扩展Ext.panel或Ext.List。

请帮忙。请分享一些链接，这些链接提供有关在Sencha touch中创建视图的详细信息。

Ext.define('TrainEnquiry.view.SearchTrains', {
extend: 'Ext.Panel',
alias: "widget.searchtrains",
requires: [ 'Ext.dataview.List','Ext.form.FieldSet','TrainEnquiry.store.Homes'],
config: {
    title: 'Train Enquiry',
    items: [
         {
                xtype: 'fieldset',
                style:'width:70%; margin:10px',
                padding: '10px',
                items: [
                    {
                        xtype: 'textfield',
                        placeHolder: 'Username',
                        itemId: 'userNameTextField',
                        name: 'userNameTextField',
                        required: true
                    }
                ]
            },{ 
                        xtype: 'homepagelist',
                        style: 'margin-Top:100px',
                        config: {
                            itemTpl: '<div class="myContent">'+ 
                                    '<div><b>{status}</b> </div>' +
                                    '</div>',
                            store: 'Homes',

                            onItemDisclosure: true
                        }
                }
            ]
        }





});

Answer 1

在您使用包含元素（如list）时显示panel个视图是我认为Sencha中最棘手的事情之一。可以这样做，但您必须在面板上设置layout: 'fit'属性。您还需要将您的字段集停靠在顶部（假设您希望它位于顶部，并可能将该简单的title属性转换为面板内的titlebar视图。这是指向{的链接{3}}演示如何执行此操作的示例，以及下面的一些代码：

Ext.Viewport.add({
  xtype: 'panel',
  layout: 'fit',
  items: [
    {
      xtype: 'titlebar',
      title: 'Train Enquiry',
      docked: 'top'
    },
    {
      xtype: 'fieldset',
      docked: 'top',
      items: [
        {
          xtype: 'textfield',
          placeHolder: 'Username',
          itemId: 'userNameTextField',
          name: 'userNameTextField',
          required: true
        }
      ]
    },
    { 
      xtype: 'list',
      itemTpl: '<div class="myContent">'+ 
               '<div><b>{name}</b> </div>' +
               '</div>',
      data: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
        { name: 'Item 4' }
      ]
    }
  ]
});

（顺便说一下，下次继续搜索，这是最有可能对你有帮助的问题/答案：SenchaFiddle）

Answer 2

避免使用内联样式。
如果您希望字段集始终贴在主面板的顶部并滚动列表，请在主面板配置中使用layout:'fit'并在字段集配置中添加docked: 'top'。

如果您想要同时滚动它们，请删除主面板布局（需要layout:'auto'），将scrollable:true置于主面板配置中并在列表配置中添加scrollable:false 。像这样：

config: {
  title: 'Train Enquiry',
  scrollable : true,
  items: [{
       xtype: 'fieldset',
       items: [{
          xtype: 'textfield',
          placeHolder: 'Username',
          itemId: 'userNameTextField',
          name: 'userNameTextField',
          required: true
       }]
     },{ 
          xtype: 'homepagelist',
          scrollable: false,   // no scrolling for the list
          config: {
             itemTpl: '<div class="myContent">'+ 
                      '<div><b>{status}</b> </div>' +
                      '</div>',
             store: 'Homes',
             onItemDisclosure: true
          }
       }]
   }

在此处获取代码：http://www.senchafiddle.com/#x8rZo#fRzwt

在Sencha Touch中创建视图

2 个答案: