在ExtJS中动态显示为行的正确方法

时间:2014-03-11 14:49:44

标签: extjs extjs4

我创建了一个小应用程序来获取学生ID的学生详细信息。我正在使用表格布局的摘要页面。我创建了一家商店来收集学生的商标详情。

页面如下所示

http://www.sencha.com/forum/attachment.php?attachmentid=48225&d=1394475571

我想获得一些关于如何在Mark List部分下逐行显示每个标记的指针。我应该使用迭代逻辑还是使用网格(没有标题)来显示标记。

我的面板看起来像这样

    Ext.define('App.view.DetailsPanel', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.detailspanel',
    layout : {
        type : 'table',
        // The total column count must be specified here
        columns : 2,
        tableAttrs : {
            style : {
                width : '100%',
                height : '60%',
            }
        }
    },
    defaults : {
        // applied to each contained panel
        bodyStyle : 'padding:20px'
    },
    items : [ {
        html : '<b>Student Details</b>',
        border : false
    }, {
        html : 'Age'
    }, {
        html : 'Address'
    }, {
        html : 'Course Details',
    }, {
        html : 'Start Date'
    }, {
        html : 'End Date'
    }, {
        html : 'Mark List',
        height : 60,
        rowspan : 2
        //Would like to have the iteratiion logic to dispay the details row by row in the MarkList store
    }, {
        html : 'Certifications'
    }, {
        html : 'Specialization'
    } ]
});

Ext.define('App.view.DetailsPanel', { extend : 'Ext.panel.Panel', alias : 'widget.detailspanel', layout : { type : 'table', // The total column count must be specified here columns : 2, tableAttrs : { style : { width : '100%', height : '60%', } } }, defaults : { // applied to each contained panel bodyStyle : 'padding:20px' }, items : [ { html : '<b>Student Details</b>', border : false }, { html : 'Age' }, { html : 'Address' }, { html : 'Course Details', }, { html : 'Start Date' }, { html : 'End Date' }, { html : 'Mark List', height : 60, rowspan : 2 //Would like to have the iteratiion logic to dispay the details row by row in the MarkList store }, { html : 'Certifications' }, { html : 'Specialization' } ] });

请帮助!!

1 个答案:

答案 0 :(得分:0)

如果我是你,我会使用XTemplate结账:http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.XTemplate

我不仅将它用于&#34;标记列表&#34;,而且还用于整个内容。它会更高效,因为您当前正在为页面的每个部分创建一个容器。只使用没有所有Ext JS包装的HTML可能是一种更好的方法。