在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中創建視圖

回答

相關問題