extjs在panel中动态添加模板并加载数据

废话不多说,直接上代码:

js文件如下:

// Ext的panel
Ext.define('MyApp.view.misDetailPanel', {
    extend: 'Ext.panel.Panel',

    requires: [
        'Ext.panel.Panel'
    ],

    id: 'MisDetailPanel',
    layout: 'border',
    closable: true,
	width:400,
	height:300,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'west',
                    id: 'misBaseInfo',
                    width: 200
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    region: 'center',
                    id: 'misDailyInfo'
                }
            ]
        });

        me.callParent(arguments);
    }

});
// 创建界面
var win = Ext.create('MyApp.view.misDetailPanel', {title:'hahaha'});

var tp1 = new Ext.XTemplate(
	'',
	'',
	'',
	'',
	'',
	'',
	'',
	'',
	'',
	'',
	''
);

tp1.compile(); // 对模板进行编译,速度比较快.
// 模板数据
var data = {
	name:'1', 
	assignPeople:'2',
	planStartTime:'3', 
	planEndTime:'5', 
	actualStartTime:'7', 
	actualEndTime:'8', 
	statue:'0',
	grade:'a',
	memo:'cc'};

var html = tp1.applyTemplate(data);
// 找到要渲染的panel
var panel = win.queryById('misBaseInfo');
    panel.html = html;


Ext.onReady(function(){
				win.render(Ext.getBody());
				});

运行结果:

extjs在panel中动态添加模板并加载数据_第1张图片

在css文件中加入相应的样式就可以使页面变成自己想要的模样。

如:

table.missionDetail tr
{
    height:30px;
    font-size:15px;
    border:1em solid red;
}



你可能感兴趣的:(开发技术)

{name}的详细信息
任务名:{name}
任务下发人:{assignPeople}
预计开始时间:{planStartTime}
预计结束时间:{planEndTime}
实际开始时间:{actualStartTime}
实际结束时间:{actualEndTime}
任务状态:{statue}
难度系数:{grade}
描述:{memo}