The view code which is loaded with the trigger field that loads the picker window
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Sample</title>
<script src="~/Resources/Javascript.js"></script>
<link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
</head>
<body>
@(Html.X().ResourceManager())
<header>
<a href="http://www.ext.net/"><img src="http://speed.ext.net/identity/extnet-logo-white-large.png" class="logo"/></a>
</header>
@using (Html.BeginForm()) {
@(Html.X().Panel()
.Title(Model.Title)
.Height(215)
.Width(350)
.Frame(true)
.Collapsible(true)
.Cls("box")
.BodyPadding(5)
.DefaultButton("Button1")
.Layout(LayoutType.Anchor)
.DefaultAnchor("100%")
.Items(Html.X().TextArea()
.Name("message")
.EmptyText(Model.TextAreaEmptyText)
.FieldLabel("Message")
.Height(85),
Html.X().TriggerField().ID("orgId")
.EmptyText("Select organization")
.FieldLabel("Organization")
.Editable(false).Tag("ORGANIZATION").Triggers(t => t.Add(Html.X().FieldTrigger().Tag("ORGANIZATION")
.Icon(TriggerIcon.Search))).Listeners(l => l.TriggerClick.Handler = "triggerClick(this, trigger, this.getTag(), true, 0, false, null, #{SinglePickWindow});"),
Html.X().TriggerField().ID("countryId")
.EmptyText("Select country")
.FieldLabel("Country")
.Editable(false).Tag("COUNTRY").Triggers(t => t.Add(Html.X().FieldTrigger().Tag("COUNTRY")
.Icon(TriggerIcon.Search))).Listeners(l => l.TriggerClick.Handler = "triggerClick(this, trigger, this.getTag(), true, 0, false, null, #{SinglePickWindow});")
)
.Buttons(Html.X().Button()
.ID("Button1")
.Text("Submit")
.Icon(Icon.Accept)
.DirectClickAction("SampleAction")
)
)
@(Html.Partial("SingleSelectPickerWindow"))
}
</body>
</html>
Partial view that load the picker window
@(Html.X().Window().ID("SinglePickWindow").Hidden(true)
.Width(450).Height(450).Modal(true).Layout(LayoutType.Card)
.Closable(false).CloseAction(CloseAction.Destroy)
.Listeners(events => events.Show.Handler = "pickerGridShow(#{gridSelector1})")
.Items(i => i.Add((@Html.X().Panel().AutoScroll(true).ID("MainWindowPanel3")
.Items(it => it.Add((@Html.X().GridPanel().ID("gridSelector1").Layout("Fit")
.Hidden(true)
.ColumnModel(@Html.X().CommandColumn().Width(110)
.Commands(
@Html.X().GridCommand().CommandName("Select").Icon(Icon.ApplicationGo)
.Text("Select"),
@Html.X().GridCommand().CommandName("Description").Icon(Icon.ApplicationViewDetail)
)
.Listeners(ls => ls.Command.Handler = "SetValue(command, record, #{gridSelector1});"))
.SelectionModel((@Html.X().CheckboxSelectionModel().Mode(SelectionMode.Single)
))
))
)
))
)
.Title("Select Data")//LBL_PICK_WINDOW_TITLE_TEXT
.BottomBar(
@Html.X().PagingToolbar().ID("gridPaging1")
.DisplayInfo(true)
.DisplayMsg("Out of")
.EmptyMsg("Out of")
)
.Buttons(b => b.Add(
(@Html.X().Button()
.Text("Cancel")
.Icon(Icon.Accept)
.Listeners(l => l.Click.Handler = "#{SinglePickWindow}.hide();")
)
)))
Java Script File
Ext.define('ORGANIZATION', {
extend: 'Ext.data.Model',
fields: ['OrganizationId', 'Title', 'Description']
});
Ext.define('COUNTRY', {
extend: 'Ext.data.Model',
fields: ['CountryId', 'Title', 'Description']
});
var pickerGridShow = function (grid) {
debugger;
var paging;
paging = Ext.getCmp("gridPaging1");
if (paging != null) {
paging.bindStore(triggerStore);
}
triggerStore.load({
params: { "tableName": modelName },
scope: this,
callback: function (records, operation, success) {
debugger;
//the operation object contains all of the details of the load operation
if (success) {
if (grid != null) {
var columns = grid.headerCt.getGridColumns();
debugger;
if (columns.length > 2) {
for (var k = 0; k < (columns.length) ; k++) {
if (columns.length == 2) break;
if (columns[k].dataIndex != "") {
grid.removeColumn(k, true);
k = 0;
}
}
}
//this is the dynamic section of the column that needs to be created
for (var j = 0; j < triggerStore.model.getFields().length; j++) {
var title = triggerStore.model.getFields()[j].name;
if (title != "id") {
if (title == "IsPrimary") {
var eColumn = Ext.create('Ext.grid.column.CheckColumn', { header: title, dataIndex: title });
//grid.addColumn(eColumn, true);
grid.insertColumn(j + 1, eColumn, true);
}
else {
var eColumn = Ext.create('Ext.grid.column.Column', { header: title, dataIndex: title });
//grid.addColumn(eColumn, true);
grid.insertColumn(j + 1, eColumn, true);
}
}
}
// grid.selModel = Ext.create('Ext.selection.CheckboxModel', { checkOnly: true, injectCheckbox: 1 });
grid.getStore().loadData(records);
// grid.store = triggerStore;
//grid.bindStore(triggerStore);
grid.getView().bindStore(triggerStore);
// grid.reconfigure(triggerStore, grid.columns);
grid.getView().refresh();
grid.doLayout();
//gridPanel.updateLayout();
//now let's get the item from the triggerPanel
if (grid.getTag() != null) {
var trgItem = grid.getTag().getValue();
if (trgItem != null && trgItem.length > 0) {
var items = trgItem.split("^");
if (items.length > 0) {
var split = items[0].split(",");
var record = new Array();
for (var i = 0; i < split.length; i++) {
record[i] = triggerStore.findRecord(triggerStore.model.getFields()[0].name, split[i]);
}
}
else {
var split = trgItem.split(",");
var record = new Array();
for (var i = 0; i < split.length; i++) {
record[i] = triggerStore.findRecord(triggerStore.model.getFields()[0].name, split[i]);
}
}
grid.getSelectionModel().select(record);
}
}
}
}
}
});
};
var triggerClick = function (el, trigger, tag, auto, index, isFromMainSearch, grid, pickWindow) {
debugger;
var panel = el.ownerCt;
//var cmbox = GetControl("combobox", panel, FieldSelector);
var w;
w = pickWindow;
w.editor = el;
w.autoComplete = auto;
if (tag != null) {
debugger;
modelName = tag;
var data;
//The Store contains the AjaxProxy as an inline configuration
//debugger;
triggerStore = Ext.create('Ext.data.Store', {
model: modelName,
pageSize: window.resultPerPage,
proxy: {
type: 'ajax',
url: 'ExtNet/GetTableData',
method: 'GET',
baseParams: {
tableName: modelName
},
extraParams: {
tableName: modelName
},
reader: { type: 'json', root: 'data' },
}
});
}
w.show(trigger);
if (grid == null) {
if (pickWindow != null) {
grid = pickWindow.items.items[0].items.items[0];
}
}
grid.tag = el;
grid.show();
};
function SetValue(command, record, grid) {
debugger;
var rowIndex = grid.store.indexOf(record);
if (command == 'Select') {
var data = grid.getSelectionModel().getSelection();
var dataList = "";
for (var i = 0; i < data.length; i++) {
//create a comma seperated list
if (i == data.length - 1) {
model = data[i];
dataList += model.get(data[0].fields.keys[0]);
}
else {
//dataList += data[i].data.Title + ",";
model = data[i];
dataList += model.get(data[0].fields.keys[0]) + ",";
}
}
if (grid.id == 'gridSelector1') {
var w = App.SinglePickWindow;
}
else {
var w = App.PickWindow;
}
w.editor.setValue(dataList);
w.hide();
}
else if (command = 'Description') {
debugger;
var myWin = new Ext.window.Window({
layout: "fit",
cls: "chwindow", iconCls: "#PageWhiteCode",
width: 300, height: 200, modal: true,
border: false, maximizable: false, minimizable: false,
constrain: true, closeAction: "destroy",
htlm: 'Hello, this is description window',
listeners: {
show: {
single: true
}
}
});
myWin.show();
}
};
Code that gets the data from controller
public ActionResult GetTableData(string tableName)
{
try
{
int totalCount;
switch (tableName)
{
case "ORGANIZATION":
var organizationList = OrganizationDetails.GetOrganizationDetails(out totalCount);
return this.Store(new Paging<object>(organizationList as List<object>, totalCount));
case "COUNTRY":
var countryList = OrganizationDetails.GetOrganizationDetails(out totalCount);
return this.Store(new Paging<object>(countryList as List<object>, totalCount));
}
}
catch (Exception ex)
{
throw ex;
}
return this.Direct();
}
Model from where the data is loaded
namespace GridTest.Models
{
public class CountryModel
{
public string CountryId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
public class CountryDetails
{
public IEnumerable<object> GetCountryDetails(out int totalCount)
{
var listCountry = new List<CountryModel>();
listCountry.Add(new CountryModel
{
CountryId = "Coutr1",
Title = "Coutr1 Title",
Description = "Coutr1 Description"
});
listCountry.Add(new CountryModel
{
CountryId = "Coutr2",
Title = "Coutr2 Title",
Description = "Coutr2 Description"
});
listCountry.Add(new CountryModel
{
CountryId = "Coutr3",
Title = "Coutr3 Title",
Description = "Coutr3 Description"
});
listCountry.Add(new CountryModel
{
CountryId = "Coutr4",
Title = "Coutr4 Title",
Description = "Coutr4 Description"
});
totalCount = listCountry.Count;
return Enumerable.Cast<object>(listCountry).ToList();
}
}
public class OrganizationModel
{
public string OrganizationId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
public class OrganizationDetails
{
public static IEnumerable<object> GetOrganizationDetails(out int totalCount)
{
var listOrganization = new List<OrganizationModel>();
listOrganization.Add(new OrganizationModel
{
OrganizationId = "Org1",
Title = "Org1 Title",
Description = "Org1 Description"
});
listOrganization.Add(new OrganizationModel
{
OrganizationId = "Org2",
Title = "Org2 Title",
Description = "Org2 Description"
});
listOrganization.Add(new OrganizationModel
{
OrganizationId = "Org3",
Title = "Org3 Title",
Description = "Org3 Description"
});
listOrganization.Add(new OrganizationModel
{
OrganizationId = "Org4",
Title = "Org4 Title",
Description = "Org4 Description"
});
totalCount = listOrganization.Count;
return Enumerable.Cast<object>(listOrganization).ToList();
}
}
}
The current ext.net version I am using is 2.5.1
Thank You.