Results 1 to 5 of 5

Thread: plugin problem with grid

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    118
    Answers
    1

    Default plugin problem with grid

    Hi ,
    I am writting plugin for column's width which is to be set based on it's content. But unfortunately it sets width for second and third column but for first it doesn't .

    Following is the code . I am using EXT 4.2.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>GridWithAutoColumnWidthPlugin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    
    <link rel="stylesheet" type="text/css"
        href="js/resources/css/ext-all.css">
    
    <script type="text/javascript" src="js/ext-all-debug.js"></script>
    <script type="text/javascript" src="plugin/ColumnAutoWidthPlugin.js""></script>
    
    <script type="text/javascript">
    Ext.onReady(function(){
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisaa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
            { 'name': 'Homerrt', "email":"[email protected]",  "phone":"555-222-1244"  },
            { 'name': 'Margefghj', "email":"[email protected]", "phone":"555-222-125412345545"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        //autoScroll : true,
        //overflowY: 'scroll',
        //overflowX: 'scroll',
        columns: [
            { text: 'Name',  dataIndex: 'name'},
            { text: 'Email', dataIndex: 'email'},
            { text: 'Phone', dataIndex: 'phone'}
        ],
        height: 200,
        width: 200,
        margin : 20,
        plugins : ['columnautowidth'],
        renderTo: Ext.getBody()
    });
    });
    
    </script>
    </head>
    <body>
    
    </body>
    </html>
    Plugin :

    Code:
    Ext.define('my.ColumnAutoWidth', {
        extend : 'Ext.AbstractPlugin',
        alias : 'plugin.columnautowidth',
    
        constructor : function(config) {
            console.log("columnAutoWidth Plugin");
        },
    
        init : function(grid) {
            console.log("columnAutoWidth Plugin init method");
            var view = grid.getView();
            view.on('refresh', function() {
                console.log("refreshing view");
                var view = grid.getView(), store = grid.getStore(), width;
                var columns = grid.columns;
                var widthArray = [];
                for(var columnIndex = 0 ; columnIndex < columns.length; columnIndex++){
                    var columnText = columns[columnIndex].dataIndex;
                    var records = grid.store.data.items;
                    var maxWidth = 0;
                    var textMetrics = new Ext.util.TextMetrics();
                    for(var i=0;i<records.length;i++){
                        var record = records[i];
                        var actualWidth = textMetrics.getWidth(record.data[columnText]); 
                        if( actualWidth > maxWidth){
                            maxWidth = actualWidth;
                        }
                    }
                    
                    widthArray.push(maxWidth);
                }
                  
                for(var columnIndex = 0 ; columnIndex < columns.length; columnIndex++){
                    console.log(columns[columnIndex].dataIndex+"---"+widthArray[columnIndex]);
                    grid.columns[columnIndex].setWidth(widthArray[columnIndex]);
                }
                
            }, grid)
    
        }
    });

  2. #2
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337
    Answers
    62

    Default

    ExtJS provides a method that does this for you. Your plugin can be simplified to something like this:

    Code:
    Ext.define('my.ColumnAutoWidth', {
        extend: 'Ext.AbstractPlugin',
        alias: 'plugin.columnautowidth',
        init: function(grid) {
            grid.getView().on('refresh', function() {
                var columns = this.getGridColumns(),
                    length = columns.length,
                    i;
                
                for (i = 0; i < length; i++) {
                    this.autoSizeColumn(columns[i]);
                }
            });
        }
    });

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    118
    Answers
    1

    Default

    I corrected above version with
    Code:
    var columns = this.columns 
    this.view. autoSizeColumn(columns[i]);
    And after above modification it is working fine.
    But till my worry is performance. I have also added plugin for infinite grid over here which is excluded here for simplicity . But it is working fine with this plugin . My worry is , if I scroll down then some more data brought from server and added to grid. Now if above logic is going to check max width of all the row that grid or will check only last max width calculated and the width of new data just brought from server ?

    Please advice..

  4. #4
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337
    Answers
    62

    Default

    It will calculate the max column width based on the data that is loaded in the store on the client side.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    118
    Answers
    1

    Default

    But what about performance ?

Posting Permissions

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