May 22, 2012, 8:31 PM
[CLOSED] Binding a Custom Search ComboBox
Hi folks, when the button1 Button is clicked the data is loaded and linked to the form. The ID and Name properties work properly but i would like to load a "SubRecord" of ComboBox when binding SubEntityID property. In other words, i would like to know how to load the entity and select the entity that the ComboBox is Linked - as a DropDownList selects a child element.
1 - View
1 - View
<ext:FormPanel ID="FormPanel1" runat="server" Title="Form Panel" Width="300">
<Items>
<ext:TextField ID="TextField1" Name="ID" FieldLabel="ID" AnchorHorizontal="100%"
runat="server" />
<ext:TextField ID="TextField2" Name="Name" FieldLabel="Name" AllowBlank="false" AnchorHorizontal="100%"
runat="server" />
<ext:ComboBox ID="ComboBox1" Name="SubEntityID" FieldLabel="SubEntity" runat="server" DisplayField="ID" ValueField="Name" MinChars="1" AnchorHorizontal="100%">
<ListConfig LoadingText="Searching...">
<Tpl ID="Tpl1" runat="server">
<Html>
<tpl for=".">
<tpl if="[xindex] == 1">
<table class="cbStates-list">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</tpl>
<tr class="x-boundlist-item">
<td>{ID}</td>
<td>{Name}</td>
</tr>
<tpl if="[xcount-xindex]==0">
</table>
</tpl>
</tpl>
</Html>
</Tpl>
</ListConfig>
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadComboItems/">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Items>
<Buttons>
<ext:Button ID="button1" runat="server" Text="Old">
<Listeners>
<Click Handler="loadRecord(false);" />
</Listeners>
</ext:Button>
</Buttons>
<Bin>
<ext:Store ID="Store2" runat="server" AutoLoad="false" PageSize="1">
<Model>
<ext:Model ID="Model2" IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="SubEntityID" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
</ext:FormPanel>
2 - Javascript<script type="text/javascript">
var loadRecord = function (loadNew) {
Ext.net.DirectMethod.request({
url: "/Example/LoadEntity",
cleanRequest: true,
params: {
loadNew: loadNew
},
success: function (result) {
App.Store2.loadRawData(result);
var record = App.Store2.getAt(0);
App.FormPanel1.getForm().loadRecord(record);
}
});
}
</script>
3 - Controllerpublic AjaxResult LoadEntity(bool loadNew)
{
AjaxResult ajx = new AjaxResult();
if (loadNew)
{
ajx.Result = new Person();
}
else
{
ajx.Result = new Person { ID = 1, Name = "EXT", SubEntityID = 123 };
}
return ajx;
}
public StoreResult LoadComboItems(int start, int limit, string sort, string dir, string filter)
{
List<Person> lst = new List<Person>();
for (int index = start; index < limit; index++)
{
lst.Add(new Person
{
ID = index,
Name = "Name" + index,
});
}
return new StoreResult(lst, lst.Count());
}
4 - Entitypublic class Person
{
public int ID { get; set; }
public string Name { get; set; }
public int SubEntityID { get; set; }
}
Last edited by RCN; Jan 22, 2015 at 3:49 PM.