Jun 11, 2012, 11:27 PM
Grid View inside a tab IFrame
Hi I am having trouble trying to get this grid to fill the left over area within the IFrame in MVC3 Razor using EXT.NET 2
I have attached a screenshot of what it looks like.
Main View
I have attached a screenshot of what it looks like.
Main View
@using Ext.Net.MVC
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
var Device = CCXML.Classes.ActiveDirectory.GetDeviceName();
var mnuPhone = Html.X().Menu();
var topToolBar = Html.X().Toolbar()
.Region(Ext.Net.Region.North)
.Height(27)
.Margins("0 0 4 0")
.ItemsFromPage(this, "~/Views/Shared/_TopToolBar.cshtml");
var mnuSidebar = Html.X().Panel()
.ID("WestMenu")
.Title("Explorer")
.Margins("0 0 4 4")
.Layout(Ext.Net.LayoutType.Accordion)
.CollapseMode(Ext.Net.CollapseMode.Mini)
.Width(200)
.Region(Ext.Net.Region.West)
.ItemsFromPage(this, "~/Views/Shared/_WestMenu.cshtml");
var tabPanel = Html.X().TabPanel()
.ID("tpMain")
.Layout(Ext.Net.LayoutType.Absolute)
.Items(tpmItems => {
tpmItems.Add(Html.X().Panel().Title("Test")
.Icon(Ext.Net.Icon.ApplicationHome)
.Loader(new Ext.Net.ComponentLoader {AutoLoad = true, DisableCaching = true, Url = "/ccxml/Directories", Mode = Ext.Net.LoadMode.Frame })
);
});
}
@(Html.X().Viewport()
.Layout(Ext.Net.LayoutType.Border)
.Control(control =>
{
control.Add(topToolBar);
control.Add(mnuSidebar);
control.Add(tabPanel);
})
)
GridView Page@using Ext.Net.MVC;
@{
Layout = "~/Views/Shared/_LayoutContent.cshtml";
ViewBag.Title = "Edit Personal Directory";
}
@{
var PDirStore = Html.X().Store()
.PageSize(100)
.Buffered(true)
.AutoSync(true)
.AutoLoad(false)
.Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
.BatchActions(true)
.API(api => { api.Sync = "Directories/EditData"; api.Read = "Directories/GetData"; })
.Reader(reader => reader.Add(Html.X().JsonReader()
.Root("data")
))
.Writer(writer => writer.Add(Html.X().JsonWriter()
.Root("data")
.Encode(true)
))
))
.Model(model => model.Add(Html.X().Model()
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("ID").Type(Ext.Net.ModelFieldType.Int));
fields.Add(Html.X().ModelField().Name("Name").Type(Ext.Net.ModelFieldType.String));
fields.Add(Html.X().ModelField().Name("Phone").Type(Ext.Net.ModelFieldType.String));
})
));
var PhoneGrid = Html.X().GridPanel()
.ID("DirectoryGrid")
.Title("Personal Directory")
.InvalidateScrollerOnRefresh(false)
.DisableSelection(false)
.Store(store => store.Add(PDirStore))
.ColumnModel(columnModel =>
{
columnModel.Columns.Add(Html.X().Column()
.Text("ID")
.DataIndex("ID")
.Width(50)
.Hideable(false)
.Sortable(true));
columnModel.Columns.Add(Html.X().Column()
.Text("Name")
.DataIndex("Name")
.Width(150)
.Editor(nEdit => nEdit.Add(Html.X().TextField().AllowBlank(false)))
.Hideable(false)
.Sortable(true));
columnModel.Columns.Add(Html.X().Column()
.Text("Phone")
.DataIndex("Phone")
.Width(150)
.Editor(nEdit => nEdit.Add(Html.X().TextField().AllowBlank(false)))
.Hideable(false)
.Sortable(true));
})
.ColumnLines(true)
.View(view => view.Add(Html.X().GridView().TrackOver(true)))
.VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
.SelectionModel(selectionModel => selectionModel.Add(Html.X().RowSelectionModel()))
.Plugins(plugin => { plugin.Add(Html.X().RowEditing().AutoCancel(false)); })
.Listeners(listeners =>
{
listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
listeners.AfterRender.Delay = 100;
})
.BottomBar(bottomBar =>
{
bottomBar.Add(Html.X().Toolbar().ID("ToolBarTestRows1")
.Items(items =>
{
items.Add(Html.X().Button().ID("Add").Text("Add New Entry").Icon(Ext.Net.Icon.PhoneAdd)
.Listeners(listeners =>
{
listeners.Click.Fn = "AddNew";
})
);
items.Add(Html.X().Button().ID("Delete").Text("Remove Entry").Icon(Ext.Net.Icon.PhoneDelete)
.Listeners(listeners =>
{
listeners.Click.Fn = "DeleteEntry";
})
);
})
);
});
var cm = new Ext.Net.ComponentLoader()
{
Url = "Directories/AddDirectoryEntry",
Mode = Ext.Net.LoadMode.Frame,
LoadMask = { ShowMask = true }
};
}
<script language="javascript">
var DeleteEntry = function () {
var grid = App.DirectoryGrid,
sm = grid.getSelectionModel();
grid.deleteSelected();
grid.store.sync();
};
var AddNew = function () {
App.NewEntry.reload();
App.NewEntry.show();
};
var RefreshGrid = function () {
var grid = App.DirectoryGrid,
sm = grid.getSelectionModel();
grid.store.reload();
};
</script>
@PhoneGrid
@(Html.X().Window()
.ID("NewEntry")
.Title("Add New Entry")
.Height(300)
.Width(410)
.Modal(true)
.Hidden(true)
.Loader(cm)
.Listeners(wnd => wnd.Close.Fn = "RefreshGrid")
)
Any help would be appreciated. Thanks