I am new to Extjs. I am facing this problem when I am trying to use combobox with a store that is populated through an AJAX call. I want the combobox to display the item that starts with the character typed in the combo box but the combobox is always showing the 1st item in the list.Here is my code,
Ext.define('fieldModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'name'
},{
name : 'value'
}]
});
{
xtype: 'combobox',
id: 'startField',
name: 'startField',
style: 'margin-right:10px;',
width: 230,
fieldLabel: 'Field',
labelAlign: 'top',
displayField: 'name',
valueField: 'value',
triggerAction:'query',
minChars:2,
//forceSelection:true,
//enableKeyEvents:true,
minListWidth:150,
//allowBlank:false,
queryMode: 'remote',
typeAhead: true,
//hideTrigger: true,
store:new Ext.data.JsonStore({
model: 'fieldModel',
//autoLoad: true,
//sortOnLoad : true,
//sortRoot: 'data',
proxy : {
type : 'ajax',
url: requesturl + '?action=getDate&itemid='+ preItemId,
reader : {
type : 'json',
root : 'data',
}
},
listeners :{
load : function( store, records, successful, operation, eOpts){
Ext.getCmp('startField').getStore().sort('name', 'ASC');
}
}
}),
Please help.
Thanks in advance.
change your listener to keypress or keyup event
keypress( Ext.form.field.Text this, Ext.EventObject e, Object eOpts )
This event only fires if enableKeyEvents is set to true.
listeners :{
keypress : function( text, event, eOpts){
Ext.getCmp('startField').getStore().sort('name', 'ASC');
}
}
Related
I am trying to get the label for the combobox to show correctly in the example below. I am trying to get it to work in Sencha Fiddle. The text if too long, is getting truncated.
Ext.application({
name : 'Fiddle',
launch : function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
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: 'Reaaaaaaaaaaaaaaallllllllly long',
fieldlabelStyle: 'width:600px',//doesn't do anything
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
}
});
Try with labelStyle
Ext.application({
name : 'Fiddle',
launch : function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
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: 'Reaaaaaaaaaaaaaaallllllllly long',
labelStyle: 'width:600px',
//fieldlabelStyle: 'width:600px',//doesn't do anything
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
}
});
Use labelWidth: config for this. Define like this
labelWidth: '60%',
I have a sencha touch form which has multiple combo boxes,but when i submit the formpanel the display field value is send in the request instead of the value field. I am using sencha touch 2.3.0.
this.getDetailsPanel().submit({
url: 'savedetails.php',
method: 'POST',
success: function() {
alert('form submitted successfully!');
},
failure:function(){
alert("connection error");
}
});
}
any pointers ..? combo box used in the form is given bellow
{
xtype: 'selectfield',
name: 'assignedToDepartment',
label: 'Assigned to Department',
options:[
{text:'All',value:'0'},
{text:'Daniel Craig',value:'1'},
{text:'Sean Connery',value:'2'}
]
},
Try using displayField and valueField configuration in selectfield.
Like this
{
xtype: 'selectfield',
name: 'assignedToDepartment',
label: 'Assigned to Department',
displayField : 'text',
valueField : 'value',
options:[
{text:'All',value:'0'},
{text:'Daniel Craig',value:'1'},
{text:'Sean Connery',value:'2'}
]
},
If FocusManager is enabled, then hiding a grid column via the menu header causes the location hash to change. This does not happen if FocusManager is not enabled. I tried overriding Ext.menu.Item onClick in order to stopEvent, but that doesn't work, because it looks like the browser click event is inaccessible because EventManager is wrapping the listener and replacing it with an EventObject focus event.
Here is example code (also at http://jsfiddle.net/jacobg/8X3qw/). You can see console log of location hash change, and try with both FocusManager.enable commented out and uncommented:
window.onhashchange = function () {
console.log('hash changed to: ' + location.hash);
};
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float', convert: null, defaultValue: undefined},
{name: 'change', type: 'float', convert: null, defaultValue: undefined},
{name: 'pctChange', type: 'float', convert: null, defaultValue: undefined},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia', defaultValue: undefined}
],
idProperty: 'company'
});
Ext.onReady(function() {
//Ext.FocusManager.enable();
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am']
];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
columns: [
{
text : 'Company',
flex : 75,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 50,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 50,
sortable : true,
dataIndex: 'change'
}
],
height: 200,
width: 400,
title: 'Array Grid'
});
});
Indeed hash is changing in that case. To bypass this, you can create override of onColumnCheckChange method on Ext.grid.header.Container class and prevent default on mouse event there. You can do so for example by providing config of header container in columns config property of grid. Example:
var grid = Ext.create('Ext.grid.Panel', {
columns: {
items: [...],
onColumnCheckChange: function(checkItem, checked) {
Ext.grid.header.Container.prototype.
onColumnCheckChange.apply(this, arguments);
window.event.preventDefault();
}
}
});
Working sample: http://jsfiddle.net/VQN3H/5/
I have a combo box with list a set of values,
Ext.define('loincList', {
extend: 'Ext.data.Model',
fields: [{ name: 'loincNumber', mapping: 'loincNumber' },
{ name: 'component', mapping: 'component' }
]
});
ds = Ext.create('Ext.data.Store', {
model: 'loincList',
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/LOINCData/getLOINCData',
reader: {
type: 'json',
root: 'LOINCData'
}
}
});
combo box:
{
xtype: 'combo',
fieldLabel: 'Search Loinc Code',
name: "loincId",
displayField: 'loincNumber',
valueField: 'id',
width: 400,
store: ds,
queryMode: 'local',
allowBlank:false,
listConfig: {
getInnerTpl: function() {
return '<div data-qtip="{loincNumber}.{component}">{loincNumber} {component} {status}</div>';
}
}
}
when i type a number in the combo-box it filter based on the number entered but when i type a text ,it is not filtering based on text entered.How to filter based on text entered.
When you type the data to the combobox, it will filter based on the displayField. So I think when you "type a text it is not filtering based on text entered" because no items in the combo has displayField with prefix like the text you typed.
Filtering is working on server side, if you will switch on something like Firebug, you will see special param (usually named filter) with text you typed in control, So you need to check what happen on your server-side. You need to handle with filter text and make filters as you want on server-side.
I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},