Question

I have the code below to show a button in a overlay.

<div class="overlay22" id="overlay22" style="display:none;"></div>  
<div class="box22" id="box22">
    <input type="submit" value="Submit" class="buttonclick" id="buttonclick"  /> 
</div>

Can we show the cq5 form in the overlay instead of hardcoding in the overlay?

Answer 1

If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ’s dialog windows, you will need to generate them by working with CQ’s extension of the Ext JS framework.

For example, if you wanted to create a button analogous to your provided example, you’d have to write something like:

    CQ.Ext.onReady( function(){
         var button = new CQ.Ext.Button({
              text : "Submit",
              id : "buttonclick",
              cls : "buttonclick",
              renderTo : CQ.Ext.getBody(),
              listerners : {
                   click : function(){
                      // Write handler code here
                   }
              }
         });
    });

Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html

Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/