Results 1 to 4 of 4

Thread: Image in grid rows

  1. #1

    Arrow Image in grid rows

    Hello I am trying to view product images in the geid rows but only the path of the image is showing in the grid. So please help me.

    JS file

    PHP Code:
    Ext.onReady(function()
    {
        
    //Initialize the quick tips
        
    Ext.QuickTips.init();
        
    //Specifying where the error message will be shown
        
    Ext.form.Field.prototype.msgTarget 'side';
        
        var 
    categorystore = new Ext.data.Store(
        {
            
    proxy: new Ext.data.HttpProxy(
            {
                
    url'Product_Category_Data.php'
            
    }),            
            
    reader: new Ext.data.JsonReader(
            {
                
    root'results',
                
    totalProperty'total',
                
    id'Pk_Category_Id'
            
    },
            [ 
                {
    name'Pk_Category_Id'type:'int'mapping:'Pk_Category_Id'},
                {
    name'Category_Name'type'string'mapping'Category_Name'}
            ]),
            
    remoteSorttrue
        
    });
        
    //categorystore.load();
         
    var category_list = new Ext.form.ComboBox(
        {  
            
    storecategorystore,   
            
    fieldLabel'Select Category',   
            
    displayField:'Category_Name',  
            
    valueField'Pk_Category_Id',  
            
    hiddenName'category',  
            
    name'category',  
            
    allowBlankfalse,  
            
    typeAheadtrue,   
            
    editabletrue,  
            
    mode'remote',   
            
    triggerAction'all',   
            
    valueNotFoundText:'Select a State...',  
            
    emptyText:'Select a category...',   
            
    selectOnFocus:true
        
    });  
        
    categorystore.load();
        
        
    //Creating the form panel for adding new products
        
    var new_product = new Ext.form.FormPanel(
        {
            
    url'Product_Validate.php',    //Url to which the form will be submitted
            
    frametrue,
            
    fileUploadtrue,   //Allows the form to upload a file
            
    labelWidth100,
            
    title'<div align="center">Add New Product</div>',     //Showing the title of the Grid
            
    width580,
            
    fieldAlign'left',
            
    layout'column',
            
    bodyStyle'padding:0 100px 0;',
            
    defaults:
            {
                
    columnWidth'1.0',
                
    borderfalse
            
    },
            
    items:
            [{
            
    items:
            {
            
    xtype'fieldset',
            
    title'PRODUCT DETAILS',   //Title of the form
                    
    align'center',
            
    autoHeighttrue,
            
    defaultType'textfield',
            
    items:
            [
                     
    category_list,
                     {
                        
    fieldLabel'Product Name',
                        
    name'productname',
                        
    allowBlankfalse
                    
    },
                    {
                        
    fieldLabel'Price',
                        
    name'price',
                        
    allowBlankfalse
                    
    },
                    {
                        
    fieldLabel'Description',
                        
    name'description',
                        
    autoOverflowtrue,
                        
    height50,
                        
    width140
                    
    },
                    {
                        
    xtype'fileuploadfield',
                        
    id'form-file',
                        
    enctype"multipart/form-data",
                        
    emptyText'Select an image',
                        
    fieldLabel'Image',
                        
    name'image',
                        
    buttonCfg:
                        {
                            
    text'Upload',
                            
    iconCls'upload-icon'
                        
    }
                    }]
            }
        }],
        
    buttons:
            [{
            
    text'Submit'//Submit button
            
    handler: function()
                {
                    var 
    productname new_product.getForm().findField("productname").getValue();
                    var 
    price new_product.getForm().findField("price").getValue();
                    var 
    category new_product.getForm().findField("category").getValue();
                    if(
    category)
                    {
                        
    Ext.Msg.alert('Success'"Category is="+category);
                    }
                    if(!
    category)
                    {
                        
    Ext.Msg.alert('Error'"Category is Blank");
                    }
                    else if(
    productname == '' || price == '')
                    {
                        
    Ext.Msg.alert('Error'"Fill the Mandatory fields.");
                    }
                    else 
                    {
                        
    new_product.getForm().submit(
                        {
                            
    method'POST',
                            
    waitTitle'Waiting',
                            
    waitMsg'Processing. Please Wait...',
                            
    success: function()
                            {
                                
    new_product.getForm().reset();
                                
    window.location 'Product_List.php';
                            },
                            
    failure:function(formaction)
                            {
                                
    obj Ext.util.JSON.decode(action.response.responseText);
                                
    Ext.Msg.alert('Error'obj.errors.reason);
                            }
                        });      
                    }
                }
        },
            {
                
    text'Reset',  //Reset button
                
    handler: function()
                {
                    
    new_product.getForm().reset();
                }
            }]
        });
        
    new_product.render('new_product');
        
    new_product.getForm().findField("productname").focus(false,true);
    }); 
    PHP file
    PHP Code:
    //Connecting to the database  
        
    $fm = new FileMaker($Db_filename,$serverip,$Db_user,$Db_password);
          
        
    //Showing all the product categories in the database
        
    $request $fm->newFindAllCommand('PRODUCT');
        
    $result $request->execute();
        
    $records $result->getRecords();
        
        
    //Counting the number of records
        
    $totaldata=0;
        
        
    //Creating an array to store the required data
        
    $data=array();
        foreach (
    $records as $record)
        {
            
    $data[$totaldata]["Pk_Product_Id"] = $record->getField('Pk_Product_Id');
            
    $data[$totaldata]["Product_Name"] = $record->getField('Product_Name');
            
    $data[$totaldata]["Product_Price"] = $record->getField('Product_Price');
            
    $data[$totaldata]["Product_Photo"] = "images/".$record->getField('Product_Photo');
            
    $totaldata++;
        } 
        echo 
    '({"results":'.json_encode($data).'})'
    Last edited by mystix; 30 Jun 2009 at 11:29 PM. Reason: moved to 3.x Help from Open Discussion

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    MMm err what grid?

    But anyway. Use a column renderer to create <img src="blah">

  3. #3

    Arrow

    Actually I don't know how to do column renderer. Please give me an example.

  4. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    check out the array-grid example

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •