Page 1 of 9 123 ... LastLast
Results 1 to 10 of 83

Thread: problem

  1. #1

    Default problem

    hi ,http://extjs.com/deploy/dev/examples/form/form-grid.htmli am new to extjs. Now i am working in above example.i modified the above example getting values form db..all are working file ... i have one question how to display images dynamically in above grid?onclik its show images also ....plz help me sorry for my bad english

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

    Default

    Images in the grid?

    You need a column renderer which generates the cell content like '<img src="/whatever">'

    http://dev.extjs.com/deploy/dev/docs...ember=renderer

    http://dev.extjs.com/deploy/dev/docs...er=setRenderer

  3. #3

    Default problem

    Thanks for ur reply

    ya here i display the images in grid there is no problem ...
    my problem is on select cannot show the images in panel
    its show the path of the url <img src="\test.gif" ....>

    these is my problem

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

    Default

    Just store the path in the Grid's Store.

    Then use a renderer to render the column.

    Then, you can use that path as the src of an <img>

    That's how to do it. Go and do that.

  5. #5

    Default

    Thanks for ur reply

    but still not working
    My js code
    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');
    }); 
    please help me

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

    Default

    Because you are not doing what I say.

    Store the image's PATH in the Store. NOT the <img> tag markup.

  7. #7

    Default

    [quote=shahulhameed;169799]Thanks for ur reply
    When i modify the code not use image tag its print

    test1.gif
    test2.gif


    My js code
    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 = [
            [
    'test1.gif',71.72,0.02,0.03,'9/1 12:00am'],
            [
    'test2.gif',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');
    }); 

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

    Default

    WHICH IS WHY I POINTED YOU TO THE RENDERER DOCS

  9. #9

    Default help me

    help me please , i do no how to start ..

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

    Default

    Read the code and the docs man.

    You have an example of using a renderer IN YOUR OWN CODE.

Page 1 of 9 123 ... LastLast

Posting Permissions

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