PDA

View Full Version : Combobox Paging bar is disabled



chris85
13 Sep 2012, 3:44 AM
I'm trying to use a combobox with paging. Unfortunatelly the Paging bar is not fully rendered or disabled. I'm new in ExtJs ... so maybe I missed one parameter or any other stupid easy thing. I found a lot of paging question here in the forum but unfortunatelly I was not able to find anything related to my problem...

38664

Here is my code:


<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-standard.css"/>
<script type="text/javascript" src="ext/ext.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

Ext.define ('ds_model', {
extend: 'Ext.data.Model',
fields: [
{ name: 'guid', type: 'string' },
{ name: 'server', type: 'string' },
{ name: 'os', type: 'string' }
]
});


var ds = Ext.create('Ext.data.Store', {
model: 'ds_model',
pageSize: 4,
proxy: {
type: 'jsonp',
url : 'json_servers.asp',
reader: {
type: 'json',
root: 'servers',
totalProperty: 'totalrows'
}
}
});

var box = Ext.create('Ext.form.ComboBox', {
renderTo: 'serverbox',
width: 300,
store: ds,
mode: 'remote',
minChars: 1,
pageSize: 4,
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching servers found.',
getInnerTpl: function() { return '<a style="text-decoration: none; width: 100%; color: #000;" href="/server/?guid={guid}"><b>{server}</b><br><p style="font-size: 9px;">{os}</p></a>'; }
}
});

});

</script>

Farish
13 Sep 2012, 4:06 AM
I am not sure if this is the cause of the problem but you should have queryMode: 'remote' instead of mode: 'remote' in your combobox. pageSize config documentation says that it only applies when queryMode: 'remote' is used:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.ComboBox-cfg-pageSize

chris85
13 Sep 2012, 4:35 AM
Thanks for the answer. Unfortunatelly this did not change anything.

Farish
13 Sep 2012, 4:40 AM
what if you remove the listConfig from the combobox? does that change anything?

chris85
13 Sep 2012, 4:44 AM
After removing the listConfig i have empty entries... but nothing changed with the paging.

scottmartin
13 Sep 2012, 4:51 AM
How does this display for you?



Ext.onReady(function(){
var states = Ext.create('Ext.data.Store', {
pageSize: 3,
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
pageSize: 3,
width: 300,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
});


Scott.?

chris85
13 Sep 2012, 5:00 AM
38669

Looks like the same issue. Is there maybe anything wrong with my ext js implemementation ?
I'm adding:
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-standard.css"/>
<script type="text/javascript" src="ext/ext-all.js"></script>

scottmartin
13 Sep 2012, 6:32 AM
Please try ext-all.css

Scott.