1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    shanghai,china
    Posts
    28
    Vote Rating
    0
    xiuping is on a distinguished road

      0  

    Default how to set background of panel

    how to set background of panel


    i create a panel and set its style={background:'red'},but it can't work. am i wrong?how to set a panel's background

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please try the following:

    Code:
    // css
    .myblue {
        background-color: #0000FF;
    }
    
    // js 
    Ext.create('Ext.panel.Panel', {
        id: 'mypanel',
        title: 'Hello',
        width: 200,
        height: 100,
        bodyCls: 'myblue', // create time
        html: '<p>World!</p>',
        renderTo: Ext.getBody()
    });
    
    // runtime
    // Ext.getCmp('mypanel').body.setStyle('background','red');
    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    shanghai,china
    Posts
    28
    Vote Rating
    0
    xiuping is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    Please try the following:

    Code:
    // css
    .myblue {
        background-color: #0000FF;
    }
    
    // js 
    Ext.create('Ext.panel.Panel', {
        id: 'mypanel',
        title: 'Hello',
        width: 200,
        height: 100,
        bodyCls: 'myblue', // create time
        html: '<p>World!</p>',
        renderTo: Ext.getBody()
    });
    
    // runtime
    // Ext.getCmp('mypanel').body.setStyle('background','red');
    Regards,
    Scott.

    still not work, and pop an error "Uncaught TypeError: Cannot call method 'setStyle' of undefined"

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Is this error on my example, or your code? If it is your code, then see the following changes:

    // changes:
    // mypanel was id name, now is var for panel
    // commented out bodyCls since you selected runtime approach

    Do you have 'mypanel' defined as your panel name?

    Code:
    var mypanel = Ext.create('Ext.panel.Panel', {
        //id: 'mypanel', // use for quick access, not a good idea in production code
        title: 'Hello',
        width: 200,
        height: 100,
        // bodyCls: 'myblue', // define color at create time using CSS
        html: '<p>World!</p>',
        renderTo: Ext.getBody()
    });
    
    .. make sure your panel name is correct.
    mypanel.body.setStyle('background','red');‚Äč
    Regards,
    Scott.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    shanghai,china
    Posts
    28
    Vote Rating
    0
    xiuping is on a distinguished road

      0  

    Default


    Ext.define("H5D.view.setting",{
    extend:"Ext.Panel",
    xtype:"setPanel",
    //layout:'card',
    config:{
    //style:{background:'red'},
    //cls:'x-panel',
    bodyCls:'myblue',
    renderTo:Ext.getBody(),
    width:260,
    height:260,
    model:true,
    hideOnMaskTap:false,
    hidden:true,
    centered:true,
    scrollable:false,
    items:[
    {
    xtype:'button',
    text:'red',
    },{
    xtype:'button',
    text:'yellow'
    },{
    xtype:'button',
    text:'blue',
    }
    ]
    }
    })
    first i define a panel,then i use it as follows:

    var mypanel=Ext.Viewport.add({
    xtype:'setPanel',
    id:'myPanel'
    })

    i want to set its background ,so i write codes
    Ext.getCmp("myPanel").body.setStyle({background:'red'});
    then an error emerges: "Cannot call method 'setStyle' of undefined".
    am i wrong?

Thread Participants: 1

Tags for this Thread