Mar 15, 2010, 4:59 PM
RE: Combobox Partial String Search for List Item
Thanks for the tip. I was unfortunately unsuccessful. I am continually getting Ext is undefined errors on line 1 of the
CustomFilterCombo.js file. My sample code is below
Javascript file below.
CustomFilterCombo.js file. My sample code is below
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
<script type="text/javascript" src="CustomFilterCombo.js"></script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" CleanResourceUrl="False">
</ext:ScriptManager>
<ext:ComboBox ID="ComboBox1" runat="server">
<Items>
<ext:ListItem Text="Book" />
<ext:ListItem Text="Bookcase" />
<ext:ListItem Text="Briefcase" />
<ext:ListItem Text="Chair" />
<ext:ListItem Text="Canada" />
</Items>
</ext:ComboBox>
<script type="text/javascript">
Ext.onReady(function(){
var plugins = [];
plugins.push(new Ext.ux.plugins.CustomFilterCombo({
anyMatch: true,
caseSensitive: true
}));
ComboBox1.addPlugins(plugins); )
}
</script>
</form>
</body>
</html>
Javascript file below.
Ext.ns('Ext.ux.plugins');
/**
* allow custom value in combobox
* if the entered value is not found in the store the value is used as the combos value
*
* @author Gustav Rek
* @date 21.01.2010
* @version 1
*
*/
Ext.ux.plugins.CustomFilterCombo = function(config) {
Ext.apply(this, config);
Ext.ux.plugins.CustomFilterCombo.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.plugins.CustomFilterCombo, Object, {
/**
* @cfg {Boolean} anyMatch <tt>true</tt> to match any part not just the beginning (default=false)
*/
anyMatch : false,
/**
* @cfg {Boolean} caseSensitive <tt>true</tt> for case sensitive comparison (default=false)
*/
caseSensitive : false,
/**
* @cfg {Function} filterFn Filter by a function. This function will be called for each
* Record in this Store. If the function returns <tt>true</tt> the Record is included,
* otherwise it is filtered out (default=undefined).
* When using this parameter anyMathch and caseSensitive are ignored!
* @param {Ext.data.Record} record The {@link Ext.data.Record record}
* to test for filtering. Access field values using {@link Ext.data.Record#get}.
* @param {Object} id The ID of the Record passed.
* @param {String} field The field filtered in (normally the displayField of the combo).
* Use this with {@link Ext.data.Record#get} to fetch the String to match against.
* @param {String} value The value typed in by the user.
*/
filterFn : undefined,
init : function(combo) {
this.combo = combo;
if(Ext.isFunction(this.filterFn)) {
combo.store.filter = this.filterBy.createDelegate(this);
} else {
// save this funtcion for later use, before we overwrite it
combo.store.originalFilter = combo.store.filter;
combo.store.filter = this.filter.createDelegate(this);
}
},
// scope: this
filterBy : function(field, value) {
this.combo.store.filterBy(this.filterFn.createDelegate(this.combo, [field, value], true));
},
// scope: this
filter : function(field, value) {
this.combo.store.originalFilter(field, value, this.anyMatch, this.caseSensitive);
}
});
Ext.reg('customfiltercombo', Ext.ux.plugins.CustomFilterCombo);
Thanks!