Results 1 to 5 of 5

Thread: Problem with creation of dynamic ext components

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Location
    Hyderabad
    Posts
    25
    Vote Rating
    0
      0  

    Default Problem with creation of dynamic ext components

    Hi,
    I am new to extjs ,i have a requirement of creating ext components .I some have managed by using for loops but the problem is its taking more time to load and also i want to add load mask there to indicate that that particular section in loading. can anyone please help in resolving this issues.

    Thank you

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506
    Vote Rating
    296
      0  

    Default

    I'm not able to understand exactly what you are trying to do. Do you have any code that you've written so far, or do you have an example that you are trying to emulate?

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Location
    Hyderabad
    Posts
    25
    Vote Rating
    0
      0  

    Default Reply :Problem with creation of dynamic ext components

    Here i need to add some fields to be added dynamically based on the database values so for that i am getting the data through azax request and adding

    please find the below example code that i am using for adding

    for (var i = 1; i <1000; i++) {


    var container = Ext.getCmp('addTOContainer');

    var config = Ext.create('Ext.container.Container', { layout: {
    type: 'hbox'
    },
    width: 400,
    renderTo: "MYDIV",
    border: 1,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
    labelWidth: 80,
    // implicitly create Container by specifying xtype
    xtype: 'datefield',
    flex: 1,
    style: {
    padding: '10px'
    }
    },
    items: [{
    xtype: 'datefield',
    name: 'startDate',
    fieldLabel: 'Start date'
    },{
    xtype: 'datefield',
    name: 'endDate',
    fieldLabel: 'End date'
    }]
    });

    container.add(config);
    }

    This is working but a bit time taking to load,So i planned to loadmask so that it indicates that the form is loading . I tried to add loadmask but i failed.

    please let me know if i am using some false practice.

    Please let me know if there are any other ways to achieve this requirement .
    Thank You.


  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,234
    Answers
    756
    Vote Rating
    1015
      1  

    Default

    Yes, there's a problem with the way you're doing it. When you add a new component to a container, the container will layout, which means you'll trigger 1000 layouts (bad!).

    Compare:

    Code:
    Ext.require('*');
    
    Ext.onReady(function() {
    
        // Toggle me
        var suspend = true;
    
        var ct = new Ext.container.Container({
            renderTo: document.body
        });
        
        console.time('Run');
        if (suspend) {
            Ext.suspendLayouts();
        }
        for (var i = 0; i < 50; ++i) {
            ct.add({
                layout: 'hbox',
                items: [{
                    flex: 1,
                    html: 'Item ' + (i + 1) + '.1'
                }, {
                    flex: 1,
                    html: 'Item ' + (i + 1) + '.2'
                }]
            });
        }
        if (suspend) {
            Ext.resumeLayouts(true);
        }
        console.timeEnd('Run');
    
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Location
    Hyderabad
    Posts
    25
    Vote Rating
    0
      0  

    Default Problem with using 2 hbox's or 2 anchor's

    Hi evant , I tried the solution given its working fine but when i am using more than one hbox ,it is displaying empty in that particular contianer

    please find the below code

    var suspend = true;

    for (var i = 1; i < 3; ++i) {
    ct.add({
    padding:'0 0 5 0',
    layout: 'column',
    border:true,
    items:[{
    // layout:'anchor',
    columnWidth:0.6,
    items:[{
    xtype:'label',
    text:'Goal : '+i
    },{
    xtype:'textfield',
    fieldLabel:'Title of Goal',
    name:'titleOfGoal'+i,
    id:'titleOfGoal'+i,
    labelAlign: 'side',
    padding:'3 0 0 20',
    width:400,
    readOnly:true
    },{
    xtype: 'container',
    layout: 'hbox',
    border:false,
    padding:'0 0 2 0',
    items:[{
    xtype:'slider',
    name: 'weightSlider'+i,
    id: 'weightSlider'+i,
    fieldLabel:'Weight',
    labelAlign:'side',
    labelWidth:100,
    padding:'3 0 0 20',
    width:250,
    //flex:1,
    increment: 1,
    minValue: 1,
    maxValue: 100,
    tipText: function(thumb) {
    return Ext.String.format('<b>{0} %</b>', thumb.value);
    }
    },{
    xtype:'splitter'
    },{
    xtype:'textfield',
    name: 'weightValueOfSlider'+i,
    id: 'weightValueOfSlider'+i,
    width:30,
    padding:'0 0 0 5',
    readOnly:true
    }]
    },{
    xtype:'fieldset',
    items:[{
    xtype:'label',
    text:'Goal Category'
    },{
    xtype:'container',
    id:'goalCategory'+i,
    border:false
    },{
    xtype:'htmleditor',
    fieldLabel:'Description of Goals',
    name:'goalDescription'+i,
    id:'goalDescription'+i,
    anchor:'100%',
    height:100,
    readOnly:true
    }]
    },{
    xtype:'fieldset',
    items:[{
    xtype:'label',
    text:'Action Plan'
    },{
    xtype:'container',
    id:'actionPlan'+i,
    border:false
    }]
    },{
    xtype:'fieldset',
    items:[{
    xtype:'datefield',
    labelAlign:'side',
    labelWidth:150,
    padding:'10 0 5 0',
    fieldLabel:'Target Completion Date',
    name:'targetCompletionDate'+i,
    id:'targetCompletionDate'+i,
    readOnly:true
    },{
    layout:'hbox',
    border:false,
    items:[{
    xtype:'label',
    text: 'Active?',
    padding:'0 0 0 70'
    },{
    xtype:'label',
    width:30
    },{
    xtype:'checkbox',
    padding:'0 0 0 25',
    name: 'activeGoal'+i,
    id: 'activeGoal'+i,
    fieldCls:'',

    inputValue:'Active',
    boxLabel:' (This Goal is Active)',
    flex:1,
    listeners:{
    change: function(cb,nv){
    if (nv) {
    cb.boxLabelEl.update(' (This Goal is Active)');
    } else {
    cb.boxLabelEl.update(' (This Goal is Inactive)');
    }
    }
    }
    }]
    },{
    xtype:'htmleditor',
    fieldLabel:'Comments and Updates',
    name:'targetComments'+i,
    id:'targetComments'+i,
    anchor:'100%',
    height:100,
    readOnly:true
    }]
    }]
    }
    ]
    });
    }

    if (suspend) {
    Ext.resumeLayouts(true);
    }
    please let me know if i am going wrong anywhere

    Thank You .

Posting Permissions

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