1

私はextjsを使用しており、次のような動的データを表示したい ここに画像の説明を入力

私は xtype: displayfield を使用していますが、うまくいかないと思います。私の写真のようにするために使用することはできません

items: [

    {
            xtype: 'displayfield',
            style: 'border: 1px solid #CCCCCC', 
            fieldLabel: 'a',
            name: 'a',
            value: 'a'
        }, {
            xtype: 'displayfield',
            style: 'border: 1px solid #CCCCCC', 
            fieldLabel: 'b',
            name: 'b',
            value: 'b'
    }],

何か案が？ありがとうございます

4

1 に答える 1

2

このような複雑なレイアウトの場合、明らかにデータを表示するだけでよいことを考えると、カスタム テンプレートを使用したコンポーネントを使用します。このようにして、プレゼンテーションに HTML と CSS を活用できます。

たとえば、再利用可能なパネルを作成する方法は次のとおりです。

Ext.define('My.BudgetPanel', {
    extend: 'Ext.Panel'

    ,tpl: '<table>'
        // notice template variables
        + '<tr><td>{definedProject}</td><td>{definedPM}</td></tr>'
        + '</table>'
});

作成時にデータを渡すことができます：

var panel = Ext.create('My.BudgetPanel', {
    data: {
        definedProject: 'My Project'
        ,definedPM: 'Foo Bar'
    }
});

そして、後で新しいデータで更新できます。

panel.update({definedProject: 'My Project 2', definedPM: 'Baz Bat'});
于 2013-06-19T16:57:58.443 に答える