I was able to create a tabstrip with three tabs under it. And also able to create a tabstrip under each tab.
tabstrip1.view.js
var page1 = new sap.m.Page("p1",{title:"Main Page"});
var tabstrip1 = new sap.ui.commons.TabStrip("ts1",{
tabs:[
new sap.ui.commons.Tab("t1",{text:"A"}),
new sap.ui.commons.Tab("t2",{text:"B"}),
new sap.ui.commons.Tab("t3",{text:"C"})
]});
var substrip1 = new sap.ui.commons.TabStrip("ss1",{
tabs:[
new sap.ui.commons.Tab("t11",{text:"A1"}),
new sap.ui.commons.Tab("t12",{text:"A2"})
]
});
var substrip2 = new sap.ui.commons.TabStrip("ss2",{
tabs:[
new sap.ui.commons.Tab("t21",{text:"B1"}),
new sap.ui.commons.Tab("t22",{text:"B2"})
});
var substrip3 = new sap.ui.commons.TabStrip("ss3",{
tabs:[
new sap.ui.commons.Tab("t31",{text:"C1"}),
new sap.ui.commons.Tab("t32",{text:"C2"})
]});
sap.ui.getCore().byId("t1").addContent(substrip1);
sap.ui.getCore().byId("t2").addContent(substrip2);
sap.ui.getCore().byId("t3").addContent(substrip3);
page1.addContent(tabstrip1);
return page1;
which gave me this output:
a space is created under each tab and under tabstrip...and each tab is not directly coming under tabstrip.. how to solve this problem? please help