Question

我正在开发一个使用Ext.XTemplate的小网页，并且在index.html中显示视图时遇到问题。但是，当我在面板的项目中创建Ext.XTemplate时，它工作正常。问题是我在json文件中有所有信息，所以我需要一个商店，这是Ext.view.View的优势之一。 请帮助我，请在该面板中创建一个视图。

P.S。我应该使用一个扩展panel.Panel的类作为任务关注它。

我的第一堂课

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'position', type:'string' },
        { name:'title', type:'string' },
        { name:'rate', type:'string' }
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url: '/app/view/main/data.json',
        method:'GET',
        reader: {
            type: 'json',
            root: 'foo'
        }
    },
    autoLoad: true
});

var notiTpl = new Ext.XTemplate(
  '<h1>TIOBE rate</h1>',
  '<table>',
      '<tr>',
          '<td>Position on 2015</td>',
          '<td>Programming language</td>',
          '<td>Rate</td>',
          '<td>Group</td>',
      '</tr>',
      '<tpl for=".">',
          '<tr <tpl if="values.position%2 == 1">style="background-color: silver;"</tpl>>',
          '<td>{position}</td>',
          '<td>{title}</td>',
          '<td>{rate}</td>',
          '<tpl if="values.position<3">',
              '<td>A</td>',
              '<tpl elseif="values.position<5">',
               '<td>B</td>',
               '<tpl else>',
                   '<td>C</td>',
               '</tpl>',
           '</tr>',
       '</tpl>',
   '</table>');


Ext.define('App.view.main.List', {
    extend: 'Ext.view.View',
    xtype: 'mainlist',
    store: store,
    tpl: notiTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'There is no text',
    renderTo: Ext.getBody()
});

我的观点

Ext.define('App.view.main.Main', {
    extend: 'Ext.panel.Panel',       
    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',    
        'App.view.main.List'
    ],  

    items: [{
        title: 'Some html text',
        items: [{
            xtype: 'mainlist'
        }]
    }]
});

我的index.html

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>App</title>
    <script type="text/javascript" src="ext/build/ext-all.js"></script>            
        <script type="text/javascript" src="app.js"></script>        

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="b0beccc4-d014-4af3-919d-fd0a75c6c656" type="text/javascript" src="bootstrap.js"></script>    
</head>
<body></body>
</html>

我的应用

Ext.application({
    name: 'App',    
    extend: 'App.Application',    
    requires: [
        'App.view.main.Main'
    ],
  //
    mainView: 'App.view.main.Main'

    //-------------------------------------------------------------------------
});

如何在Ext.panel.Panel中显示Ext.view.View

0 个答案: