Question

编辑：好的等待我开始一点一点地弄明白。我是个白痴。

美好的一天。我正在使用ExtJS构建一个Web应用程序。在我的Web应用程序中，用户可以将照片上传到服务器目录。此外，我还将文件路径与用户ID一起保存到数据库表中，以便知道某张照片是谁的照片。当然，我也希望他们能够查看它。我可以根据登录用户正确获取数据库行。但是，我现在遇到的困难是向用户展示他或她的照片。

在网上搜索时，我{sen}提供saw this example。查看代码后，集成到现有应用程序似乎很简单。

在检查了提供的data-view.js file后，我看到它使用了ext/src/ux/子目录中已经提供的2个插件，所以我没有看到添加它们的目的，我的app.js文件如下所示：

requires: [
    'Ext.Loader',
    'Ext.layout.container.Absolute',
    'Ext.layout.container.Column',
    'Ext.grid.*',
    'Ext.ux.DataView.DragSelector',
    'Ext.ux.DataView.LabelEditor'
],

现在，我也拥有自己的模特和自己的商店。

我的模型看起来像：

Ext.define('LLOYDS_LMA.model.ciGallery', {
extend: 'Ext.data.Model',

requires: [
    'Ext.data.Field'
],

fields: [
    {
        name: 'image_path'
    },
    {
        name: 'description'
    },
    {
        name: 'upload_date'
    },
    {
        name: 'upload_time'
    }
]
});

我的商店看起来像是用于在数据库上进行CRUD的标准商店。

现在，为了创建照片库示例，我所做的是将面板放在我希望图库出现的位置，并为其afterrender属性创建一个函数。在渲染后的函数中，我基本上做的是从Ext.create(....

开始复制粘贴整个示例

看起来像这样：

var store = Ext.getStore("ciGallery");

Ext.create('Ext.Panel', {
    id: 'images-view',
    frame: true,
    collapsible: true,
    width: 200,
    renderTo: 'dataview-example',
    title: 'Simple DataView (0 items selected)',
    items: Ext.create('Ext.view.View', {
        store: store,
        tpl: [
            '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],
        multiSelect: true,
        height: 310,
        trackOver: true,
        overItemCls: 'x-item-over',
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
        ],

        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.image_path, 15),
                sizeString: Ext.util.Format.fileSize(data.upload_date),
                dateString: Ext.util.Format.date(data.upload_time)
            });
            return data;
        },

        listeners: {
            selectionchange: function(dv, nodes ){
                var l = nodes.length,
                    s = l !== 1 ? 's' : '';
                this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
            }
        }
    })
});

ciGallery是我的商店，dataview-example是父面板的id属性，以及对prepareData函数的调整以匹配模型的属性我用。

然而，当我运行我的应用程序并转到该面板时，似乎没有任何正确呈现，因为我没有看到任何内容，甚至没有看到空白面板。

任何人都可以帮我做这项工作吗？很感谢任何形式的帮助。谢谢。

Answer 1

我认为为了使其正常工作，需要在callParent初始化类之后在initComponent方法中创建嵌入式DataView。

由于我经常使用这种类型的视图，因此我创建了一个基类＆＃39; DataPanel＆＃39;处理大部分此设置，然后在需要时仅传递模板特定的详细信息。

以下是我实际实施的示例代码。

1）创建一个名为＆＃39; YourNamespace.view.DataPanel.js＆＃39;的单独包含文件。包含此代码：

Ext.define('YourNamespace.view.DataPanel', {
    extend: 'Ext.panel.Panel'
    , alias: 'widget.dataPanel'
    , title: ''
    , initTitle: ''
    , appendRecordToTitle: true
    , emptyText: undefined
    , itemSelector: ''
    , layout: 'fit'
    , store: ''
    , tpl: ''
    , autoWidth: true
    , overflowY: 'auto'
    , initComponent: function () {
        this.callParent(arguments);
            this.initTitle = this.title;
            var dataView = new Ext.DataView({
                emptyText: this.emptyText ? this.emptyText : 'No Items Available.'
                , title: this.initTitle
                , itemSelector: this.itemSelector
                , loadMask: false
                , overItemCls: 'x-view-over'
                , store: this.store
                , tpl: this.tpl
                , style: 'padding: 5px'
                , width: '100%'
                , listeners: {
                        selectionchange: function(dataview, selection) {
                            this.up().fireEvent('selectionchange', dataview, selection);
                        }
                    }
            });
            this.add(dataView);
        }
    , refreshTitle: function (recordTitle) {
            if (this.appendRecordToTitle) {
                this.setTitle(this.initTitle + ' ' + recordTitle);
            }
        }
    , reset: function() {
        }
});

2）以下是显示此基类用法的示例：

Ext.define('YourNamespace.view.EmployeePhotoPanel', {
    extend: 'YourNamespace.view.DataPanel'
    , alias: 'widget.employeeSearchResultsPanel'
    , minHeight: 600
    , itemSelector: 'div.employee'
    , store: Ext.create('YourNamespace.store.Employees')
    , title: 'Search Results'
    , tpl: new Ext.XTemplate(
            '<tpl for=".">'
            , '<div class="employee">'
                , '<img src="/employee/photo?id={employeeNumber}&scale=thumbnail")">'
                , '<div class="displayLabel">{displayName:ellipsis(20)}</div>'
            , '</div>'
            , '</tpl>'
        )
    , load: function(searchCriteria) {
        this.store.load({
            params: {
                '$filter': searchCriteria
            }
                , scope: this
        })
        }
    }
);

3）此示例的模型可能如下所示：

Ext.define('YourNamespace.model.Employee', {
    extend: 'Ext.data.Model'
  , requires: ['Ext.data.proxy.Rest']
  , idProperty: 'employeeNumber'
  , fields: [
      'employeeNumber', 'displayName'
   ]
  , proxy: {
        type: 'rest'
        , url: '/employee/record/summary'
  }
});

4）商店很简单：

Ext.define('YourNamespace.store.Employees', {
    extend: 'Ext.data.Store'
    , model: 'YourNamespace.model.Employee'
});

5）.css让它看起来正确：

.employee {
    background-color: #F7F7F9;
    text-align: center;
    vertical-align: bottom;
    border: 1px outset #D0D0D0;
    padding: 4px;
    margin: 2px;
    float: left;
    display: inherit;
    overflow: hidden;
    font: normal .8em Arial;
    height: 130px;
    width: 108px;
}
.employee .displayLabel {
    white-space: nowrap;
    overflow: hidden;
    color: #000000;
}
.employee:hover{
   border:1px solid red;
}

6）在控制器的某个地方，您需要调用商店加载方法。该调用应该使用info自动填充DataView。此示例模板具有嵌入的html img标记，该标记为每个存储记录重新调用服务器以返回组成图像文件的字节。如果您有静态图像，请修改模板以直接指向图像URL（甚至可能返回模型记录中的URL）。

希望这有帮助！

Answer 2

好。这就是我的所作所为。 Viewcha和Panel组件可在Sencha Architect轻松获得。我只是将它们添加到我希望图库所在的面板上，然后在示例中为组件设置尽可能多的属性。我认为我唯一没有使用的是示例中View的renderTo属性。

现在，当您制作视图时，您必须调整tpl代码以及prepareData功能，以匹配商店使用的模型。这是我对tpl所做的事情：

tpl: [
    '<tpl for=".">',
    '<div class="thumb"><img src="{image_path}"></div>',
    '</tpl>',
    '<div class="x-clear"></div>',
    ''
]

我选择了一个简单的图片库，与样本显示的相反（它有文件名）。为此，我只删除了其他div和span个对象。

使用DataView示例创建照片库

2 个答案: