1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    49
    Vote Rating
    0
    rwankar is on a distinguished road

      0  

    Default Right way to convert existing div to a panel

    Right way to convert existing div to a panel


    Is the foll markup a valid "applyTo" element for a panel? ie. does it have everything that is required?
    Code:
    <div id="panel" class="x-hidden">
      <div class="x-panel-header">The Header</div>
      <div class="x-panel-body">The Body</div>
      <div class="x-panel-bbar">buttons</div>
    </div>
    I've noticed 2 things.
    1. I see an extra x-panel-bwrap created at the bottom. I've seen a thread that says it is required and hence will be created. Where would I specify it in my markup? What does it wrap?

    2. I don't get a blue border/background for the buttons. How would I get that?

    3. In order for the panel to "fit" will it be sufficient to specify layout as fit or do I need to enclose the main div inside a BoxComponent? If yes, how would I do that in this case?

    Thanks.

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    49
    Vote Rating
    0
    rwankar is on a distinguished road

      0  

    Default


    bump.

    Anyone?

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The complete panel DOM structure is:

    Code:
    <div class="x-panel">
    	<div class="x-panel-header">
    		<span class="x-panel-header-text">Header</span>
    	</div>
    	<div class="x-panel-tbar">Top toolbar</div>
    	<div class="x-panel-bwrap">
    		<div class="x-panel-body">Body</div>
    	</div>
    	<div class="x-panel-bbar">Bottom toolbar</div>
    	<div class="x-panel-footer">Footer</div>
    </div>

Thread Participants: 1