PDA

View Full Version : Image in grid rows



rati592
30 Jun 2009, 11:06 PM
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



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'}
]),
remoteSort: true
});
//categorystore.load();
var category_list = new Ext.form.ComboBox(
{
store: categorystore,
fieldLabel: 'Select Category',
displayField:'Category_Name',
valueField: 'Pk_Category_Id',
hiddenName: 'category',
name: 'category',
allowBlank: false,
typeAhead: true,
editable: true,
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
frame: true,
fileUpload: true, //Allows the form to upload a file
labelWidth: 100,
title: '<div align="center">Add New Product</div>', //Showing the title of the Grid
width: 580,
fieldAlign: 'left',
layout: 'column',
bodyStyle: 'padding:0 100px 0;',
defaults:
{
columnWidth: '1.0',
border: false
},
items:
[{
items:
{
xtype: 'fieldset',
title: 'PRODUCT DETAILS', //Title of the form
align: 'center',
autoHeight: true,
defaultType: 'textfield',
items:
[
category_list,
{
fieldLabel: 'Product Name',
name: 'productname',
allowBlank: false
},
{
fieldLabel: 'Price',
name: 'price',
allowBlank: false
},
{
fieldLabel: 'Description',
name: 'description',
autoOverflow: true,
height: 50,
width: 140
},
{
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(form, action)
{
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


//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).'})';

Animal
30 Jun 2009, 11:23 PM
MMm err what grid?

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

rati592
1 Jul 2009, 1:11 AM
Actually I don't know how to do column renderer. Please give me an example.

1 Jul 2009, 8:00 AM
check out the array-grid example