Thanks for your help, I took some reference from your suggested example and finally implemented using Window as Modal. Is there any better approach than what I have below ?
Also, I've details grid(gpFooSubCategory) on my page which refresh on master grid(gpFooCategory) row select. I'm doing Ajax proxy for details grid store But somehow I'm not getting selected row value from master grid, which I need to pass as extra parameter into Ajax call. Can you please take a look?
@model TestApp.Models.FooViewModel
@{
ViewBag.Title = "FooSetup";
Layout = null;
var X = Html.X();
}
<script>
var changeCellColor = function (value, metaData) {
metaData.style = "background-color:" + '#' + value;
return value;
}
var onCategorySaveSuccess = function (grid, data) {
grid.show();
grid.getStore().loadData(data);
};
</script>
@(Html.X().ResourceManager().Theme(Ext.Net.Theme.Default))
@(X.Window()
.ID("windowCategory")
.Title("Foo Category")
.Icon(Icon.Application)
.Height(200)
.Width(520)
.BodyStyle("background-color: #fff;")
.Hidden(true)
.Resizable(false)
.Modal(true)
.Layout(LayoutType.Fit)
.Items(
Html.X().FormPanel()
.ID("fpCategory")
.Frame(true)
.Width(500)
.DefaultAnchor("100%")
.DefaultButton("1")
.FieldDefaults(d =>
{
d.LabelAlign = LabelAlign.Left;
})
.Items(
Html.X().Hidden().Name("FooCategoryID"),
Html.X().TextField().Name("FooCategoryDescription").FieldLabel("Foo Category Desc."),
Html.X().ComboBox().Name("FooColorID").Items(ViewBag.FooColorList).FieldLabel("Color"),
Html.X().Checkbox().Name("Active").FieldLabel("Active")
)
.Buttons(
Html.X().Button()
.Text("Save")
.Icon(Icon.Disk)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("CategorySubmit");
de.Click.EventMask.ShowMask = true;
de.Click.Success = "onCategorySaveSuccess(response)";
}),
Html.X().Button()
.Text("Reset")
.Handler("this.up('form').getForm().reset(); this.up('form').defaultButton='1';")
)
)
)
@(
Html.X().FormPanel()
.ID("fpFooSetup")
.Title("Foo Setup")
.BodyPadding(10)
.DefaultAnchor("100%")
.Items(
X.Container()
.LayoutConfig(l => l.Add(new VBoxLayoutConfig() { Align = VBoxAlign.Left }))
.MarginSpec("0 0 0 10")
.Items(
Html.X().GridPanel().ID("gpFooCategory")
.Title("Foo Category")
.Width(550)
.Height(300)
.ForceFit(true)
.SetAutoScroll(true)
.Store(Html.X().Store()
.AutoLoad(true)
.ID("FooCategoryStore")
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetFooCategory"))
.Reader(X.JsonReader().RootProperty("data"))
)
.Model(Html.X().Model().IDProperty("FooCategoryID")
.Fields(
new ModelField("FooCategoryID"),
new ModelField("FooCategoryDescription"),
new ModelField("FooColorID"),
new ModelField("Active")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("FooCategoryID").Hidden(true),
Html.X().Column().Text("Category Desc.").DataIndex("FooCategoryDescription").Width(100),
Html.X().Column().Text("Color").DataIndex("FooColorID").Renderer("changeCellColor"),
Html.X().CheckColumn().Text("Active").DataIndex("Active").Width(50),
Html.X().CommandColumn()
.Width(70)
.Commands(
//Html.X().GridCommand()
// .CommandName("Delete")
// .Icon(Icon.Delete)
// .Text("Delete"),
Html.X().GridCommand()
.CommandName("Edit")
.Icon(Icon.NoteEdit)
.Text("Edit")
)
.Listeners(ls => ls.Command.Handler = "App.fpCategory.getForm().loadRecord(record);App.windowCategory.show();")
)
.SelectionModel(
Html.X().RowSelectionModel()
.Mode(SelectionMode.Single)
.Listeners(l =>
{
l.Select.Handler = "App.gpFooSubCategory.store.reload();";
})
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
.Icon(Icon.Add)
.Handler("App.fpCategory.getForm().reset();App.windowCategory.show();")
)
),
Html.X().GridPanel()
.ID("gpFooSubCategory")
.Title("Foo Sub-Category")
.Width(550)
.Height(200)
.MarginSpec("0 10 10 0")
.SetAutoScroll(true)
.Store(Html.X().Store().ID("FooSubCategoryStore")
.AutoLoad(false)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetFooSubCategoryById"))
.Reader(X.JsonReader().RootProperty("data"))
.ExtraParams(p => p.Add(new Ext.Net.Parameter
{
Name = "FooCategoryId",
Value = "Ext.getCmp('#{gpFooCategory}') && #{gpFooCategory}.getSelectionModel().hasSelection() ? #{gpFooCategory}.getSelectionModel().getSelected().data.FooCategoryID : -1",
Mode = ParameterMode.Raw,
}))
)
.Model(Html.X().Model().IDProperty("FooSubCategoryID")
.Fields(
new ModelField("FooSubCategoryID"),
new ModelField("FooCategoryID"),
new ModelField("FooSubCategoryDescription"),
new ModelField("ChangeOver"),
new ModelField("Active")
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("FooSubCategoryID").Hidden(true),
Html.X().Column().Text("FooCategoryID").DataIndex("FooCategoryID").Hidden(true),
Html.X().Column().Text("Foo Sub-Category Desc.").DataIndex("FooSubCategoryDescription").Width(100),
Html.X().Column().Text("ChangeOver").DataIndex("ChangeOver").Width(50),
Html.X().Column().Text("Active").DataIndex("Active").Width(50)
)
)
)
)