Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Add Css dynamically after components are rendered .

  1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    27

    Default Add Css dynamically after components are rendered .

    How to apply cls for a component dynamically in extjs after component is rendered.

    I need to apply it by using afterBodyEl.
    In the following way
    afterBodyEl='<span class="xyz"/>';
    My intention is in the controller i need to add dynamically css class based on the element id for each component.

    For example:
    Ext.define('Nexus.controller.updatecontroller',{
    extend:'Ext.app.Controller',
    views: ['testupdate'],
    init:function(){
    this.control({
    'testupdate':
    {
    'afterrender':this.xyz
    }

    });


    },
    xyz:function()
    {

    console.log(Ext.getCmp('check1'));
    Ext.getCmp('check1').setWidth(300);
    Ext.getCmp('check1').setFieldLabel('Last Name');
    Ext.getCmp('check1').afterBodyEl='<span class="np-info-field" />';
    Ext.getCmp('check1').msgTarget='side';
    }




    });

    Here i am able to setWidth ,FieldLabel for the 'check1' component but i am unable to add css for that dynamically Any suggestions to overcome that.

  2. #2
    Sencha User
    Join Date
    Jun 2013
    Location
    Kiama, Australia
    Posts
    25

    Default

    Why are you unable to dynamically change the CSS? There are many ways to do this. What have you tried?

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    27

    Default

    I tried only afterBodyEl with a span class attached to it. And apart from that
    i used above mechanism in my controller
    var abc=Ext.getCmp(id).bodyEl.dom.children[x];
    Ext.DomHelper.insertAfter(abc,
    {
    id : 'tagid',
    tag : 'span',
    cls : 'np-info-field'
    }, true);
    This is working fine for textfield and when it comes to combobox my image is rendered below the combobox component where as for textfield it is rendering exactly beside textfield. Any other way to do just let me know.

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Location
    Kiama, Australia
    Posts
    25

    Default

    I'm sorry jojo3091. I cannot fathom what you are trying to do. First you say you are trying to dynamically add css and then you show me you are dynamically inserting spans.

    What is it you are trying to do? Be clear about EXACTLY what you want and wrap your code in CODE tags so we can read it otherwise no-one is going to try and help.

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    27

    Default

    Ok.Sure .I will send the text of all my files which is in mvc architecture.
    I am updating.Now you can test.My problem is in the final output for textfields the image is rendered properly where as for combobox it is rendered down. Image is small info icon.

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    27

    Default

    This is app.js file


    Ext.application({
    name : 'NAP',
    appFolder : 'app',
    requires : ['NAP.view.testupdate','NAP.lib.wrappers.TextField','NAP.lib.wrappers.Combobox'],
    controllers : ['updatecontroller'],
    autoCreateViewport : true,
    launch : function() {
    console.log("Application launched");
    }
    });


    This is updatecontroller.js (controllerfile)
    Ext.define('NAP.controller.updatecontroller', {
    extend : 'Ext.app.Controller',
    views : ['testupdate'],
    init : function() {
    this.control({
    'testupdate' : {
    'afterrender' : this.pqr


    }


    });


    },

    pqr : function() {
    console.log('Inside controller1');
    Ext.Ajax.request({


    url : 'data/after.json',
    success : function(response) {
    this.verify(response);
    },
    failure : this.fail


    });



    verify = function(response) {
    var resp = JSON.parse(response.responseText);
    var size = Object.keys(resp.after).length;
    console.log("Total elements is" + size);
    for (var i = 0; i < size; i++) {
    var id = resp.after[i].id;
    console.log("Id is" + id);
    var dynoinfo = resp.after[i].dynoinfo;
    console.log("The info is" + dynoinfo);
    if (dynoinfo) {
    console.log("inside");
    Ext.getCmp(id).setDynoInfo(dynoinfo);
    Code:
                                var length=Ext.getCmp(id).bodyEl.dom.children.length
                                console.log("The length i s"+length);
                                for(var x=0;x<length;x++)
                                {
                                    var tagid = 'myid'+i;
                                    console.log("the tag id is" + tagid);
                                    var abc = Ext.getCmp(id).bodyEl.dom.children[x];
                                        Ext.DomHelper.insertAfter(abc, {
                                            id : 'tagid',
                                            tag : 'span',
                                            cls : 'np-info-field'
                                        }, true);
                                }
                                
                            }
    
    
                        }
                        console.log(Ext.getCmp('check5'));
                        var xyz=Ext.getCmp('check5').bodyEl.dom.children[0];
                        
                        
                        Ext.DomHelper.append(xyz, {
                                            id : 'mno',
                                            tag : 'span',
                                            cls : 'np-info-field'
                                        }, true);
    }, fail = function() {
    alert('error');
    }
    }


    });
    This is after.json file
    {
    "after": [
    {
    "id": "check1",
    "dynoinfo": false
    },
    {
    "id": "check2",
    "dynoinfo":true
    },

    {
    "id": "check3",
    "dynoinfo":true
    },
    {
    "id": "check4",
    "dynoinfo":true
    }
    ]
    }
    This is my view file
    Ext.define('NAP.view.testupdate', {
    extend : 'Ext.form.Panel',
    alias : 'widget.testupdate',
    height:500,
    initComponent : function() {
    this.items={
    items:[
    {
    xtype:'nprtextfield',
    fieldLabel: 'First Name',
    required:true,
    id:'check1'
    },
    {
    xtype:'nprtextfield',
    fieldLabel:'NickName',
    recommended:true,
    id:'check2'
    },
    {
    xtype:'nprtextfield',
    fieldLabel:'MiddleName',
    id:'check3'
    },
    {
    xtype:'nprcombobox',
    fieldLabel:'State' ,
    id:'check4'
    },
    {
    xtype:'nprcombobox',
    fieldLabel:'Country',
    id:'check5'
    }
    ]
    };

    this.callParent();
    }

    });




    These are wrappers used in view
    This is the file of Textfield


    Ext.define('NAP.lib.wrappers.TextField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.nprtextfield',
    info: false,


    labelSeparator:'',
    dynoinfo:false,


    constructor: function (cnfg) {
    this.callParent(arguments);
    this.initConfig(cnfg);
    },

    beforeRender: function () {
    this.labelSeparator = '';
    if(this.dynoinfo)
    {
    console.log(this.dynoinfo);
    this.setDynoInfo(this.dynoinfo);
    }
    this.callParent();
    },

    setDynoInfo :function(val)
    {
    this.dynoinfo=val;

    },

    getDynoInfo :function()
    {
    return this.dynoinfo;
    }

    });




    This is the file of Combobox


    Ext.define('NAPIER.lib.wrappers.Combobox', {
    extend : 'Ext.form.ComboBox',
    alias : 'widget.nprcombobox',

    url : 'app/data/npcombobox.json',
    queryId : '',

    store : [],
    displayField : 'displayField',
    valueField : 'valueField',
    connectid : 'id',
    dynoinfo:false,

    constructor : function(cnfg) {
    var me = this;
    this.callParent(arguments);
    },
    initComponent : function() {
    var me = this;

    me.store = Ext.create('Ext.data.Store', {
    fields : [me.valueField, me.displayField, me.connectid],
    proxy : {
    type : 'ajax',
    url : me.url,
    params : {
    queryId : me.queryId
    },
    api : {
    read : me.url
    },
    reader : {
    type : 'json',
    root : 'fields'
    }
    }
    })
    this.callParent(arguments);
    },
    beforeRender: function () {
    if(this.dynoinfo)
    {
    console.log(this.dynoinfo);
    this.setDynoInfo(this.dynoinfo);
    }
    this.callParent();
    },

    setDynoInfo :function(val)
    {
    this.dynoinfo=val;

    },

    getDynoInfo :function()
    {
    return this.dynoinfo;
    }
    });
    The json for above wrapper is
    {


    "success":true,


    "fields": [


    {"valueField": "in","displayField":"india","id":"1"},


    {"valueField": "au","displayField":"australia","id":"2"},


    {"valueField": "ja","displayField":"japan","id":"3"},


    {"valueField": "ch","displayField":"china","id":"4"}


    ]


    }
    This is my ViewPort
    Ext.define('NAP.view.Viewport', {
    extend : 'Ext.container.Viewport',
    height:800,
    initComponent : function() {


    this.items = {

    items:[
    {
    xtype:'testupdate'

    }
    ]
    };


    this.callParent();
    }
    });

    My css code
    Code:
    .np-info-field {
           background-image: url("../images/u191_normal.png");
        background-position: left center;
        background-repeat: no-repeat;
        margin-right: -22px;
        padding-right: 22px;
      
        vertical-align:top;
    }

  7. #7
    Sencha User
    Join Date
    Jun 2013
    Location
    Kiama, Australia
    Posts
    25

    Default

    wrap your code in CODE tags so we can read it otherwise no-one is going to try and help.

  8. #8
    Sencha User
    Join Date
    May 2013
    Posts
    27

    Default

    my final output is like this
    Now you can easily understand by looking at combobox where image is placed bottom of the combobox
    Attached Images Attached Images

  9. #9
    Sencha User
    Join Date
    Jun 2013
    Location
    Kiama, Australia
    Posts
    25

    Default

    OK, so you are simply trying to get an icon to sit on the right hand side of your fields. Try this...

    Code:
    .np-info-field {
           background-image: url("../images/u191_normal.png");
        background-position: left center;
        float: left;
        background-repeat: no-repeat;
        margin-right: -22px;
        padding-right: 22px;
      
        vertical-align:top;
    }

  10. #10
    Sencha User
    Join Date
    May 2013
    Posts
    27

    Default

    I have tried before only.But it does not work. let me know any other hints or possibilities that can work.I am still trying on that.

Page 1 of 2 12 LastLast

Posting Permissions

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