0

私は、特定のカテゴリにサブスクライブすることをユーザーに提供するというこの要件を持っています。設計されるレイアウトは-

  1. チェックボックス=>上部の自動サブスクリプション設定を切り替えます。
  2. dataview =>中央に、サブスクリプションのリストとチェックボックスフィールドがあります。
  3. ボタン=>ユーザーがサブスクリプションリストを更新できるようにします。

データビューを正しく設定しました。Dataviewは休閑地として追加されます-

 xtype: 'dataview',
 itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
           '<span style="float:left">{name}</span>' +
           '<span style="float:right">' +
               '<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
           '</span>'+
         '</div>',
 fields:['name'],
 data:[
    {
      name :'A'
    },
    {
      name :'B'
    },
    {
      name :'C'
    }

コンポーネント番号1および3（上記の質問で指定）を追加しようとすると、データビューが表示されません。チェックボックスとボタンのみが表示されます。レンダリングされたhtmlを調べると、dataviewにdataconfigが入力されていないことがわかります。これらの3つのコンポーネントを追加するために使用したコードは休閑中です-

Ext.define("PApp.view.home.Subscription", {
    extend:'Ext.Container',
    xtype:'subscription',
    config: {
        layout:'fit',
        fullscreen:true,
        scrollable:false,
        items: [
            {
                xtype:'container',
                fullscreen:true,
                items:[
                    {
                        xtype:'checkboxfield',
                        name : 'subscriber-setting',
                        label: 'Subscriber',
                        value: 'yes',
                        checked: true
                    },
                   {
                        xtype: 'dataview',
                        itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
                                    '<span style="float:left">{name}</span>' +
                                    '<span style="float:right">' +
                                          '<input type="checkbox" class="x-input-el x-input-checkbox"         style="display: inline;top:10px">'+
                                   '</span>'+
                               '</div>',
                        fields:['name'],
                        data:[
                           {
                              name :'A'
                           },
                           {
                              name :'B'
                           },
                           {
                              name :'C'
                           }
                   },
                   {
                              xtype:'button',
                              text:'Update',
                              ui:'action'
                   }
       }
   ]    
   }
});

dataviewが表示されない（データが入力されていない）理由がわかりません。チェックボックスとボタンの間にデータビューが配置されていない場合、期待どおりにレンダリングされます。 データビュープレビュー そして、dataviewがパンされたとき、それはこのように見えます-チェックボックスフィールドとボタンの間のデータビュー

4

2 に答える 2

1

hboxコンテナのレイアウトを使用して、テンプレートまたはデータビュー構成のcssで高さを指定してみてください

于 2013-02-10T06:31:06.167 に答える
0

いくつかのことを試して、この問題を解決することができました。ほとんどの場合、リストまたはデータビューはフルスクリーン コンテンツを表示するために使用されます。しかし、私の場合は、他の 2 つのコンポーネントの間に必要でした。

これを機能させるために、次の構成を親コンテナーに追加しました-

            layout: {
                type: 'vbox',
                align : 'stretch'
            },

しかし、これでは十分ではありませんでした。flex各コンポーネントに構成を追加する必要があります。この構成がないと、データビューは表示されませんでした。そして、実際にデータが入力されていないことについて私は間違っていました（htmlが深くネストされているため、初めて見逃しました）。これがどのように見えるかのプレビューです。

ここに画像の説明を入力

于 2013-02-10T07:42:30.300 に答える