Jun 08, 2012, 2:08 PM
[Razor] - How do I access Ext objects through JavaScript?
About 9 months ago I was using Ext.Net v1, with ASP.NET forms.
Now I have just started using v2 with razor. Previously I was able to access any Ext control in JavaScript by it's ID e.g. TextField_ID.setValue("test")
Now if I use the ID in a JavaScript function, it does not return the Ext object.
In the example below, I want the populateForm function to set the form values after a combo box item is selected, how should I do this?
Now I have just started using v2 with razor. Previously I was able to access any Ext control in JavaScript by it's ID e.g. TextField_ID.setValue("test")
Now if I use the ID in a JavaScript function, it does not return the Ext object.
In the example below, I want the populateForm function to set the form values after a combo box item is selected, how should I do this?
@using Ext.Net
@using Ext.Net.MVC
@model Admin.Models.Customer
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout_ext.cshtml";
}
<script type="text/javascript">
var populateForm = function (combo, records, eOpts) {
var data = records[0].data;
//CompanyName is the wrong way to access the TextField
CompanyName.setValue(data.CompanyName);
};
</script>
@using (Html.BeginForm())
{
@(@Html.X().FormPanel()
.Title("Create Customer")
.BodyPadding(5)
.AutoHeight(true)
.Defaults(d =>
{
d.Add(new Parameter("LabelWidth", "200"));
d.Add(new Parameter("LabelAlign", "right"));
d.Add(new Parameter("Width", "500"));
})
.Items(i =>
{
var cb = @Html.X().ComboBox()
.DisplayField("CompanyName")
.ValueField("CompanyID")
.FieldLabel("Pull data from InfusionSoft")
.HideBaseTrigger(true)
.EmptyText("Search company name in InfusionSoft")
.ID("InfusionSoftCompanyId")
.MinChars(1)
.Store(s =>
{
var store = new Store { AutoLoad = false };
var proxy = new AjaxProxy { Url = "/webservices/InfusionSoft/FindCompany.ashx" };
var reader = new JsonReader { Root = "companies", TotalProperty = "total" };
proxy.ActionMethods.Read = HttpMethod.POST;
proxy.Reader.Add(reader);
var model = new Model();
model.Fields.Add(new ModelField("CompanyID"));
model.Fields.Add(new ModelField("CompanyName"));
store.Proxy.Add(proxy);
store.Model.Add(model);
s.Add(store);
})
.QueryMode(DataLoadMode.Remote)
.QueryDelay(900)
.Listeners(l => { l.Select.Fn = "populateForm"; });
i.AddRange(new AbstractComponent[]
{
cb,
new TextField {ID = "CompanyName", FieldLabel = "Company Name"},
new TextField {ID = "Addr1", FieldLabel = "Addr1"},
new TextField {ID = "Addr2", FieldLabel = "Addr2"},
new TextField {ID = "Addr3", FieldLabel = "Addr3"},
new TextField {ID = "Addr4", FieldLabel = "Addr4"},
new TextField {ID = "PostCode", FieldLabel = "Post Code"},
new TextField {ID = "CountryId", FieldLabel = "Country"},
new TextField {ID = "Phone1", FieldLabel = "Phone 1"},
new TextArea {ID = "Notes", FieldLabel = "Notes", MinHeight = 200, AutoHeight = true},
});
}))
<div class="editor-label">
Customer Credits
</div>
<div class="editor-field">
This will be available after you save the new customer.
</div>
}
<p>
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</p>