Results 1 to 5 of 5

Thread: How to create a table containing grids

  1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1
    Vote Rating
    1
      0  

    Default Answered: How to create a table containing grids

    I want to have a table of 3x3 that looks like the following. I want it in a table so that I can control the position of the grid.

    Cell_1_is_empty Cell_2_is_a_grid Cell_3_is_empty
    Cell_1_is_a_grid Cell_2_is_a_grid Cell_3_is_a_grid
    Cell_1_is_empty Cell_2_is_a_grid Cell_3_is_empty

    I tried the following, but it errors out this: this.createUserGrid is not a function What is the right way to do this? Thanks.
    Code:
    Ext.define("Iip.view.iip.adm.AclTab", {
    	extend: "Ext.panel.Panel",
    	alias:"widget.acl-tab",
        title: Ext.ComponentQuery.query("#acl-menu-item")[0].title,
        controllers: ["iip.adm.Acls"],
    	id: "acl-tab",
    	layout: {type: "table", columns: 3},
    	
    	createUserGrid: function() {
    		return Ext.create('Ext.grid.Panel', {
    			title: 'Simpsons',
    			....
    			columns: [
    				...
    			],
    			height: 200,
    			width: 400,
    		});
    	},
    	
    	items: [
    		{
    			html: ""
    		},
    		{
    			html: this.createUserGrid()
    		},
    		{
    			html: ""
    		},
    		{
    			html: "Cell A content"
    		},
    		{
    			html: "Cell B content"
    		},
    		{
    			html: "Cell C content"
    		},
    		{
    			html: ""
    		},
    		{
    			html: "Cell B content"
    		},
    		{
    			html: ""
    		}		
    	]
    });

  2. You should fix as below:
    Code:
    Ext.define("Iip.view.iip.adm.AclTab", {
        extend: "Ext.panel.Panel",
        alias:"widget.acl-tab",
        title: Ext.ComponentQuery.query("#acl-menu-item")[0].title,
        controllers: ["iip.adm.Acls"],
        id: "acl-tab",
        layout: {type: "table", columns: 3},
        
        createUserGrid: function() {
            return Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                ....
                columns: [
                    ...
                ],
                height: 200,
                width: 400,
            });
        },
        
        initComponent: function(){
            Ext.apply(this, {
                items: [
                    {
                        html: ""
                    },
                    //{
                    //    html: this.createUserGrid()
                    //},
                        this.createUserGrid()
                     ,
                    {
                        html: ""
                    },
                    {
                        html: "Cell A content"
                    },
                    {
                        html: "Cell B content"
                    },
                    {
                        html: "Cell C content"
                    },
                    {
                        html: ""
                    },
                    {
                        html: "Cell B content"
                    },
                    {
                        html: ""
                    }       
                ]
            });
            this.callParent(arguments);
        }
    });

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    Try this
    Code:
    Ext.define("Iip.view.iip.adm.AclTab", {
        extend: "Ext.panel.Panel",
        alias:"widget.acl-tab",
        title: Ext.ComponentQuery.query("#acl-menu-item")[0].title,
        controllers: ["iip.adm.Acls"],
        id: "acl-tab",
        layout: {type: "table", columns: 3},
        
        createUserGrid: function() {
            return Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                ....
                columns: [
                    ...
                ],
                height: 200,
                width: 400,
            });
        },
        
        initComponent: function(){
            Ext.apply(this, {
                items: [
                    {
                        html: ""
                    },
                    {
                        html: this.createUserGrid()
                    },
                    {
                        html: ""
                    },
                    {
                        html: "Cell A content"
                    },
                    {
                        html: "Cell B content"
                    },
                    {
                        html: "Cell C content"
                    },
                    {
                        html: ""
                    },
                    {
                        html: "Cell B content"
                    },
                    {
                        html: ""
                    }       
                ]
            });
            this.callParent(arguments);
        }
    });

  4. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1
    Vote Rating
    1
      0  

    Default

    That got rid of the error. However, the second cell in the first row (where I call createUserGrid()) shows text of a grid object, not a grid with rows and columns. How do I have a grid in a cell? Thanks.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    You should fix as below:
    Code:
    Ext.define("Iip.view.iip.adm.AclTab", {
        extend: "Ext.panel.Panel",
        alias:"widget.acl-tab",
        title: Ext.ComponentQuery.query("#acl-menu-item")[0].title,
        controllers: ["iip.adm.Acls"],
        id: "acl-tab",
        layout: {type: "table", columns: 3},
        
        createUserGrid: function() {
            return Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                ....
                columns: [
                    ...
                ],
                height: 200,
                width: 400,
            });
        },
        
        initComponent: function(){
            Ext.apply(this, {
                items: [
                    {
                        html: ""
                    },
                    //{
                    //    html: this.createUserGrid()
                    //},
                        this.createUserGrid()
                     ,
                    {
                        html: ""
                    },
                    {
                        html: "Cell A content"
                    },
                    {
                        html: "Cell B content"
                    },
                    {
                        html: "Cell C content"
                    },
                    {
                        html: ""
                    },
                    {
                        html: "Cell B content"
                    },
                    {
                        html: ""
                    }       
                ]
            });
            this.callParent(arguments);
        }
    });

  6. #5
    Sencha User
    Join Date
    Mar 2008
    Posts
    150
    Answers
    1
    Vote Rating
    1
      0  

    Default

    that works like a charm. Thanks.

Posting Permissions

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