Related
How to reset chained combobox in my example the extjs way?
Consider this two comboboxes:
{
xtype: 'combo',
bind:{
store: '{contacts}'
},
reference: 'contactsCombo',
displayField: 'name',
name: 'contact',
typeAhead: false,
editable: false,
fieldLabel: 'Contact',
emptyText: 'Select a contact...',
anchor: '95%',
listeners: {
change: 'onSelectChange'
},
},
{
xtype: 'combo',
name: 'phone',
reference: 'phonesCombo',
fieldLabel: 'Phone',
displayField: 'number',
valueField:'id',
hiddenName: 'id',
emptyText: 'Select a phone...',
bind: {
store: '{contactsCombo.selection.phoneNumbers}'
},
anchor: '95%'
}
And corresponding models defines:
Ext.define('AppsBoard.model.Contact', {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
});
Ext.define('AppsBoard.model.ViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.related',
stores: {
contacts: {
model: 'AppsBoard.model.Contact',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
}
});
Ext.define('AppsBoard.model.PhoneNumber', {
extend: 'Ext.data.Model',
fields: [
'id',
{
name: 'contact_id',
type: 'int',
reference: {
type: 'AppsBoard.model.Contact',
inverse: {
role: 'phoneNumbers'
}
}
},
'number'
],
proxy: {
type: 'MyProxy',
reader: {
type: 'json'
}
}
});
Ext.define('AppTest.store.MyProxy', {
extend: 'Ext.data.proxy.Proxy',
alias: 'proxy.MyProxy',
read: function (operation) {
var resultSet = {
1: [{
"id": 1,
"contact_id": 1,
"number": "6045551212"
},
{
"id": 2,
"contact_id": 1,
"number": "8009996541"
}],
2: [
{
"id": 3,
"contact_id": 2,
"number": "1232131233"
}
]
};
operation.setResultSet(this.getReader().read(resultSet[operation.getFilters()[0].getValue()]));
operation.setSuccessful(true);
},
erase: function (operation) {
console.log(operation);
}
});
My problem is when i switching my parent Combobox, it's associated child combobox shows valueField instead of displayField.
https://fiddle.sencha.com/#fiddle/vtg
you can see in your fiddle it's not use valueField but it's keep the value.
Since the store has been change the value is now not associated to anything in the new store, therefore you keep seen only the value.
you can clean the box by setting the forceSelection
{
xtype: 'combo',
name: 'phone',
reference: 'phonesCombo',
fieldLabel: 'Phone',
displayField: 'number',
valueField:'id',
hiddenName: 'id',
emptyText: 'Select a phone...',
forceSelection: true,
bind: {
store: '{contactsCombo.selection.phoneNumbers}'
},
anchor: '95%'
}
as long as you know there won't be a duplicates IDs
I have a grid in which I want to filter some results. For filtering the result a popup is opened and the user can select the search criteria and filter the results. The php file is executed as well as the result is returned to the popup, but it is not displaying in the main grid. Here is my code.
This code displays the grid and is displaying the result when the user selects the radio button for filtering purpose :
var checkModel = new xg.CheckboxSelectionModel();
var orderGridPanel = {
id: 'orderGridPanel',
xtype: 'editorgrid',
title: 'Orders',
height:350,
clicksToEdit: 2,
frame: true,
viewConfig: {
forceFit:true
},
cm: new xg.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{header:"nr",dataIndex:'nr',hidden:true}
,checkModel
,{header:"Order Id",dataIndex:'order'}
,{header:"Order Date",dataIndex:'date', renderer:Ext.util.Format.dateRenderer('m/d/Y')}
,{id:'created_by',header:"Order By",dataIndex:'created',align:'left'}
,{id:'order_type',header:"Order Source",dataIndex:'order',align:'left'}
,{header:"Order Type", dataIndex:'category'}
,{header:"Sub Category",dataIndex:'sub_cate_nm'}
,{header:"Item",dataIndex:'item'}
,{header:"Properties",dataIndex:'order'}
,{header:"Status",dataIndex:'order'}
,{header:"Action",renderer: renderViewResults}
]
}),
sm: checkModel,
store: new Ext.data.Store({
root: 'results',
method: 'POST',
autoSave: false,
batch: true,
proxy: new Ext.data.HttpProxy({
api: {
read: 'results.php?task=LISTING',
create: 'results.php?task=CREATE',
update:'results.php?task=UPDATE',
destroy: 'results.php?task=DELETE'
}
}),
writer: new Ext.data.JsonWriter({
encode: true,
writeAllFields: true,
batch: true
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'nr',
root: 'results',
fields: ['nr','order','date', 'created', 'type', 'category', 'sub_category_nm', 'item', 'properties', 'status']
}),
baseParams: ahist_order_params
}),
bbar:[
'-',{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
editMoreData(0);
}
},
'-', {
text: 'Search',
iconCls: 'icon-search',
handler: function(){
displaySearchFilter(origid);
}
},
'-',{
text: 'Sign Orders',
iconCls: 'icon-warning',
handler: function(){
displaySearchFilter();
}
},
'-',{
text: 'Cancel',
iconCls: 'icon-delete',
handler: function(){
displaySearchFilter();
}
},
'-', {
text: 'Refresh',
iconCls: 'icon-table_refresh',
handler: function(){
Ext.getCmp('orderGridPanel').stopEditing(false);
var rs = orderGridPanel.store.getModifiedRecords();
if (rs.length > 0) {
var status = window.confirm("Some data modified on grid, do you want to save grid data before loading latest data ?");
if (status){
orderGridPanel.store.save();
}
}
orderGridPanel.store.load();
}
},
'-', {
text: 'Print',
iconCls: 'icon-print',
handler: function(){
statusStr = getHistGridSelection();
}
}
,'->'
,'Display:','-',
{
xtype: 'radio',
name: 'search_filter',
id:'search_filter_1',
inputValue: 1,
boxLabel: 'Open Orders',
handler: onChangeLoadFilter ,
checked : true
},'-',{
xtype: 'radio',
name: 'search_filter',
id:'search_filter_2',
inputValue: 2,
boxLabel: 'All Orders',
handler: onChangeLoadFilter
},'-',{
xtype: 'radio',
name: 'search_filter',
id:'search_filter_3',
inputValue: 3,
boxLabel: 'Orders 5 days back',
handler: onChangeLoadFilter
}
,'-',{
xtype: 'radio',
name: 'search_filter',
id:'search_filter_4',
inputValue: 4,
boxLabel: 'Cancelled Orders',
handler: onChangeLoadFilter
}
]
};
Now when I click on the search button this code executes:
function displaySearchFilter(id){
var formPanel = new Ext.FormPanel({
frame: true,
labelWidth:150,
bodyStyle: 'padding:5px 5px 0',
items: [{
xtype: 'fieldset',
defaultType: 'textfield',
items: [
{
xtype : 'container',
border : false,
layout : 'column',
anchor : '100%',
style : 'margin-top:8px;margin-bottom:8px;',
defaultType : 'field',items :[
{
xtype: 'label',
style: 'float: left; margin-left:3px;margin-top:3px;',
text: 'From'
},
{
fieldLabel: 'From Date',
xtype: 'datefield',
id: 'from_date',
style: "float: left; margin-left:3px;",
width:70
},
{
xtype: 'label',
style: 'float: left; margin-left:5px;margin-top:3px;',
text: 'To'
},
{
fieldLabel: 'To Date',
xtype: 'datefield',
id: 'to_date',
style: 'float: left; margin-left:5px;',
width:70
},
{
xtype: 'label',
style: 'float: left; margin-left:5px;margin-top:3px;',
text: 'Patient'
},
{
fieldLabel: 'Patient ID',
id:'patient',
xtype: 'textfield',
style: 'float: left; margin-left:5px;',
value: btpacs.data.Origid,
mode:'local'
},
{
xtype:'label',
style:'float:left;margin-left:5px;margin-top:3px;',
text:'Display'
},
{
xtype:'combo',
id:'search_filter',
store:btpacs.data.searchFilter,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
lastQuery: '',
emptyText:'Select an option...',
width : 120
}
]},
{
xtype: 'combo',
fieldLabel: 'Order Type',
name: 'category',
id:'cat',
store: btpacs.data.CpoeCategory,
hiddenName: 'category',
triggerAction: 'all',
emptyText:'Select an option...',
width : 300,
mode: 'local',
lastQuery: '',
listeners : {
select : function (f, e){
//params: { cat_id: Ext.getCmp('cat').getValue()}
//subCategoryStore.load();
var category_id = Ext.getCmp('cat').getValue();
subCategoryStore.reload({
params: { cat_id: category_id}
});
}
}
},
{
xtype: 'multiselect',
fieldLabel: 'Sub Category',
name: 'sub_category',
id:'sub_cat',
displayField: 'sub_cat_name',
valueField: 'sub_cat_id',
store: subCategoryStore,
hiddenName: 'sub_category',
emptyText:'Select Order Type First...',
triggerAction: 'all',
width : 300,
mode: 'local',
listeners : {
click : function (f, e){
var sub_cat_id = Ext.getCmp('sub_cat').getValue();
itemStore.reload({
params: { sub_cat_ids: sub_cat_id}
});
}
}
},
{
xtype: 'multiselect',
fieldLabel: 'Items',
name: 'items',
displayField: 'item_name',
valueField: 'item_id',
store:itemStore,
hiddenName: 'items',
triggerAction: 'all',
width : 300,
mode: 'local'
},
{
xtype : "multiselect",
fieldLabel : "Doctor List",
id: 'placed_doctor_name',
displayField: 'name',
valueField: 'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
lastQuery: '',
store:doctorStore,
width : 300
}]
}],
buttons: [{
text: 'Search',handler: function() {
formPanel.getForm().submit({
method: 'POST',
url: 'ajax/results.php?task=SEARCH', // when this file is executed the result is return properly as I want
root: 'results',
params : {'origid': origid},
success: function(f, a) {
// after the result is successfully returned I cannot display it here.I am not sure what I am missing.Here I want to assign all the result to orderGridPanel
win.close();
},
failure: function(f, a) {
alert("Request failed");
f.markInvalid(a.result.errors);
}
});
}
},
{
text: 'Cancel',
handler: function () {
win.close();
}
}]
});
win = new Ext.Window({
layout: 'fit',
width: 650,
height: 520,
defaults: {
autoScroll: true
},
closeAction: 'close',
title: 'Search Orders',
plain: true,
items: [formPanel]
});
win.show();
}
Thanks in advance.
You need to load the data into the store of the grid if you want the grid to display the data.
Before starting I am sorry with my english.. I don't speak it well ..
So I have a problem with the Combobox in ExtJS4 .. I tried to add a empty line in my combobox list but It's not ok .. i have the list with a empty line but when I trie to select it I can't.. so if someone can help me or have an example please
Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: 'docbody',
title: ' ',
autoHeight: true,
width: 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items: [{
xtype: 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items: [{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus: true,
name: 'title',
displayField: 'name',
valueField: 'value',
tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [{
name: 'Mvr',
value: 'mr'
}, {
name: 'Mrs',
value: 'mrs'
}, {
name: 'Miss',
value: 'miss'
}],
listeners: {
'load': function (store, records, options) {
this.insert(0, '--');
}
}
})
}]
}]
});
});
Unless adding a record to your store will break something else in your program logic, I would suggest doing that and getting rid of the template.
Ext.require([
'Ext.form.',
'Ext.data.',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title : ' ',
autoHeight: true,
width : 600,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
items : [
{
xtype : 'fieldcontainer',
combineErrors: true,
msgTarget: 'side',
fieldLabel: ' Name',
items : [
{
width: 50,
xtype: 'combo',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
editable: false,
selectOnFocus : true,
name: 'title',
displayField: 'name',
valueField: 'value',
//tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields : ['name', 'value'],
data : [
{name : 'Mr', value: 'mr'},
{name : 'Mrs', value: 'mrs'},
{name : 'Miss', value: 'miss'}
],
listeners :
{
'load' : function (store, records, options) {
store.add({name: '--', value: null});
}}
})
}
]
}
]
});
});
I'm trying to load a form from a record selected in a combo.
The store is loaded properly and the combo is populated, but, when I select a value from combo, form fields remain empty.
Any help will be appreciated.
This is the code:
Model:
Ext.define('AA.model.proc.Process', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'owner', type: 'string' },
{ name: 'mail_dest', type: 'string' }
],
proxy: {
type: 'rest',
url : 'data/camp.json',
reader: {
type: 'json',
root: 'camp',
totalProperty: 'count'
}
}
});
Store:
Ext.define('AA.store.proc.Process', {
extend: 'Ext.data.Store',
model: 'AA.model.proc.Process',
requires: 'AA.model.proc.Process'
});
Class:
Ext.define('AA.view.proc.IM', {
extend: 'Ext.window.Window',
alias: 'widget.im',
title: 'IM',
layout: 'fit',
height: 500,
width: 400,
autoShow: true,
plain: true,
modal: true,
headerPosition: 'right',
closable: false,
initComponent: function () {
this.items = [{
xtype: 'form',
fileUpload: true,
width: 550,
autoHeight: true,
border: false,
bodyStyle: 'padding:5px 5px 0',
frame: true,
labelWidth: 100,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'combo',
name: 'name',
store: 'procstore',
fieldLabel: 'Name',
valueField: 'name',
displayField: 'name',
width: 150,
allowBlank: true,
listeners: {
scope: this,
'select': this.loadForm
}
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Owner',
name: 'owner'
}, {
xtype: 'textfield',
fieldLabel: 'E-mail owner',
name: 'mail_dest'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
},
loadForm: function (field, record, option) {
console.log(record)
// firebug returns
// $className "AA.model.proc.Process"
// $alternateClassName "Ext.data.Record"
console.log(this.down('form'))
// firebug returns the right form panel
this.down('form').loadRecord(record);
}
});
This is from the documentation for the select event:
select( Ext.form.field.ComboBox combo, Array records, Object eOpts )
Notice that the second parameter is an Array. But in your example the second parameter is an Ext.data.Record. You are treating array as a record. Modify your loadForm to make it process arrays of records:
loadForm: function (field,records,option) {
this.down('form').loadRecord(records[0]);
}
P.S. By the way you have two fields with name: 'name'.
This is my combobox
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store: [
['tr','Türkçe'],
['ru','Русский'],
['en','English']
],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true
},
Generally, when I want to select the first value of a store, I use this methods:
xtype: 'combo',
fieldLabel: 'prov',
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
listeners: {
afterrender: function(combo) {
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('field1'));
}
}
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
value: 'tr',
selectOnFocus:true
},
For remote comboboxes you need to plug into store's load event to select the value after store is loaded.
You can use the value property like so:
value : 'tr'
then it will display first value by default.
You can use this code, assigning any store element after its id to the default combobox value.
{
xtype: 'combobox',
forceSelection: true,
allowBlank: true,
typeAhead: true,
queryMode: 'local',
colspan: 3,
id: 'filter_column_c',
style: {'margin': '5px 15px 15px 30px'},
fieldLabel: 'Column',
valueField: 'column',
displayField: 'name',
store: nomStores["storeCombo"],
value: nomStores["storeCombo"].getById(1),
},
As an alternative, I faced the need to show a locally stored Store, which was just a matter of listening the afterRender method:
listeners: {
afterRender: function() {
this.select(01);
}
}
01 in this case is the id (valueField) of the element in the Store:
areasCenters: {
data: [{
id: 01,
name: 'Todas'
},
{
id: 02,
name: 'Elegir...'
}
],
autoLoad: true
}