Hybrid View

  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    20
    Vote Rating
    0
    venkateshwar is on a distinguished road

      0  

    Default Answered: create containers dynamically in extjs

    Answered: create containers dynamically in extjs


    As a step to learn extjs, I am trying to design Sudoku game which has 81 blocks in it. To create 81 blocks, should I need to repeat the below code 81 times? or is there any way to dynamically create 81 blocks inside a single parent block?

    //inside parent container
    {
    xtype: 'container',
    border: 1,
    height: 30,
    style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'}
    }


    I tried making it in to a function and call it in for loop for 81 times but this failed with many console errors in chrome with no result. I am using `Sencha extjs 4.1.1a`.


    Here is my complete code:

    Ext.onReady(function(){
    Ext.create('Ext.container.Container', {
    layout: {
    type: 'column'
    },
    width: 400,
    renderTo: Ext.getBody(),
    border: 1,
    height: 300,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
    width: 50
    },
    items: [{
    xtype: 'container',
    border: 1,
    id: '21',
    height: 30,
    style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'}
    }]
    });
    });

  2. Hi
    Try following code:

    Code:
    Ext.onReady(function(){
    Ext.create('Ext.container.Container', {
    layout: {
    type: 'column'
    },
    width: 400,
    renderTo: Ext.getBody(),
    border: 1,
    height: 300,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
    width: 50
    },
    items:this.getItems() 
    });
    getItems:function(){
      var items=[];
     for(var i=0;i<81;i++){
       items.push(
       {
         xtype: 'container',
         border: 1,
         height: 30,
        style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'} 
      }      
    )
    }
      return items;
    
    }
    });

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi
    Try following code:

    Code:
    Ext.onReady(function(){
    Ext.create('Ext.container.Container', {
    layout: {
    type: 'column'
    },
    width: 400,
    renderTo: Ext.getBody(),
    border: 1,
    height: 300,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
    width: 50
    },
    items:this.getItems() 
    });
    getItems:function(){
      var items=[];
     for(var i=0;i<81;i++){
       items.push(
       {
         xtype: 'container',
         border: 1,
         height: 30,
        style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'} 
      }      
    )
    }
      return items;
    
    }
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread