Mayank Saxena
Mayank Saxena

Reputation: 99

Not able to create UI Controls at runtime

I am trying to create a screen on which I have a Panel. The main Panel has another Panel and this Panel has a Grid which has four HBoxes, and each HBox finally has a Button.

  onInit:function(){

        oMainPanel.removeAllContent();
        var oHbox1 = new sap.m.HBox(jQuery.sap.uid());
        var oHbox2 = new sap.m.HBox(jQuery.sap.uid());
        var oHbox3 = new sap.m.HBox(jQuery.sap.uid());
        var oHbox4 = new sap.m.HBox(jQuery.sap.uid());



        var oPanel ;
        var oGrid;
        for (var i = 0; i < 4; i++) {
               oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
                hSpacing: 1,
                vSpacing: 1,
                content: [oHbox1,oHbox2,oHbox3,oHbox4]
            });

             oPanel = new sap.m.Panel(jQuery.sap.uid(),{

                headerText: "Some Text",
                expandable: true,
                expanded: true,
                width:"100%",
                content:[oGrid]

            });
            jQuery.sap.delayedCall(100, this, function() {

        });
        oMainPanel.addContent(oPanel);
        }

I can see the content in each HBox, but only for the last Panel. I think these are being overlapped. How can I display the content of all the HBoxes in all Panels?.

Upvotes: 0

Views: 91

Answers (2)

Mayank Saxena
Mayank Saxena

Reputation: 99

I solved this problem by using the forEach instead of for loop.

Upvotes: 0

Juan
Juan

Reputation: 549

You are trying to use the same instances of HBox as content of different Grids. You need to create a new instance for each Panel.

Try doing something like:

 oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
                hSpacing: 1,
                vSpacing: 1,
                content: [new sap.m.HBox(), new sap.m.HBox(), 
                          new sap.m.HBox(), new sap.m.HBox()]

or initialize your variables (oHbox1, oHbox2, etc) inside the loop

Upvotes: 2

Related Questions