View Full Version : Pre-fill data in auto-complete combo

7 Aug 2009, 10:33 AM
Hello All,

I just created a auto-complete combo which uses mode: remote so as I type the combo gets filled with data from the database matching the letters I'm typing. This works great so far. I am now having a problem trying to get the initial form value loaded into the combo. Because the combo starts out empty there is nothing in it to select so calling setValue only causes the empty combo to display the value I pass.

Can anyone tell me how to pre-fill the combo when using this type of remote auto-complete?

The combo is in this extended container that I just created. If anyone has any suggestions for making the container better I would appreciate that as well.


Ext.ux.ShipCombo = Ext.extend(Ext.Container, {
id: 'ext-shipContainer',
layout: 'column',

initComponent: function() {

var config = {
items: [{
//columnWidth: .5,
border: false,
items: [{ // Begin Combo Column
xtype: 'combo',
id: 'ext-shipCombo',
name: 'shipCombo',
valueField: 'ShipId',
displayField: 'ShipName',
hiddenName: 'ShipId', // The value that should be bound/saved.
typeAhead: true,
minChars: 1,
mode: 'remote',
editable: true,
//forceSelection: true, // I think this is not necessary.
triggerAction: 'all',
emptyText: 'Select a ship',
store: new Ext.data.JsonStore({
id: 'ShipId',
root: 'd.rows',
totalProperty: 'd.totalRows',
idProperty: 'ShipId',
fields: ['ShipId', 'ShipName'],
proxy: new Ext.data.HttpProxy({
url: '../WebServices/JobsWebService.asmx/GetShips',
method: 'post',
jsonData: {},
headers: { 'Content-Type': 'application/json; charset=utf-8;' }
listeners: {
select: function(combo, record, index) {
Ext.MessageBox.alert('Item Selected', 'Record Id: ' + record.id);
}] // End Combo Column
}, {
//columnWidth: .5,
border: false,
items: [{ // Begin Button Column
xtype: 'button',
id: 'ext-addShipButton',
text: 'Add',
listeners: {
click: function(button, event) {
addShipWin = new Ext.Window({
id: 'ext-addShipWin',
layout: 'fit',
width: 250,
height: 130,
closeAction: 'close',
plain: true
,items: [{
xtype: 'form',
id: 'ext-addShipForm',
title: 'Add New Ship',
frame: true,
border: false,
labelAlign: 'left',
labelWidth: 70,
//trackResetOnLoad: true,
items: [{
xtype: 'textfield',
id: 'ext-ShipName',
name: 'ShipName',
fieldLabel: 'Ship Name',
maxLength: 100,
allowBlank: false
buttons: [{
text: 'Add',
handler: function() {
if (Ext.getCmp('addShipForm').getForm().isValid()) {
url: '../WebServices/JobsWebService.asmx/SaveShip',
method: 'POST',
jsonData: { shipName: Ext.getCmp('ShipName').getValue() },
headers: { 'Content-Type': 'application/json;charset=utf-8' },
success: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Success', jsonData.d.ShipName + ' saved successfully');
failure: function(response, options) {
jsonData = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert('Failure', jsonData.d.message);
} else {
Ext.MessageBox.alert('Error', 'Please enter a ship name.');
,listeners: {
show: function(window) {
Ext.getCmp('ShipName').focus(false, 500);
}] // End Button Column
} // End Config

Ext.apply(this, config);

Ext.ux.ShipCombo.superclass.initComponent.apply(this, arguments);
Ext.reg('shipcombo', Ext.ux.ShipCombo);

<!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>Add Ship Combo Test</title>
<link rel="stylesheet" type="text/css" href="../Common/Scripts/ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Common/Scripts/ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="../Common/Scripts/Ext.ux.ShipCombo3.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../Common/Scripts/ext-3.0.0/resources/images/default/s.gif';

Ext.onReady(function() {


var shipSelector = new Ext.ux.ShipCombo({
id: 'ext-shipPicker',
renderTo: 'findShip'

var shipCombo = Ext.getCmp('ext-shipCombo');

// 2219 is the primary key value of the record I want filled into the combo.
// This instead displays 2219 in the combo.



<table border="0" cellpadding="0" cellspacing="0">
<td>Ship</td><td><div id="findShip"></div></td>


24 Aug 2009, 5:43 AM
you will need to load the store, then "select" the record after the store is loaded *if* there is a value present.