11

私はextjsが初めてです。各グリッド要素のアイコン画像を表示したい。誰か助けてくれませんか？

xml ファイルから画像パスを取得しています。

私のコードは以下です。ここでは画像パスを表示しています。

画像を表示して置き換える必要があります。

Ext.onReady(function(){

      var store = new Ext.data.Store({
        url: 'new_frm.xml',

               reader: new Ext.data.XmlReader({
               record: 'message',
               fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}]
           })
    });

      var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "First Name", width: 120, dataIndex: 'first', sortable: true},
            {header: "Last Name", width: 180, dataIndex: 'last', sortable: true},
            {header: "Company", width: 115, dataIndex: 'company', sortable: true},          
            {header: "Email", width: 100, dataIndex: 'email', sortable: true},
            {header: "Gender", width: 100, dataIndex: 'gender', sortable: true},
            {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true},
            {header: "State", width: 100, dataIndex: 'state', sortable: true},
            {header: "Living with", width: 100, dataIndex: 'Live', sortable: true},
            {header: "Commands", width: 100, dataIndex: 'content', sortable: true}

        ],
        renderTo:'example-grid',
        height:200
    });

    store.load();
});
4

7 に答える 7

32

画像を表示する列にレンダラーを追加する必要があります。renderer の値は、イメージ タグをレンダリングするために呼び出す関数です。

変更された列要素の 1 つ:

{header: "Photo", width: 100, renderer:renderIcon, dataIndex: 'form-file', sortable: true},

サンプルのレンダラー関数:

function renderIcon(val) {
    return '<img src="' + val + '">';
}

この例では、dataIndex の値はイメージのフル パスである必要があります。そうでない場合は、追加のロジックを追加する必要があります。

于 2009-04-13T16:04:51.583 に答える
4

特定の質問に採用できる別の方法は、次のように CSS ファイルに画像を設定することです。

.icon-red {
    background-image:  url('red.png');
    background-repeat: no-repeat;
}

.icon-green {
    background-image:  url('green.png');
    background-repeat: no-repeat;
}

次に、レンダリング時にセル メタデータに追加するレンダリングを作成します。

renderIcon: function(value, metadata, record, rowIndex, colIndex, store) {

    // set the icon for the cells metadata tags
    if (value > 0) {
        metadata.css = metadata.css + ' icon-green ';
    } else {
        metadata.css = metadata.css + ' icon-red ';
    }

    // add an individual qtip/tooltip over the icon with the real value
    metadata.attr = 'ext:qtip="' + (value) + '"';

    return '&nbsp;';
}
于 2012-09-27T19:21:20.027 に答える
1

画像を表示する列宣言で「render」属性を使用してみてください。Render属性を使用すると、選択したHTMLを出力できます。ExtJsフォーラムでチェックしてください:)それがあなたを正しい方向に向けることを願っています

于 2009-03-25T21:13:02.903 に答える
0

xml ファイルを htmlspecialchars("") として記述すると、簡単に表示できます。

于 2009-03-26T04:57:08.870 に答える
0

名の列のアイコンを表示するには、次の変更を行います

{header: "First Name", width: 120, renderer:first, dataIndex: 'first', sortable: true},

として機能させる

function first(val)
{
return '<img src="' + val + '">';
}
于 2014-01-10T05:22:21.403 に答える
-1

単純

彼のJsonで文字列を渡します< img src = " " />

dataIndex の後:

fields:[

{name: 'images', type: 'string'}

]

{

text: 'images',

dataIndex: 'images'

}
于 2015-06-23T23:24:54.673 に答える