PDA

View Full Version : ComboBox not showing



Musical Shore
1 Feb 2010, 5:26 PM
Hi,

I am trying to create an auto-complete box using a combobox. When the ajax request is triggered, the box appears for a second, and is gone. Please take a look:
http://screencast.com/t/MGE2NzZmMDgt

I can see in Firebug that the server is returning the JSON properly.

Here is my code.

Ext.onReady(function(){

var store = new Ext.data.JsonStore({
autoDestroy: true,
url: 'HTSearchTerms',
// reader configs
root: 'results',
idProperty: 'term',
fields: ['term']
});

// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-string">','{term}','</div></tpl>'
);

var search = new Ext.form.ComboBox({
store: store,
//displayField:'searchString',
typeAhead: false,
loadingText: 'Searching...',
width: 494,
mode: 'remote',
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
applyTo: 'search',
itemSelector: 'div.search-string',
displayField: 'term',
triggerAction: 'all'
});
});


Here is my html:


<body>
<script type="text/javascript" src="{!$Resource.HTSearchBoxJS}"></script>

<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<input type="text" size="40" name="search" id="search" />
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div> </body>

Here is my JSON:


{results: [
term: 'outlook',
term: 'outlook express',
term: 'outlook dont work',
term: 'outlook sucks',
term: 'can I use something other than outlook',
term: 'outlook calendar',
term: 'outlook for tomorrow',
term: 'outlook 9/11 conspiracy'
]
}


Any help would be appreciated.

Thanks,

Michael

Musical Shore
1 Feb 2010, 10:50 PM
I've made a little headway. I can get the ComboBox to appear, but it doesn't load the list. It just hands and says, "Searching...".

Here is my code:



Ext.onReady(function(){

var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'HTSearchTerms'
}),
reader: new Ext.data.JsonReader({
root: 'results',
id: 'id',
fields: [
{name: 'termid', mapping: 'id'},
{name: 'termResult', mapping: 'term'}
]
})
});

// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-string">','{term}','</div></tpl>'
);

var search = new Ext.form.ComboBox({
store: store,
//displayField:'searchString',
typeAhead: false,
loadingText: 'Searching...',
width: 494,
mode: 'remote',
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
hiddenId: 'userInput',
applyTo: 'search',
itemSelector: 'div.search-string',
displayField: 'termResult',
triggerAction: 'all'
});
});
Here is my JSON:


{results:[
{id:1,term: 'outlook'},
{id:2,term: 'outlook express'},
{id:3,term: 'outlook is wrong'},
{id:5,term: 'can I use something other than outlook'},
{id:6,term: 'outlook calendar'},
{id:7,term: 'outlook for tomorrow'}]}

Musical Shore
2 Feb 2010, 11:48 AM
I think I figured out the problem. I need to use an HttpProxy instead of a scriptTagProxy.