1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default cls for panel

    cls for panel


    I want to use css to set style for a <table> which is generated by Ext.Panel.

    Code:
    var SalesAttributesPanel = new Ext.Panel( {
    	applyTo : 'SalesAttributes',
    	border: false,
       labelAlign: 'right',
    	bodyStyle:'padding:5px 5px 0',
    	layout : 'table',
    	layoutConfig: {
        columns: 6
    	},
    	autoWidth : true,
    	autoHeight : true,
    	defaults : {
    	border: false,
    	bodyStyle:'padding:5px'
    	},
    	plain : true,
    	cls:'SalesAttributesPanel',
    	items : SalesAttributesDm
    })
    the generated page came out as

    Code:
    <div id="SalesAttributes" class="t2 x-panel SalesAttributesPanel x-panel-noborder" cellspacing="1" border="0" cellpadding="4" width="98%" style="width: auto;">
    <div id="ext-gen62" class="x-panel-bwrap">
    <div id="ext-gen63" class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-table-layout-ct" style="padding: 5px 5px 0pt; width: auto; height: auto;">
    <table class="x-table-layout" cellspacing="0">
    <tbody>
    <tr>
    <td id="ext-gen64" class="x-table-layout-cell">
    <div id="ext-comp-1021" class="x-panel x-panel-noborder">
    <div id="ext-gen65" class="x-panel-bwrap">
    <div id="ext-gen66" class="x-panel-body x-panel-body-noheader x-panel-body-noborder" style="padding: 5px;">Client</div>
    </div>
    </div>
    </td>
    <td id="ext-gen67" class="x-table-layout-cell">
    </td>
    <td id="ext-gen70" class="x-table-layout-cell">
    </td>
    <td id="ext-gen73" class="x-table-layout-cell" colspan="3">
    </td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </div>
    I don't see the specified css class of SalesAttributesPanel anywhere. therefore, I can not apply css to the generated table.

    the table I want to style has the auto generated class of x-table-layout. I do not want to apply css to that, since there maybe other tables with the same generated id. and I don't know if that class will be consistently generated.

    isn't the idea of using cls to attach it to the output html, so you can map to css spec? Do I misunderstand how cls is to be applied?

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Looks like it there to me.
    Code:
    <div id="SalesAttributes" class="t2 x-panel SalesAttributesPanel x-panel-noborder"
    You might also experiment with putting it on ctCls. You can also add classes directly to the panel body via addClass.

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    I see, it is there, but in the container div, not applied to the table. and therefore, what I applied to the descendent of SalesAttributesPanel gets overridden by the css settings of x-table-layout.

    ctCls has the same effect, it puts SalesAttributesPanel on the div container of the table. the table still has class=x-table-layout, which overrides the background I want to apply.

    addClass('SalesAttributesPanel') had no visible effect any where.

    just how is cls meant to work? as is, I am not able to control the look of any particular panel. unless I settle for having all my panels look alike.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    The classes are added to specific elements in the hierarchy as you have seen. If you want to affect the CSS in other ways, you can add classes to other Elements, using DomQuery, Ext.select, etc to find them. You should also be able to add overrides to specific classes in the panel
    HTML Code:
    .SalesAttributesPanel .x-table-layout {font-weight:bold}

  5. #5
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    yes, the last suggestion worked.

    I wish there is a way to identify an element and have some css property propagate to its container as well.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Quote Originally Posted by bhomass View Post
    yes, the last suggestion worked.

    I wish there is a way to identify an element and have some css property propagate to its container as well.
    This can be done via DomQuery selection. Look at Element.up(). Searching should find you some examples.

Thread Participants: 1