1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    shahulhameed is on a distinguished road

      0  

    Default Grid With images problem

    Grid With images problem


    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

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    shahulhameed is on a distinguished road

      0  

    Default Reply

    Reply


    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
    PHP Code:
    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"width160sortabletruelocked:falsedataIndex'company'},
     
            {
    header"Change"width75sortabletruerendererchangedataIndex'change'},
            {
    header"% Change"width75sortabletruerendererpctChangedataIndex'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',
            
    frametrue,
            
    labelAlign'left',
            
    title'Company data',
            
    bodyStyle:'padding:5px',
            
    width750,
            
    layout'column'// Specifies that the items will now be arranged in columns
            
    items: [{
                
    columnWidth0.6,
                
    layout'fit',
                
    items: {
                 
    xtype'grid',
                 
    dsds,
                 
    cmcolModel,
                 
    sm: new Ext.grid.RowSelectionModel({
                     
    singleSelecttrue,
                     
    listeners: {
                         
    rowselect: function(smrowrec) {
                             
    Ext.getCmp("company-form").getForm().loadRecord(rec);
            
    Ext.getCmp("company").getForm().loadRecord(rec);
                         }
                     }
                 }),
                 
    autoExpandColumn'company',
                 
    height350,
                 
    title:'Company Data',
                 
    bordertrue,
              
    listeners: {
               
    render: function(g) {
                
    g.getSelectionModel().selectRow(0);
               },
               
    delay10 // Allow rows to be rendered.
              
    }
             }
            },{
             
    columnWidth0.4,
                
    xtype'fieldset',
                
    labelWidth90,
                
    title:'Company details',
                
    defaults: {width140}, // Default config options for child items
              
    defaultType'textfield',
                
    autoHeighttrue,
                
    bodyStyleExt.isIE 'padding:0 0 5px 15px;' 'padding:10px 15px;',
                
    borderfalse,
                
    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'srccompanywidth87height124 }
                }]
            }],
            
    renderTobd
        
    });
     
        
    //  Create Panel view code. Ignore.
       // createCodePanel('form-grid.js', 'View code to create this Form');
    }); 

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    shahulhameed is on a distinguished road

      0  

    Default reply

    reply


    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

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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.

  8. #8
    Ext User
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    shahulhameed is on a distinguished road

      0  

    Default reply

    reply


    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

    PHP Code:
     
    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"width160sortabletruelocked:falsedataIndex'company'},
            {
    header"Price"width75sortabletruerendererExt.util.Format.usMoneydataIndex'price'},
            {
    header"Change"width75sortabletruerendererchangedataIndex'change'},
            {
    header"% Change"width75sortabletruerendererpctChangedataIndex'pctChange'},
            {
    header"Last Updated"width85sortabletruerendererExt.util.Format.dateRenderer('m/d/Y'), dataIndex'lastChange'},
      {
    id:'renderNPreview',header"renderNPreview"width75sortabletruerendererrenderNPreviewdataIndex'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',
            
    frametrue,
            
    labelAlign'left',
            
    title'Company data',
            
    bodyStyle:'padding:5px',
            
    width750,
            
    layout'column'// Specifies that the items will now be arranged in columns
            
    items: [{
                
    columnWidth0.6,
                
    layout'fit',
                
    items: {
                 
    xtype'grid',
                 
    dsds,
                 
    cmcolModel,
                 
    sm: new Ext.grid.RowSelectionModel({
                     
    singleSelecttrue,
                     
    listeners: {
                         
    rowselect: function(smrowrec) {
                             
    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',
                 
    height350,
                 
    title:'Company Data',
                 
    bordertrue,
              
    listeners: {
               
    render: function(g) {
                
    g.getSelectionModel().selectRow(0);
               },
               
    delay10 // Allow rows to be rendered.
              
    }
             }
            },{
             
    columnWidth0.4,
                
    xtype'fieldset',
                
    labelWidth90,
                
    title:'Company details',
                
    defaults: {width140}, // Default config options for child items
                
    defaultType'textfield',
                
    autoHeighttrue,
                
    bodyStyleExt.isIE 'padding:0 0 5px 15px;' 'padding:10px 15px;',
                
    borderfalse,
                
    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:renderNPreviewtag'img'src:''}
     
     
                }
     
     
       ]
     
            }],
            
    renderTobd
        
    });
     
     
     
    }); 
    i want on select the grid show all rercord in panel but not image display
    help me

  9. #9
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    RAmses is on a distinguished road

      0  

    Default Solution

    Solution


    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)

    Code:
    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:

    Code:
    {
       xtype:'box'
       ,anchor:''
       ,id: 'renderImage'
       ,autoEl:{
           ,style:'margin:8px 0 8px 0'
           ,tag:'img'
           ,src:''
    }
    I hope it helps

Thread Participants: 2