PDA

View Full Version : [CLOSED] Grid Panel Inside Jquery Tab



maxfareday
Sep 04, 2014, 8:46 PM
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?



@{
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>

Daniil
Sep 05, 2014, 7:30 AM
Hi @maxfareday,

Welcome to the Ext.NET forums!

I think a GridPanel's Layout setting does nothing in your scenario. Actually, a GridPanel's Layout is not supposed to be used at all, because a GridPanel doesn't support Items. Though, a container's Items is a subject for a Layout to deal with.

So, you put a GridPanel into a <div> and it's out of Ext.NET context to calculate a GridPanel's size to fit something. I think that you and/or jQuery are supposed to do that in your scenario.