Grid With images problem

[shahulhameed]

Hi ,

I am new extjs..
http://extjs.com/deploy/dev/examples/form/form-grid.html

Now i am working above example ...its works fine

in these grid i have one colums with images if user select the filed its show images and also the records ...

the records are show but images show in <img src="/tt.jpg"....>


please help me

sorry for my bad english

[mjlecomte]

I do not understand, please post a picture and some sample code so someone may understand your problem.

[shahulhameed]

hi,
Thanks for ur reply
My js code

1.i want display images in grid
2.on selcect the images its show in panel
as the below link
http://extjs.com/deploy/dev/examples/form/form-grid.html

Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();
 
//   Define the Grid data and create the Grid
    var myData = [
        ['<IMG SRC="test1.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="">',71.72,0.02,0.03,'9/1 12:00am'],
        ['<IMG SRC="test2.gif" WIDTH="30" HEIGHT="50" BORDER="0" ALT="">',29.01,0.42,1.47,'9/1 12:00am']
 
    ];
    var ds = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
               {name: 'company',type:'string'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date'}
          ])
    });
    ds.loadData(myData);
    // example of custom renderer function
    function italic(value){
        return '<i>' + value + '</i>';
    }
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
    // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
    // custom or reusable ColumnModels
    var colModel = new Ext.grid.ColumnModel([
        {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
 
        {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}
 
    ]);
    bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
/*
 * Here is where we create the Form
 */
    var gridForm = new Ext.FormPanel({
        id: 'company-form',
        frame: true,
        labelAlign: 'left',
        title: 'Company data',
        bodyStyle:'padding:5px',
        width: 750,
        layout: 'column', // Specifies that the items will now be arranged in columns
        items: [{
            columnWidth: 0.6,
            layout: 'fit',
            items: {
             xtype: 'grid',
             ds: ds,
             cm: colModel,
             sm: new Ext.grid.RowSelectionModel({
                 singleSelect: true,
                 listeners: {
                     rowselect: function(sm, row, rec) {
                         Ext.getCmp("company-form").getForm().loadRecord(rec);
        Ext.getCmp("company").getForm().loadRecord(rec);
                     }
                 }
             }),
             autoExpandColumn: 'company',
             height: 350,
             title:'Company Data',
             border: true,
          listeners: {
           render: function(g) {
            g.getSelectionModel().selectRow(0);
           },
           delay: 10 // Allow rows to be rendered.
          }
         }
        },{
         columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 90,
            title:'Company details',
            defaults: {width: 140}, // Default config options for child items
          defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                "margin-left": "10px", // when you add custom margin in IE 6...
                "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
            },
            items: [{
                fieldLabel: 'Name',
                name: 'company'
            },{
                fieldLabel: 'Price',
                name: 'price'
            },{
                fieldLabel: '% Change',
                name: 'pctChange'
            },{
                xtype: 'box',
    autoEl: {tag: 'img', src: company, width: 87, height: 124 }
            }]
        }],
        renderTo: bd
    });
 
    //  Create Panel view code. Ignore.
   // createCodePanel('form-grid.js', 'View code to create this Form');
}); 

[mjlecomte]

I do not see anything in the code that you posted that suggests where you want images. DO you want images in the grid or in the panel on the right side or both?
You can search extensions forum for cellactions and rowactions plugins which are also on www.extjs.eu. You can look at the example here: http://extjs.com/learn/Tutorial:Ext2...itor_PHP_MySQL. If I recall correctly, if you right click on that grid it has pop up window that includes an image.

[shahulhameed]

Thank for ur reply




i have a grid with four colum consist of text and image

its work perfectly ....


my problem is
when i select the row only text fields are view in left side of panel..
but image not shown


plz vefiy the link


http://extjs.com/deploy/dev/examples/form/form-grid.html

[mjlecomte]

Again, I don't see any images in your posted code or the example link.

[mjlecomte]

Sorry, I see where you have it in your code now. I'd have to review further, have to leave now. In absence of further help from others, I can again only suggest at moment you look at my example, where I've done this.

[shahulhameed]

Thank for ur reply

http://extjs.com/deploy/dev/examples/form/form-grid.html


i have use above example

and modify as our requirement

my js

 
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();
//   Define the Grid data and create the Grid
    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am','details.gif'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am','box.gif']
 
    ];
    var ds = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
      {name: 'renderNPreview'}
          ])
    });
    ds.loadData(myData);
    // example of custom renderer function
    function italic(value){
        return '<i>' + value + '</i>';
    }
    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
function renderNPreview(value){
return  '<img  src="'+value+'">';
}
    // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
    // custom or reusable ColumnModels
    var colModel = new Ext.grid.ColumnModel([
        {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
        {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
  {id:'renderNPreview',header: "renderNPreview", width: 75, sortable: true, renderer: renderNPreview, dataIndex: 'renderNPreview'}
    ]);
    bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});
/*
 * Here is where we create the Form
 */
    var gridForm = new Ext.FormPanel({
        id: 'company-form',
        frame: true,
        labelAlign: 'left',
        title: 'Company data',
        bodyStyle:'padding:5px',
        width: 750,
        layout: 'column', // Specifies that the items will now be arranged in columns
        items: [{
            columnWidth: 0.6,
            layout: 'fit',
            items: {
             xtype: 'grid',
             ds: ds,
             cm: colModel,
             sm: new Ext.grid.RowSelectionModel({
                 singleSelect: true,
                 listeners: {
                     rowselect: function(sm, row, rec) {
                         Ext.getCmp("company-form").getForm().loadRecord(rec);
          //  Ext.getCmp("renderNPreview").el.com.src = renderNPreview;
       Ext.getCmp('renderNPreview').el.dom.src = rec.json[renderNPreview]; 
 
                     }
                 }
             }),
 
             autoExpandColumn: 'company',
             height: 350,
             title:'Company Data',
             border: true,
          listeners: {
           render: function(g) {
            g.getSelectionModel().selectRow(0);
           },
           delay: 10 // Allow rows to be rendered.
          }
         }
        },{
         columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 90,
            title:'Company details',
            defaults: {width: 140}, // Default config options for child items
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                "margin-left": "10px", // when you add custom margin in IE 6...
                "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
            },
            items: [{
                fieldLabel: 'Name',
                name: 'company'
            },{
                fieldLabel: 'Price',
                name: 'price'
            },{
                fieldLabel: '% Change',
                name: 'pctChange'
            },{
                xtype: 'datefield',
                fieldLabel: 'Last Updated',
                name: 'lastChange'
            },
    {
               // xtype: 'datefield',
               xtype: 'box',
            id  : 'renderNPreview',
    autoEl: { id:renderNPreview, tag: 'img', src:''}
 
 
            }
 
 
   ]
 
        }],
        renderTo: bd
    });
 
 
 
}); 

i want on select the grid show all rercord in panel but not image display
help me

[RAmses]

Hi shahulhameed,
I think You want show image on select row, dont you? Based on Your last js code(thanks for inspiration) I wrote this (just parts)

rowselect: function(sm, row, rec) {
   Ext.getCmp("furniture-form").getForm().loadRecord(rec);
   Ext.getCmp('renderImage').el.dom.src = '/modules/furniture/images/' + rec.get('Img');
}

... 'Img' is your renderNPreview

in form panel:

{
   xtype:'box'
   ,anchor:''
   ,id: 'renderImage'
   ,autoEl:{
       ,style:'margin:8px 0 8px 0'
       ,tag:'img'
       ,src:''
}

I hope it helps