Question

我整天都输了，无论我做什么，dataview都没有看到具体的CSS，我使用extjs一段时间，我能够使用每个组件，但这让我发疯在这里是视图

    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux.DataView', '../ux/DataView/');

    Ext.require([
    'Ext.data.*',
    'Ext.util.*',
    'Ext.view.View',
    'Ext.ux.DataView.Animated',
    'Ext.XTemplate',
    'Ext.panel.Panel',
    'Ext.toolbar.*',
    'Ext.slider.Multi',
    'Pandora.store.Product'
    ]);

    Ext.define('Pandora.view.ProvaShowProdotti', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.provaShowProdotti',
    frame: true,
    title: 'Liste des agents',




    initComponent: function(){

    this.items =[{
    xtype: 'dataview',
    store: 'Product',
    cls: 'thumb',
    style: 'border:1px solid #99BBE8; border-top-width: 0',
    deferInitialRefresh: false,
    itemSelector: 'div.thumb-wrap',
    tpl : Ext.create('Ext.XTemplate',
    '<tpl for=".">',
    '<div class="thumb-wrap" id="{name}">',
    '<div class="thumb"><img src="http://localhost:8080/WebProjectTemplate/js/images/prova.jpg" title="{name}"></div>',
    '<span class="x-editable">{shortName}</span></div>',


    '</tpl>'
    ), plugins : [
    Ext.create('Ext.ux.DataView.Animated', {
    duration : 550,
    idProperty: 'productId'
    })
    ]
    }]

    this.callParent();
    }
    });

这是HTML

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title">Pandora</title>

    <link rel="stylesheet" type="text/css" href="ext-all-debug.css">



    <link rel="stylesheet" type="text/css" href="../../example.css" />
    <script type="text/javascript" src="../bootstrap.js"></script>
    <script type="text/javascript" src="PropertyReader.js"></script>
    <script type="text/javascript" src="Bundle.js"></script>





    <script type="text/javascript" src="app/app.js"></script>

    </head>
    <body>

    </body>
    </html>

Answer 1

DataView Component的样式似乎不包含在ext-all-debug.css中。

尝试包含data-view.css，它包含您引用的DataView元素的样式。

MVC架构中的Dataview的CSS问题Extjs 4

1 个答案: