PDA

View Full Version : How to display multiple images?



maecy
23 Sep 2013, 8:11 PM
I have the image path saved in my database and I have the store and model for my images. I've searched on how I can display all my images in a form/window but I'm having a hard time understanding them. Is there any simple way for me to be able to display my images? All help would be much appreciated.

existdissolve
24 Sep 2013, 6:03 AM
Since you already have the path in your model, the easiest way would be to simply use the Img component: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Img

A (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Img)lternatively, you could always use an XTemplate and simply script an <img> tag to render, using the image path from your model

maecy
24 Sep 2013, 9:45 PM
I have multiple imagepath that I want to use to display images. I'm wondering what should I do if I'm going to use the Img. With the XTemplate, I don't quite get the examples.

EDIT:

I've used the XTemplate but I don't know how I will set my tpl to my view since extjs doesn't have the function setTpl.

existdissolve
25 Sep 2013, 3:47 AM
I have multiple imagepath that I want to use to display images. I'm wondering what should I do if I'm going to use the Img. With the XTemplate, I don't quite get the examples.

EDIT:

I've used the XTemplate but I don't know how I will set my tpl to my view since extjs doesn't have the function setTpl.

Can you show your code? What kind of view are you using? If it's a dataview, it should update the template automatically when the data is bound to it.

maecy
25 Sep 2013, 5:51 PM
Here's my view code:



Ext.ns('dlti.view.widget');
//Order Window View
Ext.define('dlti.view.widget.Images' ,{
extend: 'Ext.form.Panel',
id: 'dlti-images',
alias: 'widget.Images',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
tpl:

items: [
//textbox that gets/display the imagepath that I got from the the DB for testing
{xtype: 'textfield',
name: 'Tpl'
}
],


});


here's my method:



DisplayImages: function() {
var scope = this;
var vo = scope.getProfinfo().getForm().getValues();
console.log(vo);




Ext.Service.invoke(
'UploadMedia',
'displayImages',
[vo.id],
function(p){
console.log('eto ang p',p)
if(p.success){



var samplepath = p.result[0];
console.log(samplepath);

var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{samplepath}" />',
'</div>',
'</tpl>'
);


scope.getTmpTpl().setValue(samplepath);




} ......

maecy
26 Sep 2013, 6:03 PM
I decided to try to display the image in grid, and I have this code.:



function(p){
if(p.success){
scope.getImages().store.loadData(p.result);
scope.getImages().setLoading(false);
}
else {
console.log(p);
scope.getImages().setLoading(false);
}
}


and this is my gridview code:



Ext.ns('dlti.view.widget');
//User Maintenance grid


Ext.define('dlti.view.widget.Images' ,{
extend: 'Ext.grid.Panel',
id: 'dlti-images',
alias: 'widget.Images',
forceFit: true,
stripeRows: true,
selType: 'rowmodel',
autosync: true,
height: 200,
width: 200,
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
})
],


store: new dlti.store.ImageStore(),


columns: [
{
text: 'Images',
dataIndex: 'imagepath',
renderer: function renderIcon(val, p, record) {
return '<img src= ' + val' width="25px" height="20px" align="middle"></a>';
}


},



]
});


Anyone could help me? please?

ettavolt
29 Sep 2013, 10:04 PM
Have you tried a simple dataview as it is done in this example (http://docs.sencha.com/extjs/4.2.1/#!/example/organizer/organizer.html)?

maecy
29 Sep 2013, 10:33 PM
I was able to display the images now in grid, I just fixed my renderer. But I was hoping If I could put a checkbox inside the grid, is there anyway you could help me with that?