PDA

View Full Version : [CLOSED] ComboBox does properly set their value and text



jesperhp
Feb 27, 2014, 8:01 AM
Hi I am using Custom search for combobox
It properly work for custom search and drop down list but issue is that when I edit an Record and load data in custom combobox then I am getting problem, the problem is that either DisplayField set or it ValueField, I need both DisplayField and ValueField, the function setValuetoCombobox is used to set ValueField and DisplayField in V1.1, to set valuefield and displayfield I pass three parameter of my custom function , Is previous extjs not supportable in current version of Extjs??
Here is the link to setValue() for combobox in current version
http://docs.sencha.com/extjs/4.2.2/source/ComboBox.html#Ext-form-field-ComboBox-method-setValue

To make it clear here I have ComboxBox, DisplayField and ValueField but how to set using my custom function "setValuetoCombobox" in current version of Extjs
Thanks





<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
<script type="text/javascript">
Ext.applyIf(Request, {
setValuetoCombobox: function (combobox, valueId, valueText) {


Ext.form.ComboBox.superclass.setValue.call(combobo x, valueText);
combobox.value = valueId;
}
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false" />
<ext:Window runat="server" ID="window_Request_Detail" Width="790px" Layout="Form"
AutoScroll="true" Title="AddNewRequestDetail" Height="669px" Modal="true" Closable="true"
CloseAction="Hide" Resizable="false" BodyStyle="background-color:#dfe8f6" Maximizable="true">
<Items>
<ext:TabPanel ID="tbpanelHelpDeskInfo" runat="server">
<Items>
<ext:FormPanel ID="frmpnl_RequestInfo" Padding="10" Height="580px" runat="server"
AutoScroll="true" MonitorValid="true" Title="TitleRequestInfo">
<Content>
<ext:Container ID="Container2" Layout="Column" Height="205px" runat="server">
<Items>
<ext:Container ID="Container3" ColumnWidth="0.5" StyleSpec="padding-right:5px" runat="server">
<Items>
<ext:ComboBox Width="350px" DataIndex="CategoryId" FieldLabel=" Category" ID="cmb_Request_Categories"
runat="server" DisplayField="Name" ValueField="Id" AllowBlank="false" Editable="true"
EmptyText="Select Category" Selectable="true" TypeAhead="false" LoadingText="Searching..."
HideTrigger="false" MinChars="1">
</ext:ComboBox>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Content>
</ext:FormPanel>
</Items>
</ext:TabPanel>
</Items>
</ext:Window>
</form>
</body>
</html>

Daniil
Feb 27, 2014, 8:19 AM
Hi @jesperhp,

I don't think that a ComboBox's setValue takes two parameters in Ext.NET v1.

As you can see in this example "some text" doesn't appear in the CombboBox.

Example Ext.NET v1

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="setValue">
<Listeners>
<Click Handler="ComboBox1.setValue('some value','some text');" />
</Listeners>
</ext:Button>

<ext:ComboBox
ID="ComboBox1"
runat="server"
ValueField="value"
DisplayField="text">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="value" />
<ext:RecordField Name="text" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>


Your sample produces a JavaScript error "Request is not defined".

jesperhp
Feb 27, 2014, 9:09 AM
Hi @jesperhp,

I don't think that a ComboBox's setValue takes two parameters in Ext.NET v1.

As you can see in this example "some text" doesn't appear in the CombboBox.

Example Ext.NET v1

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="setValue">
<Listeners>
<Click Handler="ComboBox1.setValue('some value','some text');" />
</Listeners>
</ext:Button>

<ext:ComboBox
ID="ComboBox1"
runat="server"
ValueField="value"
DisplayField="text">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="value" />
<ext:RecordField Name="text" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>


Your sample produces a JavaScript error "Request is not defined".

You can use Mine custom function like that



<script type="text/javascript">

function setValuetoCombobox(combobox, valueId, valueText) {


Ext.form.ComboBox.superclass.setValue.call(combobo x, valueText);
combobox.value = valueId;
}




Now I am providing the link of setValue for combobox
http://docs.sencha.com/extjs/3.4.0/source/Combo.html#Ext-form-ComboBox-method-setValue
and the function is that which I used




setValue : function(v){
var text = v;
if(this.valueField){
var r = this.findRecord(this.valueField, v);
if(r){
text = r.data[this.displayField];
}else if(Ext.isDefined(this.valueNotFoundText)){
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = Ext.value(v, '');
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
return this;
}




I am not using whole function as it is, but made it custom and pass three parameter, reference of
Combobox, ValueField and DisplayField,

Thanks

Daniil
Feb 27, 2014, 1:06 PM
Ok, now I understand what you are doing.

I think this approach is not going to work with Ext.NET v2 (by the way, the latest Ext.NET uses ExtJS 4.2.1, not 4.2.2).

I would suggest to add an item first, then call the setValue method. Without any override.

comboBox.addItem(text, value);
comboBox.setValue(value);

jesperhp
Mar 04, 2014, 1:49 PM
Ok, now I understand what you are doing.

I think this approach is not going to work with Ext.NET v2 (by the way, the latest Ext.NET uses ExtJS 4.2.1, not 4.2.2).

I would suggest to add an item first, then call the setValue method. Without any override.

comboBox.addItem(text, value);
comboBox.setValue(value);

Hi Daniil
Nothing happen with that, even DisplayField stop working, using that I am unable to get both DisplayField and ValueField

Thanks

Daniil
Mar 04, 2014, 3:06 PM
Please provide a runnable test case.