Sencha图片库视图 [英] Sencha image gallery view

问题描述

我正在创建一个网格（库）视图来显示图像。应用程序从服务器获取图像并将其显示在网格中。我可以使用XTemplate创建这个视图，它给了我适当的结果。我的Xtmeplate代码是：

  tpl：Ext.create（'Ext.XTemplate'，
'< div class =galleryid =photos>'，
'< tpl for =。>'，
'< img src ={media：this.getURL} {picname }width =30height =30class =thumbnaildata-fullimage ={media：this.getURL（）} {picname}alt ={description}/>'，
'< / tpl>'，
'< / div>'，{
 getURL：function（）{
 
 return Gallery.utils.globalVar.getRemoteDirPath（） ; 
} 
}）
  

问题是图像很大大小，我想以小缩略图显示它们。所以当我在移动设备上运行应用程序时，应用程序变得非常慢并且挂起。原因可能是因为它同时下载所有的图像和渲染视图。

任何人都可以提出可能的解决方案，我可以如何快速的过程或任何不同的方式来

感谢
Ishan jain

解决方案

我同意@ThinkFloyd，客户不一定知道或在实施模式中有发言权，特别是如果它不会对结果产生不利影响。 Thinkfloyd提出了一种非常有效且实施友好的方法，另一方面，客户通过坚持采取这种替代方法，给您的工作量超出了必要的范围。如果你有效地向他/她传达信息，他/她可能愿意妥协。您只需要在images文件夹中为缩略图图像链接到一个缩略图文件夹。我希望您能够最终解决它！

I am creating a grid(gallery) view to show the images. Application fetch the images from the server and display it in grids. I can create this view using XTemplate and it is giving me appropriate result. My Xtmeplate code is:

tpl:  Ext.create('Ext.XTemplate',
        '<div class="gallery" id="photos">',
        '<tpl for=".">',
        '<img src="{media:this.getURL}{picname}" width="30" height="30"      class="thumbnail" data-fullimage="{media:this.getURL()}{picname}" alt="{description}"/>',
        '</tpl>',
        '</div>',{
            getURL: function(){

               return Gallery.utils.globalVar.getRemoteDirPath();
            }
        })

The problem is that the images are of big size and I want to display them in small thumbnail. So when I run the application on the mobile device, the application becomes very slow and it hanged up. The reason may be because it simultaneously downloading all the images and rendering on the view.

Can anyone suggest the possible solution that how I can fast the process or any different way to do it.

Thanks Ishan jain

解决方案

I agree with @ThinkFloyd the client need not necessarily know or have a say in the mode of implementation especially if it would not have detrimental impact on the outcome. Thinkfloyd presents a very valid and implementation friendly approach, on the other hand, the client is giving you more work than is necessary by insisting that you take this alternate approach. S/he might be willing to compromise if you communicate things to him/her effectively. You only need to have a thumbnails folder within the images folder for the thumbnails images to link to.. I hope you managed resolve it in the end!

这篇关于Sencha图片库视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！