Sep 04, 2014, 8:46 PM
[CLOSED] Grid Panel Inside Jquery Tab
I have multiple JQuery tabs that contain ext MVC grid panels. Each of these tabs are dynamic in data and number of tabs. These grid panels are also set to Fit Layout. The first active tab is the only tab that has the grid panel layout rendered correctly.
If i specify a width and height, the grid panels load fine in each tab.
If i run the function "doLayout()" on the grid panel, this will also fix the layout. However on larger tables (data and complexity), it seems they have not finished rendering and the doLayout does not function.
Is there a way i can use the fit layout with large datasets and more complex grid panels inside the JQuery Tabs?
If i specify a width and height, the grid panels load fine in each tab.
If i run the function "doLayout()" on the grid panel, this will also fix the layout. However on larger tables (data and complexity), it seems they have not finished rendering and the doLayout does not function.
Is there a way i can use the fit layout with large datasets and more complex grid panels inside the JQuery Tabs?
@{
var testData1 = new object[]
{
new object[] {"A", 1},
new object[] {"B", 2},
new object[] {"C", 3},
new object[] {"D", 4},
new object[] {"E", 5}
};
var testData2 = new object[]
{
new object[] {"F", 6},
new object[] {"G", 7},
new object[] {"H", 8},
new object[] {"I", 9},
new object[] {"J", 10}
};
var testDataCollection = new object[]
{
testData1,
testData2
};
}
<div>
<div id="test-tabs" >
<ul>
@for (int i = 0; i < testDataCollection.Count(); i++)
{
<li>
<a href="#test-tabs-@i-table" style="color:inherit" class="basic_tab_button">Tab @i</a>
</li>
}
</ul>
@for (int i = 0; i < testDataCollection.Count(); i++)
{
<div id="test-tabs-@i-table" style="padding: 0px;">
@(Html.X().GridPanel()
.ID(i +"-table")
.Layout(LayoutType.Fit)
.Store(Html.X().Store()
.SortOnFilter(false)
.Model(Html.X().Model().Fields(
new ModelField("name", ModelFieldType.String),
new ModelField("number", ModelFieldType.Int))
).DataSource(testDataCollection[i])
)
.ColumnModel(
Html.X().Column().DataIndex("name").Text("Name"),
Html.X().Column().DataIndex("number").Text("Number").Flex(1)
))
</div>
}
</div>
</div>
This is the javascript to get these tabs to work with small data sets <script>
$("#test-tabs").tabs({
activate: function (event, ui) {
var index = ui.newTab.index();
var elm = Ext.getCmp(index + "-table");
elm.doLayout();
}
});
</script>
Last edited by Daniil; Sep 12, 2014 at 10:16 AM.
Reason: [CLOSED]