1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    6
    Vote Rating
    0
    Veritus is on a distinguished road

      0  

    Default Difference between baseCls, cmpCls and cls

    Difference between baseCls, cmpCls and cls


    Hi Sencha Developer,

    i'm new to sencha touch and currently i'am working on a custom panel for my project. For styling, i discovered the 3 options: baseCls, cmpCls and cls.

    It would be great if someone could explain me the differences. i already tested all 3 options and i could't recognize a visual difference.

    kind regards,

    veri
    Last edited by Veritus; 30 Sep 2010 at 8:16 AM. Reason: Typo

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      1  

    Default


    baseCls is the base CSS class to apply to a component's element when it is rendered. It is defined in all visual components and very rarely should be overwritten. For example baseCls of Panel is "x-panel". If you change it in your subclass or instance of Panel, it will not inherit the default look and feel defined by Sencha Touch css files and you will have to do your own styling.

    cmpCls should be used when you create an extended component. It will be appended to element's class attribute of the Component when it is rendered. For example:
    Code:
    MyPanel = Ext.extend(Ext.Panel, {
        cmpCls: 'my-panel',
        ...
    });
    The rendered html will look something like this: <div class="x-panel my-panel">...</div>

    cls should be used when you create an instance of a component. Its value will also be appended to the class attribute.

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    6
    Vote Rating
    0
    Veritus is on a distinguished road

      0  

    Default


    Thank you very much elishnevsky for this explanation. Now the hole thing is clear.

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    14
    Vote Rating
    0
    napsys is on a distinguished road

      0  

    Default


    Excellent. Thanks. Just what I was looking for.

  5. #5
    Ext User
    Join Date
    Sep 2010
    Posts
    6
    Vote Rating
    0
    Veritus is on a distinguished road

      0  

    Default


    I followed that explanation and used the cls option of my main panel instance (normal panel, not extended). Now i have the problem that the height and width of the css class aren't correctly delivered to the main panel.

    Here an example:

    CSS:
    Code:
    .custom-mainpanel {
    width: 600;
    height: 300;
    }
    JS:
    Code:
    var mainPanel = new Ext.Panel({
    			cls: 'custom-mainpanel',
    			fullscreen: false,
    			floating: true,
    			hideOnMaskTap: false
    		}).show();
    When i view the result vie firebug, the mainPanel has a height of 481px and a width of 600px. Where does the additional 181px come from?

    Hope someone can give me a hint.

    kind regards

    EDIT: i found out that it depends on the dockeditems of the panel.

Similar Threads

  1. [2.??] Problems with baseCls
    By alibaba69 in forum Ext 2.x: Bugs
    Replies: 0
    Last Post: 24 Dec 2008, 5:49 AM
  2. [2.2] Panel.js hardcodes baseCls
    By macserv in forum Ext 2.x: Bugs
    Replies: 2
    Last Post: 20 Dec 2008, 7:07 AM
  3. Change baseCls for a checkbox
    By puchacz in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Aug 2008, 12:15 AM
  4. Custom CSS, cls, baseCls ...etc confusion
    By rich_montana in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 23 Jul 2008, 7:21 PM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar