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

来源：互联网发布：网络连上但打不开网页编辑：程序博客网时间：2024/04/27 19:31

废话不多说，直接上代码：

js文件如下：

// Ext的panelExt.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('<table cellpadding=0 cellspacing=0 border=1 width=200px class="missionDetail">','<tr><td colspan=2 align=center><b>{name}的详细信息</b></td></tr>','<tr><td>任务名：</td><td>{name}</td></tr>','<tr><td>任务下发人：</td><td>{assignPeople}</td></tr>','<tr><td>预计开始时间：</td><td>{planStartTime}</td></tr>','<tr><td>预计结束时间：</td><td>{planEndTime}</td></tr>','<tr><td>实际开始时间：</td><td>{actualStartTime}</td></tr>','<tr><td>实际结束时间：</td><td>{actualEndTime}</td></tr>','<tr><td>任务状态：</td><td>{statue}</td></tr>','<tr><td>难度系数：</td><td>{grade}</td></tr>','<tr><td>描述：</td><td>{memo}</td></tr>');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);// 找到要渲染的panelvar panel = win.queryById('misBaseInfo');    panel.html = html;Ext.onReady(function(){win.render(Ext.getBody());});

运行结果：

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

如：

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

0 0