1

一周前我开始研究 Sencha touch，但我仍然不知道如何创建视图。我想创建文本字段和列表视图。列表视图应显示在文本字段下方。我可以显示 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
                        }
                }
            ]
        }





});
4

2 回答 2

3

list在我看来，当您还使用包含元素（如 a ）时显示视图panel是 Sencha 中最棘手的事情之一。可以，但是你必须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 see the list in a panel）

于 2013-02-27T20:04:17.710 回答
0

  1. 避免使用内联样式。

  2. 如果您希望字段集始终位于主面板顶部并滚动列表，请layout:'fit'在主面板配置中使用并docked: 'top'在字段集配置中添加。

  3. 如果您希望它们都滚动，请删除主面板布局（将采用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-28T08:26:10.067 回答