在Sencha Touch中创建视图

我已经开始在一周前的Sencha触摸上工作了，但我仍然无法想象如何创建视图。我想创建textfield和listView。列表视图将显示在文本框下方。我能够显示ListView或textfield，因为我只能扩展Ext.panel或Ext.List。在Sencha Touch中创建视图

请帮忙。请分享一些链接给那些在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 
         } 
       } 
      ] 
     } 





});

来源

2013-02-27 user1288005

我不想将它添加到应用程序。我想将它添加到TrainEnquiry.view.SearchTrains。如何将此视口添加到我的视图类。提前致谢。 – user1288005 2013-02-28 11:18:35

我的例子的要点是，您需要'布局：'fit''在'SearchTrains'视图的配置中，这是'panel'类型。此外，为避免重叠，您可能希望将字段集停靠在顶部，并使用“停靠：顶部”。 – jakerella 2013-02-28 15:30:46

显示list意见时您还使用含有元素（如panel）是在煎茶中最棘手的事情之一，在我看来。它可以完成，但您必须在面板上设置layout: 'fit'属性。您还需要将您的字段集停靠在顶部（假设您希望将其置于顶部，并且可能会将该简单的title属性转换为面板中的titlebar视图。以下是指向SenchaFiddle的链接，演示如何执行此操作的示例，并为你下面的一些代码：

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

（顺便说下一次继续搜索，这是问题/答案，最有可能会最帮你：sencha don't seeing the list in a panel）使用

来源

2013-02-27 20:04:17 jakerella

避免内联造型
如果希望字段集始终粘贴在主面板的顶部并滚动列表，请在主面板配置中使用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

来源

2013-02-28 08:26:10 Swar

在Sencha Touch中创建视图

回答

相关问题