parallax background

Adding columns dynamically to a GridPanel (Ext JS 4.x)

Digital Transformation Group LinkedIn
Calculating the scrollbar height of an iFrame (Ext JS 4.x)
May 1, 2012
Digital Transformation Group LinkedIn
Creating a dynamic TabPanel that contains dynamic GridPanels (Ext JS 4.x)
May 3, 2012

This was a little confusing to figure out because doing this is very different in the various versions of Ext JS. In this example there is a GridPanel with columns A,B,C,D and at some point within the application I want to be able to add column E.

As a guideline I  have read that you are not supposed to use headerCt objects, but I was unable to find a solution that didn’t use it that worked in 4.x.

Ext.define('', {
     extend: 'Ext.grid.GridPanel',
 columns: [
           { header: 'A', dataIndex: 'alpha' },
           { header: 'B', dataIndex: 'bravo' },
           { header: 'C', dataIndex: 'charlie' },
           { header: 'D', dataIndex: 'delta' },
 addStuff: function() {
   var eColumn = Ext.create('Ext.grid.column.Column', {
   header: 'E',
   dataIndex: 'echo',
   this.headerCt.insert(this.columns.length, eColumn);


I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

Comments are closed.