0

さまざまな JSON データ フィールドを組み合わせて ListItem コンテンツをカスタマイズする方法を知りたいと思っていました。

{caption}、{subCaption}、{source} の 3 つの JSON フィールドがあります。

これまでのところ、dataMap を使用し、カスタム クラスを使用して追加のテキストとスタイルをそれぞれにラップすることができました。ただし、コンテンツを追加できる唯一の方法は、適用/更新機能を使用して順次追加することです。その結果、私の ListItems は単純に {caption},{subCaption},{source} という行になっています。

各 ListItem を次のように表示する方法は次のとおりです。

  1. {caption} と {subCaption} のテキストを組み合わせて短いストーリーを作成し、これをパネルとして ListItem に追加します
  2. 手順 1 で作成したパネルの右下にドッキングされた小さなパネルに {source} をレンダリングします。

どうすれば上記を行うことができますか？抽出された質問は次のようになります: さまざまな JSON フィールドのデータにアクセスして結合し、ListItem にレンダリングするにはどうすればよいですか?

ListItem の現在のコードを参照用に以下にコピーします。

いつものように、どんな助けも大歓迎です! ありがとう！

ムハンマド

カリフォルニア州サンノゼ

    Ext.define('qxtapp.view.ResultsListItem', {
    extend: 'Ext.dataview.component.ListItem',
    requires: [
        'qxtapp.view.ResultsListItemCaption'
        ],
    xtype : 'resultslistitem',
    alias : 'widget.resultslistitem',


    config: {
        caption: true,
        subCaption: true,
        source: true,
        dataMap: {
            getCaption: {
                setHtml: 'caption'
            },
            getSubCaption: {
                setHtml: 'subCaption'
            },
            getSource: {
                setHtml: 'source'
            }
        },
        layout: {
            type: 'vbox'
        }
    },
    applyCaption: function(config) {
        return Ext.factory(config, qxtapp.view.ResultsListItemCaption, this.getCaption());
    },
    updateCaption: function(newCaption) {
        if (newCaption) {
            this.add(newCaption);
        }
    },
    applySubCaption: function(config) {
        return Ext.factory(config, Ext.Component, this.getSubCaption());
    },
    updateSubCaption: function(newSubCaption) {
        if (newSubCaption) {
            this.add(newSubCaption);
        }
    },
    applySource: function(config) {
        return Ext.factory(config, Ext.Component, this.getSource());
    },
    updateSource: function(newSource) {
        if (newSource) {
            this.add(newSource);
        }
    }
});

Ext.define('qxtapp.view.ResultsListItemCaption', {
    extend: 'Ext.Component',
    applyHtml: function(caption) {
        // do some customization to caption and return it
        return caption;
    }
});
4

1 に答える 1

2

なぜそんな悩みを乗り越えなければならないのかわからないのですが、シンプルなリストでアイテムテンプレートを使ってみませんか？

Ext.define('qxtapp.view.ResultsList', {
  extend: 'Ext.dataview.List',
  alias: 'widget.resultslist',
  config: {
    ...
    itemTpl: new Ext.XTemplate(
      "<div class='result-item'>",
        "<p class='result-story'>",
          "{[this.getStoryHtml(values.caption, values.subCaption)]}",
        "</p>",
        "<img src='{source}' alt='{caption}' />",
      "</div>",
      {
        // This is a new function on the template created above and can be called 
        // from within the template html
        getStoryHtml: function(caption, subCaption) {
          // customize the text to your needs, then return the html to insert
        }
      }
    ),
    ...
  }
});

もちろん、CSSを使用してこれらのアイテムのスタイルを設定する必要がありますが、それは簡単な部分です。;）

于 2013-03-08T16:28:27.327 に答える