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.
Related
I want to send post request in sencha touch and the arguments I want to post are dynamic i.e. I want to take the textField values as a parameters to post. Please help me
proxy: {
type: "ajax",
url:'http://anotherserver.com/query.php',
method:'post',
extraParams: {
val: "TextField1.Text" // **here I want to provide the value of the textField help me plz**
},
reader: {
type: "json",
rootProperty: "notes",
totalProperty: "total"
}
},
Look first for Sencha Touch model concept because your can tag along your model into your Form (Ext.FormPanel) and treat it as one.
var model = Ext.create('Ext.data.Model',{
fields: ['name', 'email', 'password'],
proxy: [] //your proxy settings here,
customFunctionWithAjax: function(){
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
//after filling up your form you can get all textfields value
//with .getValues() and set it to your model
model.setData(form.getValues);
//then you can do anything you want like SAVE, or update
model.save();
//or call your custom function with your customised ajax request
model.customFunctionWithAjax();
// you can also check if your data are correct before sending it using .validate();
model.validate();
Usually you want to wrap the text field inside a form (formpanel).
Then you can use
var form = Ext.Viewport.down('.formpanel'),
values = form.getValues(),
textfieldValue = values.textfield_name;
...
extraParams: {
val: textfieldValue
},
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'}
]
},
I am trying to populate a second combo depending on the first combo from json response like displaying subcategory value in second combo using category value in first combo. All my values are coming from json array response, I am trying to set root property dynamically and load the store of second combo box in controller in first combo change function but it's not populating the data. Can anybody tell me what the problem is. How do I fix it? I have posted my code below for the change function of first combo:
valueChange:function(combo, ewVal, oldVal,optionsVal) {
for(var i=0;i<tempstore.getCount();i++){
var record = tempstore.getAt(i);
//checking for user selection id with store id
if(record.get('categoryId')==ewVal)
{
value="category.category1.category["+i+"].subCategory.subCategory1";
tempsecondCompostore.getProxy().getReader().setRootProperty(value);
tempsecondCompostore.load();
cmbSecond.setStore(tempsecondCompostore);
mdSecond.setDisplayField('subCategoryName');
cmdSecond.setValueField('subCategoryId');
break;
}
}
This is my Second combo Model:
Ext.define('Test.model.SubCategoryModel', {
extend : 'Ext.data.Model',
fields : [
{
name:'subCategoryName',
type:'string'
},
{
name:'subCategoryId',
type:'string'
}
]
});
This is my Second Combo store:
Ext.define('Test.store.SubCategoryStore', {
extend : 'Ext.data.Store',
storeId : 'secondcombo',
model : 'Test.model.SubCategoryModel',
//autoLoad : 'true',
proxy : {
type : 'ajax',
url : 'data.json',
reader : {
type : 'json',
rootProperty:'category.category1.category[0].subCategory.subCategory1
}
}
});
In View Displaying combo:
xtype: 'fieldset',
width:400,
heigth:200,
items: [
{
xtype: 'selectfield',
label: 'Select',
store : 'secondcombo',
width:400,
heigth:200,
queryMode: 'local',
displayField :'subCategoryName',
valueField :'subCategoryId',
id:'cmbSecond'
}
]
Thanks
The problem is that the load() of the store is asynchronous and you need to include the lines after this call in the callback.
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');
}
}
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);
}
},