PDA

View Full Version : [CLOSED] Key Map sample request for MVC



matrixwebtech
Jul 25, 2014, 9:39 AM
Hi I found 2 examples in bellow mentioned link,these examples are for webforms but not present in MVC sample ,can you please provide these 2 samples for MVC.
http://examples2.ext.net/#/Keys/Panel_Keys/Grid_Rows_Delete/
http://examples2.ext.net/#/Keys/Panel_Keys/Window_Size/

Daniil
Jul 25, 2014, 11:17 AM
Hi @matrixwebtech,

Yes, unfortunately, we have no such the examples in our MVC Examples Explorer.

Please clarify what exactly problems do you have implementing this functionality in MVC? There is, seems, nothing special. It looks the only problem that could be there is Razor syntax. But we have a lot of examples demonstrating how to write Ext.NET things with Razor syntax.

matrixwebtech
Jul 25, 2014, 11:48 AM
I need a functionality with KeyMap,
please run this code bellow,you can see a grid panel and a "Add" button.I put a KeyMap bottom of this page but not understand properly what to do.

I need
Ctrl+S for save data (call save function in controller)
Ctrl+F for focus on first row and first column of grid panel
Ctrl+Down Arrow go to next now of grid panel focus on first column
Ctrl+Up Arrow go to previous now of grid panel focus on first column

please give me some idea of sample so that I can do this?




@model System.Collections.IEnumerable[]
@using Ext.Net
@using Ext.Net.MVC
@{


var X = Html.X();
}


<script>

var valid = function (x) {

// console.log(x.length)
var s = 0;
App.GridPanel1.getStore().getRecordsValues().forEa ch(function (item) {


//console.log(item)

var obj = item;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var val = obj[key];
for (i = 0; i <= x.length - 1; i++) {
console.log(x[i])
if (key == x[i] && (obj[key] != null && obj[key] != 0 && obj[key] != "")) {

console.log("if")
console.log("" + key + "::" + val);
//return true;
}
else {
console.log("else")
//return false;
}
}
}
}


});



}

var addPlant = function () {

var r = Ext.create('pr', {
//common: 'New Plant 1',
//light: 'Mostly Shady',
//price: 0,
//availability: Ext.Date.clearTime(new Date()),
//indoor: false


}),
grid = App.GridPanel1;

grid.store.insert(0, r);
grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
};

var beforeEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;

switch (e.field) {
case "stateid":
//console.log(field)
console.log(e.record.get('countryid'))
field.allQuery = e.record.get('countryid');

break;
case "cityid":
field.allQuery = e.record.get('stateid');
break;



}
};

var countryRenderer = function (value) {
// alert(value)
var r = App.CountryStore.getById(value);

if (Ext.isEmpty(r)) {
//alert('Not valid')
return "";
}
// alert(r.data.Text)
//console.log(r.data.Text)
return r.data.Text;
};
var stateRenderer = function (value) {

var r = App.StateStore.getById(value);

console.log(r)
if (Ext.isEmpty(r)) {
return "";
}
// alert(r.data.Text)
console.log(r.data)
return r.data.state;
};
var cityRenderer = function (value) {
var r = App.CityStore.getById(value);
// console.log(r)
if (Ext.isEmpty(r)) {
return "";
}
// alert(r.data.Text)
// console.log(r.data.city)
return r.data.city;
};

</script>


@X.ResourceManager()

@(X.Store()
.ID("CountryStore")
.Model(
X.Model()
.IDProperty("countryid")
.Fields(
X.ModelField()
.Name("Text")
.ServerMapping("Text")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("countryid")
.ServerMapping("countryid")
.Type(ModelFieldType.String)

)
)
.DataSource(Model[1])
)

@* @(

X.Store()
.ID("StateStore")
.Model(X.Model()
.IDProperty("stateid")
.Fields(
X.ModelField()
.Name("stateid")
.Mapping("stateid")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("state")
.Mapping("state")
.Type(ModelFieldType.String)
)
)
.DataSource(Model[2])

.ServerProxy(X.AjaxProxy()
.Url(Url.Action("GetStates"))
.Reader(X.JsonReader().Root("data"))
)
)*@


@(X.Store()
.ID("CityStore")
.Model(X.Model()
.IDProperty("cityid")
.Fields(
X.ModelField()
.Name("cityid")
.Mapping("cityid")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("city")
.Mapping("city")
.Type(ModelFieldType.String)
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetCities"))
.Reader(X.JsonReader().Root("data"))
)
)




@(
X.FormPanel()
.ID("FormPanel1")




.Items
(
X.GridPanel()
.ID("GridPanel1")
.TopBarItem(X.Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add)
)
//.Listeners(l =>
// {
// l.ViewReady.Fn = "addPlant";
// l.ViewReady.Delay = 1;
// })
.Frame(true)
.Features(X.Summary())
.Height(300)
.Width(600)
.Title("Grid")
.ForceFit(true)
.Store(X.Store()

.ID("Store1")
.Model(X.Model()
.Name("pr")
.Fields(

X.ModelField()
.Name("countryid")
.Type(ModelFieldType.String),
X.ModelField()
.Name("Text")
.Type(ModelFieldType.String),

X.ModelField()
.Name("stateid")
.Type(ModelFieldType.String),
X.ModelField()
.Name("state")
.Type(ModelFieldType.String),



X.ModelField()
.Name("cityid")

.Type(ModelFieldType.String),
X.ModelField()
.Name("city")

.Type(ModelFieldType.String),

X.ModelField()
.Name("population")

.Type(ModelFieldType.Int),

X.ModelField()
.Name("men")

.Type(ModelFieldType.String),

X.ModelField()
.Name("women")

.Type(ModelFieldType.String)


)
)
.DataSource(Model[0])

)
.View(
Html.X().GridView().MarkDirty(false)
)

.ColumnModel(
X.Column()
.DataIndex("countryid")
.Text("Country")
.Renderer("countryRenderer")
.Editor(X.ComboBox()
.QueryMode(DataLoadMode.Local)
.ID("cmb1")
//.TriggerAction(TriggerAction.All)
.StoreID("CountryStore")
.ValueField("countryid")
.DisplayField("Text")
.Validator(v =>
{
v.Fn = @"function(value) {
if (!Ext.getCmp('cmb1').getValue()) return true;
if (this.getValue() > Ext.getCmp('cmb1').getValue())
return 'IN1 should be less then OU1';
return true;
}";
})
),

X.Column()
.DataIndex("stateid")
.Text("State")
.Renderer("stateRenderer")

.Editor(X.ComboBox()
.ID("ddlstate")

.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
//.StoreID("StateStore")
.Listeners(l => { l.AfterRender.Handler = "stateRenderer"; })
.ValueField("stateid")
.DisplayField("state")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
.Store
(
X.Store()
.ID("StateStore")
.Model(X.Model()
.IDProperty("stateid")
.Fields(
X.ModelField()
.Name("stateid")
.Mapping("stateid")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("state")
.Mapping("state")
.Type(ModelFieldType.String)
)
)
.DataSource(Model[2])

.ServerProxy(X.AjaxProxy()
.Url(Url.Action("GetStates"))
.Reader(X.JsonReader().Root("data"))
)

)
),

X.Column()
.DataIndex("cityid")
.Text("City")
.Renderer("cityRenderer")
.Editor(X.ComboBox().AllowBlank(false)
.ID("ddlcity")
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.StoreID("CityStore")
.ValueField("cityid")
.DisplayField("city")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
),

Html.X().SummaryColumn()
.Width(75)
.Text("Population")
.DataIndex("population")
.SummaryType(SummaryType.Sum)
.Renderer("return value ;")
.SummaryRenderer("return value ;")
.Editor(
Html.X().NumberField().AllowBlank(false).MinValue( 0).StyleSpec("text-align:left")
),

X.Column()
.DataIndex("men")
.Text("Men")
.Editor(X.TextField().AllowBlank(false)
.ID("txtMen")

.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
,
X.Column()
.DataIndex("women")
.Text("Wo-Men")

.Editor(X.TextField().AllowBlank(false)
.ID("txtwomen")

.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
,
Html.X().ImageCommandColumn()
.Width(30)

.Commands(
Html.X().ImageCommand()
.Icon(Icon.Bin)
.ToolTip(t =>
{
t.Text = "Delete plant";

})
.CommandName("delete")

)
.Listeners(l =>
{

l.Command.Handler = "this.up('gridpanel').store.removeAt(recordIndex);";

})
.DirectEvents(d =>
{
d.Command.Action = "delete";
d.Command.ExtraParams.Add(new Parameter
{
Value = "record.data.countryid",
Name = "v",
Mode = ParameterMode.Raw

});

})




)
.Plugins(X.CellEditing()
.Listeners(events =>
{
events.BeforeEdit.Fn = "beforeEdit";
})
.ClicksToEdit(1)
.DirectEvents(events =>
{
events.Edit.Action = "Edit";

events.Edit.EventMask.ShowMask = true;
events.Edit.EventMask.CustomTarget = "App.GridPanel1";
events.Edit.ExtraParams.Add(new Parameter { Name = "field", Value = "e.field", Mode = ParameterMode.Raw });
events.Edit.ExtraParams.Add(new Parameter { Name = "index", Value = "e.rowIdx", Mode = ParameterMode.Raw });
events.Edit.ExtraParams.Add(new Parameter { Name = "recordData", Value = "e.record.data", Mode = ParameterMode.Raw });
})
)


)
)

@(
X.Button()
.Text("Save")
.Icon(Icon.DatabaseSave)
.ID("b")

// .Listeners(l => { l.Click.Handler = "return valid(['countryid', 'stateid', 'cityid','population','men','women'])"; }
// )
//.DirectEvents(d =>
// {

// d.Click.Action = "save";

// d.Click.ExtraParams.Add(new Parameter
// {
// Name = "values",
// Value = "Ext.encode(#{GridPanel1}.getRowsValues())",
// Mode = ParameterMode.Raw
// });


// })


)

@(X.KeyMap()
.Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}")
.Binding(b => {
b.Add(X.KeyBinding()

.Handler("")
.KeysString("N")
);

b.Add(X.KeyBinding()
.Handler("#{West}.toggleCollapse();")
.KeysString("W")
);

b.Add(X.KeyBinding()
.Handler("#{East}.toggleCollapse();")
.KeysString("E")
);

b.Add(X.KeyBinding()
.Handler("#{South}.toggleCollapse();")
.KeysString("S")
);
})
)





using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using System.Text;
namespace ERP_test.Controllers
{
public class masterdetailsController : Controller
{
//
// GET: /masterdetails/

public ActionResult Index(string id)
{
List<object> countries = new List<object>(10);
List<object> states = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
countries.Add(new { Text = "C" + i, countryid = i });
}
for (int i = 1; i <= 10; i++)
{
states.Add(new { state = "S" + i, stateid = i });
}

if (id == "edit")
{

return View(new IEnumerable<object>[]
{
new List<object>
{
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "25",men="58",women="25"},
new {countryid = "1", stateid = "2",state="C1_S1", cityid = "1", population = "65",men="45",women="65"},
new {countryid = "1", stateid = "3",state="C1_S1", cityid = "2", population = "56",men="67",women="89"},
},
countries,
states
});
}
else
{
return View(new IEnumerable<object>[]
{
new List<object>
{

new {country = "", state = "", city = "", population = "0",men="0",women="0"},
},
countries,
states
});
}
}

public object[] GetStates(string query)
{
List<object> states = new List<object>(10);
if (string.IsNullOrEmpty(query) == false)
{
for (int i = 1; i <= 10; i++)
{
states.Add(new { stateid = i, state = query + "_S" + i });
}
}

return states.Cast<object>().ToArray();
//return this.Store(states.Cast<object>().ToArray());
}

public ActionResult GetCities(string query)
{
List<object> cities = new List<object>(10);
if (string.IsNullOrEmpty(query) == false)
{
for (int i = 1; i <= 10; i++)
{
cities.Add(new { cityid = i, city = query + "_C" + i });
}
}

return this.Store(cities);
}



public ActionResult Edit(string field, string recordData, int index)
{
List<string> fields = new List<string> { "country", "state", "city", "population", "men", "women" };
int startIndex = fields.IndexOf(field);
JsonObject data = JSON.Deserialize<JsonObject>(recordData);
ModelProxy record = X.GetCmp<Store>("Store1").GetAt(index);
Random r = new Random();
switch (field)
{
case "cityid":
record.Set(fields[3], r.Next(10, 200).ToString());
record.Set(fields[4], r.Next(10, 200).ToString());
record.Set(fields[5], r.Next(10, 200).ToString());
break;
}



return this.Direct();
}

public ActionResult save(string values)
{
string json = values;
Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json);
StringBuilder sb = new StringBuilder();
foreach (Dictionary<string, string> row in companies)
{
foreach (KeyValuePair<string, string> keyValuePair in row)
{
sb.Append(keyValuePair.Key);
}
foreach (KeyValuePair<string, string> keyValuePair in row)
{
sb.Append(keyValuePair.Value);
}
}
return this.Direct();
}


public void delete(string v)
{

}

}

}

Daniil
Jul 25, 2014, 1:54 PM
For the beginning I would recommend you to configure keys and ensure that it triggers a Handler.

For "Ctrl+S" it probably should look like that:

@X.KeyBinding().Ctrl(true).KeysString("S").Handler("alert('Ctrl + S');")

Though, you will probably face problems with overriding a browser's hot keys as Ctrl+S. For example, it might be difficult or just impossible to avoid a default browser action on a specific hot key. From another side, a user might be not happy with such overriding of the default functionality of a browser's hot keys. In any way we would recommend to avoid it.

matrixwebtech
Jul 25, 2014, 4:15 PM
thanks Daniil for your reply and valuable suggestion.actually in gmail compose mail they give this functionality thats why I wondering this.I will change my keys.but what about other keyMap?how can I able to do other other functionality?how I call controller action from key map?I try to specify an action with Url helper inside Handler but its not working?I see firebug it show an error "Illegal character",can you please suggest me some tricks?

What
.Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}") code do?

Vladimir
Jul 28, 2014, 8:49 AM
Hi



how I call controller action from key map?I

You can use direct methods and execute it when key is pressed, please see http://mvc.ext.net/#/Events/DirectMethod/



What


Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}")






code do?

={} means that value should be serialized as raw value (not as string, without quotes)
Target is element which will be listened by key map to handle keys pressing