如何使tpl中的图像适合面板?

时间:2018-01-19 01:41:58

标签: javascript extjs

我使用了数据查看器组件创建了一个imageviewer,但似乎图像只是向下显示而不是在面板中显示。有人可以帮助如何使图像适合面板?感谢帮助。

这是我的代码:

var iPanel= new Ext.panel.Panel({
                                    width: 490,
                                    height: 500,
                                    layout: 'fit',
                                    title: 'Select an avatar',
                                    floating: true,
                                    closable : true,
                                    items: {
                                        extend: 'Ext.view.View',
                                        xtype: 'dataview',
                                        id: 'myDataView',
                                        autoHeight:true,
                                        reference: 'dataview',
                                        itemSelector: 'div.dataview-multisort-item',
                                        store: Ext.create('Admin.store.users.UsersAvatarStore'),
                                        tpl: [
                                            '<tpl for=".">',
                                                '<div>',
                                                   '<a href="#">',
                                                       '<img id="{name}" src="resources/images/default-avatars/{thumb}" height="72" weigh="72"/>',
                                                   '</a>',
                                                '</div>',
                                            '</tpl>',
                                             ]                                     
                                    }

1 个答案:

答案 0 :(得分:0)

在tpl中使用css,如下所示:

'<tpl if="this.check(values)">',
      '<div  class="menu-item" style="display: block!important; width: 100% !important;" event="myevent"><span class="fa-toggle-off"></span><span class="menu-text" style=" width: 162px;">' + text + '</span></div>',
     '<tpl else >'
  

这只是一个小例子,希望你能解决这个问题并解决它   你的问题。