4

結果を表示するためにリストの上に検索フォームが必要な場所で行うかなり一般的なタスクがあります。問題は、リストに結果が表示されないことです。ストアとプロキシは正しく機能します。リストの高さは常に 0px です。

私はすでに検索しており、これを回避する一般的な方法はフィットレイアウトを使用することですが、親パネルでそれを使用すると、使用されている幅が 10px であるかのようにすべてが小さく見えます。

リストで残りのスペースを埋める必要があるため、固定の高さを設定できません。また、ボタンと入力フィールドのデフォルトサイズを使用したい場合に、フレックスオプションによって検索フォームが引き伸ばされることもありません。

ビューで使用している設定は次のとおりです

Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
    items:[
        {
            fullscreen:true,
            scroll:false,
            xtype:'panel',
            title:'Search',
            items:[
                {
                    xtype:'searchfield',
                    name:'search',
                    label:'Search',
                },
                {
                    xtype:'container',
                    layout:'hbox',
                    width:'100%',
                    margin:'3 0 0 0',
                    defaults:{
                        flex:1
                    },
                    items:[
                        {
                            xtype:'selectfield',
                            options:[
                                {text:'Option 1', value:'opt1'},
                                {text:'Option 2', value:'opt2'}
                            ]
                        },
                        {
                            xtype:'button',
                            text:'Search',
                            action:'search'
                        }
                    ]   
                },
                {
                    xtype:'list',
                    itemTpl:['{title}'],
                    onItemDisclosure:true,
                    plugins:[
                        { xclass: 'Ext.plugin.ListPaging' }
                    ]
                }

            ]
        },
    ],      
}
});

この画像は、私が達成しようとしていることを説明しています。リストコンテナに高さを手動で設定してこのスクリーンショットを撮りました。問題は、リストの高さがデフォルトでフォームの下のスペースを埋めていないことです。

ゴール

4

3 に答える 3

1

これは私がこれを解決するために行ったことです。レイアウトを変更してリストのみを表示し、検索オプションにツールバーを使用する必要があったため、これは回避策です。このようにして、ツールバーコントロールは最小の高さのみを使用します自分自身を正しく描く必要があります。

Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
    fullscreen:true,
    layout:'card'
    items:[
        {
            xtype:'toolbar',
            docked:'top',
            items:[
                {
                    xtype:'searchfield',
                    name:'search',
                    flex:6
                },
                {
                    xtype:'button',
                    action:'search',
                    iconCls:'search',
                    iconMask:true,
                    ui:'simple',
                    flex:1
                }
                    ]
        },
        {
            xtype:'toolbar',
            docked:'top',
            items:[
                {
                    xtype:'selectfield',
                    flex:1,
                    options:[
                        {text:'Option 1', value:'opt1'},
                        {text:'Option 2', value:'opt2'}
                    ]
                }
            ]
        },
        {
             xtype:'list',
             itemTpl:['{title}'],
             onItemDisclosure:true,
             plugins:[
                 { xclass: 'Ext.plugin.ListPaging' }
             ]

        },
        ],      
    }
});

ご覧のとおり、上部に 2 つのツールバーがドッキングされており、レイアウト全体にリストが表示されています。これが現在の様子のスクリーンショットです。

ここに画像の説明を入力

御時間ありがとうございます。

于 2013-01-29T17:48:20.803 に答える
0

パネルにはvboxレイアウトが必要であり、リストにはfitレイアウトと設定flexオプションが必要です。

以下の例のように、flex値がボタンに設定されていない場合は、デフォルトのサイズを取得する必要があります。

ドキュメントから：

フレックスとは、各子コンポーネントのフレックスに基づいて使用可能な領域を分割することを意味します。

次に例を示します。

Ext.define（'MyApp.view.Main'、{extend：'Ext.tab.Panel'、

config: {
  tabBarPosition: 'bottom',

  items: [
    {
      title: 'Welcome',
      iconCls: 'home',

      html: [
        "Some content"
      ].join("")
    },

    {
      title: "About",
      iconCls: 'star',
      layout: "vbox", // this card has vbox layout

      items: [{
        docked: 'top',
        xtype: 'titlebar',
        title: 'List'
      },

      {
        xtype: "list",
        layout: "fit", // take as much space as available
        flex: 1, // define flex
        data: [
          {name: 'Jamie Avins',  age: 100},
          {name: 'Rob Dougan',   age: 21},
          {name: 'Tommy Maintz', age: 24},
          {name: 'Jacky Nguyen', age: 24},
          {name: 'Ed Spencer',   age: 26}
        ],
        itemTpl: '{name} is {age} years old'
      },

      {
        xtype: 'button',
        text: "Button"
      }

      ]
    }
  ]
}

}）;

そしてスクリーンショット：

スクリーンショット

注：私はSencha Touchを学んでいるので、書かれたものが正しいかどうかわかりません。

于 2013-01-29T17:04:51.850 に答える
0

コンテナのレイアウトを「フィット」に設定しようとしましたか?、基本的に残りの利用可能な高さをすべて使用します。sencha touch のレイアウトに関する優れたガイドは次のとおりです: http://docs.sencha.com/touch/2-0/ #!/guide/ドキュメントから直接レイアウト!

于 2012-06-11T22:40:33.373 に答える