PDA

View Full Version : problem with combox selection



arunkumargm1987
7 Jul 2010, 3:17 AM
new Ext.form.ComboBox(
{
tpl :'<tpl for="."><tpl if="xindex % 2"><div ext:qtip="{autocom}" class="x-combo-list-item">{autocom}</div></tpl></tpl>',
store :autocomplete,
displayField :'autocom',
typeAhead :true,
autoSelect :true,
mode :'remote',
id :'txtSearch',
triggerAction :'all',
enableKeyEvents :false,
emptyText :'Enter Search Query...',
editable :true,
selectOnFocus :true,
hideTrigger :true,
fieldLabel :'Search',
autoHeight :true,
width :'100%',
id :'txtSearch',
allowBlank :false,
anchor :'90%' })

this is my combo box in which i get list of elements from "autocom" for autocomplete
but when i select them , in my textbox i m getting autocom[i-1]th element

mt "autocom" elements are


"ma",
286,
"mxlogic",
244,
"cdf",
133,
"announcement",
92,
"ann",
86,
"rt",
81,
"mainpage",
75,
"ph",
65,
"int",
64,
"it",
49


autocom is an array!

I am displaying only the alternate "text" fields using the XTemplate.
But profoundly When i select the 2nd item the actual second item is getting displayed in the combo.
Example : I select "mxlogic" from above example, then 286 is getting displayed in the combo.

please help me

arunkumargm1987
7 Jul 2010, 3:39 AM
please help me

Condor
7 Jul 2010, 3:41 AM
How did you configure your store to read this data?

arunkumargm1987
7 Jul 2010, 5:43 AM
Please Help Me Condor!! :( :'(

Condor
7 Jul 2010, 6:13 AM
You only show every other value using the tpl, but instead you should be reading the data correctly so you wouldn't need to do that.

Use:

tpl: '<tpl for="."><div ext:qtip="{autocom}" class="x-combo-list-item">{autocom} ({count})</div></tpl>',
store: new Ext.data.JsonReader({
data: autocomplete,
root: function(v){
var data = [];
for (var i = 0, len = v.length; i < len; i += 2) {
data.push({autocom: v[i], count: v[i + 1]});
}
return data;
},
fields: ['autocom', 'count']
}),

arunkumargm1987
8 Jul 2010, 1:41 AM
You only show every other value using the tpl, but instead you should be reading the data correctly so you wouldn't need to do that.

Use:

tpl: '<tpl for="."><div ext:qtip="{autocom}" class="x-combo-list-item">{autocom} ({count})</div></tpl>',
store: new Ext.data.JsonReader({
data: autocomplete,
root: function(v){
var data = [];
for (var i = 0, len = v.length; i < len; i += 2) {
data.push({autocom: v[i], count: v[i + 1]});
}
return data;
},
fields: ['autocom', 'count']
}),

Hi Condor!!

my store is defined like this..


var autocomplete = new Ext.data.Store(
{
proxy : new Ext.data.ScriptTagProxy(
{
url : 'http://10.226.190.149:8983/solr/terms?terms.fl=attr_ddoctitle&indent=true&wt=json&omitHeader=true',
callbackParam : 'json.wrf',
method : 'GET'
}),

reader : new Ext.data.JsonReader( {
root : function(d) {
return d['terms']['1'];
},
fields : [ {
name : 'autocom',
convert : function(v, n) {

return n;

}

} ]

})

});
autocomplete.load();


When i use your code.. I get error "this.proxy is undefined"

Can you gimme a tip ?
"How many days will it take to become proficient in ExtJs, cos i really like this framework!" and
"Have you read whole ExtJs API docs ??"

Condor
8 Jul 2010, 2:06 AM
Now try using my root and fields instead of yours!

arunkumargm1987
8 Jul 2010, 4:26 AM
No its not working! :(


tpl:'<tpl for="."><div ext:qtip="{autocom}" class="x-combo-list-item">{autocom} ({count})</div></tpl>',
store: autocomplete,
displayField : 'autocom',
queryParam : 'terms.prefix',
typeAhead : false,
autoSelect : false,
mode : 'remote',
id : 'txtSearch',
triggerAction : 'all',
enableKeyEvents : false,
emptyText : 'Enter Search Query...',
editable : true,
selectOnFocus : true,
hideTrigger : true,
fieldLabel : 'Search',
autoHeight : true,
width : '100%',
id : 'txtSearch',
allowBlank : false,
anchor : '90%'
})


the autocomplete store is defined like this.



var autocomplete = new Ext.data.Store(
{
proxy : new Ext.data.ScriptTagProxy(
{
url : 'http://10.226.190.149:8983/solr/terms?terms.fl=attr_ddoctitle&indent=true&wt=json&omitHeader=true',
callbackParam : 'json.wrf',
method : 'GET'
}),

reader : new Ext.data.JsonReader( {
root: function(v){
var data = [];
for (var i = 0, len = v.length; i < len; i += 2) {
data.push({autocom: v[i], count: v[i + 1]});
}
return data;
},
fields: ['autocom', 'count']
})
});
autocomplete.load();


Now nothing is getting displayed! :(

My json is this


stcCallback1002({
"terms":[
"attr_ddoctitle",[
"virusscan",
15,
"virus",
6
]
]
})

Condor
8 Jul 2010, 4:41 AM
Ah, you didn't post your complete JSON until now! For that data you will need:

root: function(v){
v = v.terms[1];
var data = [];
for (var i = 0, len = v.length; i < len; i += 2) {
data.push({autocom: v[i], count: v[i + 1]});
}
return data;
},

arunkumargm1987
8 Jul 2010, 8:55 PM
Hi Condor :)

Now the autocomplete dropdown is working but, when i select , the combobox is empty..

Condor
8 Jul 2010, 11:15 PM
Is that the complete combobox config you posted?

ps. I do have some remarks about that:

tpl:'<tpl for="."><div ext:qtip="{autocom}" class="x-combo-list-item">{autocom} ({count})</div></tpl>',
store: autocomplete,
displayField : 'autocom',
queryParam : 'terms.prefix',
//typeAhead : false, <- that is the default, no need to specify
autoSelect : false,
//mode : 'remote', <- that is the default, no need to specify
id : 'txtSearch',
//triggerAction : 'all', <- you specified queryParam, so I assume you want the default 'query'
//enableKeyEvents : false, <- that is the default, no need to specify
emptyText : 'Enter Search Query...',
//editable : true, <- that is the default, no need to specify
selectOnFocus : true,
hideTrigger : true,
fieldLabel : 'Search',
//autoHeight : true, <- not needed
//width : '100%', <- invalid and unneed, because you specified an anchor
id : 'txtSearch',
allowBlank : false,
anchor : '90%'