Results 1 to 4 of 4

Thread: [SOLVED] columnModel: widthchange event

  1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    186
    Vote Rating
    0
      0  

    Default [SOLVED] columnModel: widthchange event

    I am not sure whether it is my fault or it is a bug so I post here.

    Grid Example: http://www.extjs.com/deploy/dev/exam...rray-grid.html
    My adaption adding the 'widthchange' event: http://luzern.nct.ch/ext/example24.html

    My problem is that I can't get the widthchange event.

    Code:
    //scroll down to see the relevant (red) code
    Ext.onReady(function(){
      
    	    	// NOTE: This is an example showing simple state management. During development,
    	        // it is generally best to disable state management as dynamically-generated ids
    	        // can change across page loads, leading to unpredictable results.  The developer
    	        // should ensure that stable state ids are set for stateful components in real apps.
    	        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
    	        var myData = [
    	            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    	            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    	            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    	            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    	            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    	            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    	            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    	            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    	            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    	            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
    	            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    	            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    	            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    	            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    	            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    	            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    	            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
    	            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    	            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
    	            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
    	            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    	            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    	            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
    	            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    	            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
    	            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    	            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
    	            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
    	            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    	        ];
    
    	        // 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;
    	        }
    
    	        // create the data store
    	        var store = new Ext.data.SimpleStore({
    	            fields: [
    	               {name: 'company'},
    	               {name: 'price', type: 'float'},
    	               {name: 'change', type: 'float'},
    	               {name: 'pctChange', type: 'float'},
    	               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    	            ]
    	        });
    	        store.loadData(myData);
    
    	        // create the Grid
    	        var grid = new Ext.grid.GridPanel({
    	            store: store,
    	            columns: [
    	                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
    	                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
    	                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
    	                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
    	                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    	            ],
    	            stripeRows: true,
    	            autoExpandColumn: 'company',
    	            height:350,
    	            width:600,
    	            title:'Array Grid'
    	        });
    
    	        grid.render('grid-example');
    
    	        function widthchange( cm, index, newWidth )
    	        {
    				alert( "index: "+index );
    	        }
    	        
    	        grid.getColumnModel().on('widthchange', widthchange, this );
    
    });

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      0  

    Default

    Use the GridPanel's columnresize event.

    The widthchange event is used internally by the GridPanel to change its View. It then fires its own event which you use.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      0  

    Default

    And I didn't just "know" that. I did your debugging for you:

    Longtime Sencha engineer. Now surplus to requirements apparently...

  4. #4
    Ext User
    Join Date
    Mar 2008
    Posts
    186
    Vote Rating
    0
      0  

    Default

    Thank you very much for your help. When a event is documented in the API I expect that the event is public and working. But as I see I'll have to pay attention. Thx.

Posting Permissions

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