Results 1 to 3 of 3

Thread: Problem grid.panel

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Answers
    2

    Default Answered: Problem grid.panel

    Hi,

    Here is the problem :
    html too long.png

    Why the Description take one line and the HTML is fully visible? I would like the HTML to be on one line too.

    Here is the grid.panel code :

    Code:
    Ext.define('ADM.view.News', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.News',
    
        store: 'News',
        id: 'gridNews',
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 2
            })
        ],
        columns: [{
            header: '<center>Label</center>',
            dataIndex: 'new_label',
            align: 'center',
            flex: 1,
            sortable: true,
            hideable: false,
            field: { xtype: 'textfield' }
        }, {
            header: '<center>Description</center>',
            dataIndex: 'new_description',
            align: 'center',
            flex: 1,
            sortable: true,
            hideable: false,
            field: { xtype: 'textfield' }
        }, {
            header: '<center>HTML</center>',
            dataIndex: 'new_html',
            align: 'center',
            flex: 1,
            sortable: true,
            hideable: false
        }, {
            header: '<center>Date Start</center>',
            dataIndex: 'new_start_date',
            align: 'center',
            flex: 0.5,
            sortable: true,
            hideable: false,
            renderer: Ext.util.Format.dateRenderer('d-m-Y'),
            field: { xtype: 'datefield' }
        }, {
            header: '<center>Date End</center>',
            dataIndex: 'new_end_date',
            align: 'center',
            flex: 0.5,
            sortable: true,
            hideable: false,
            renderer: Ext.util.Format.dateRenderer('d-m-Y'),
            field: { xtype: 'datefield' }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            items: [
            { text: 'Add', itemId: 'addNews' },
            '-',
            { text: 'Set HTML', itemId: 'setNewsHTML' },
            '-',
            { text: 'Save', itemId: 'saveNews' }
            ]
        }]
    })
    Thanks in advance !

  2. Hi,

    you can use following code :

    Code:
     {
        header: '<center>Html</center>',
        dataIndex: 'new_html' ,
        align:'center',
        flex:1,
        renderer:function(v,m,r){ return Ext.util.Format.htmlEncode(v);}
     }
    For more detail see this link: http://docs.sencha.com/ext-js/4-1/#!...hod-htmlEncode

  3. #2
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

    Default

    You can strip html tags in column renderer:
    PHP Code:
    {
            
    header'<center>HTML</center>',
            
    dataIndex'new_html',
            
    align'center',
            
    flex1,
            
    sortabletrue,
            
    hideablefalse,
            
    rendererExt.util.Format.stripTags


  4. #3
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    Hi,

    you can use following code :

    Code:
     {
        header: '<center>Html</center>',
        dataIndex: 'new_html' ,
        align:'center',
        flex:1,
        renderer:function(v,m,r){ return Ext.util.Format.htmlEncode(v);}
     }
    For more detail see this link: http://docs.sencha.com/ext-js/4-1/#!...hod-htmlEncode
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Posting Permissions

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