1

1 週間前に Sencha touch の作業を開始しましたが、まだビューを作成する方法がわかりません。textfield と listView を作成したいです。リストビューはテキストフィールドの下に表示されます。Ext.panelまたはExt.Listのみを拡張できるため、ListViewまたはtextfieldのいずれかを表示できます。

助けてください。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私の考えでは、包含要素 ( など) も使用しているときにビューを表示することは、panelSencha で最もトリッキーなことの 1 つです。実行できますが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 に答える