Combobox store loaded but won't display - javascript

I want to update the combobox store whenever there is a change in the combobox and display this changed store. My store is loading but combobox won't display it. I can display local store like I want to display but can't do the same for remote json store.
I have a "ProcessController" like this:
onComboboxChange: function(combo, newValue, oldValue) {
var upContainer = combo.up('container');
if(combo.itemId == "cmbServiceList") {
MyApp.app.globals.cmbServiceStore = this.createServiceCmbStore(upContainer.getComponent('cmbServiceList').getRawValue());
}
},
createServiceCmbStore: function(inputData){
var data = {"inputData": inputData};
var mainController = MyApp.app.getController('MainController');
var cmbServiceData = mainController.callService(data,'getServices','json');
var classServices = Ext.JSON.decode(cmbServiceData);
var projectStore = Ext.create('Ext.data.Store', {
fields: ['key', 'text'],
data: classServices
});
return projectStore;
}
init: function(application) {
this.control({
'combobox': {
change: this.onComboboxChange
}
});
_myAppGlobal = this;
},
And it's my combobox in the main viewport:
{
xtype : 'combobox',
anchor : '80%',
listConfig : {
loadingText : 'Searching...',
emptyText : 'No matching posts found.'
},
typeAhead : true,
itemId : 'cmbServiceList',
fieldLabel : 'Servis Adı:',
hideTrigger : true,
displayField : 'text',
store : MyApp.app.globals.cmbServiceStore,
valueField : 'key',
minChars : 1,
queryMode : 'local',
forceSelection: true
}
MyApp.app.globals.cmbServiceStore is a global variable defined in the app.js
When I debug the code I can see the store is loaded but it won't display any stored value in the combobox.

The issue mainly here is, when your combobox is created the MyApp.app.globals.cmbServiceStore is null or undefined, once the combobox is initialized and then you try to define your store it doesn't the combobox as the reference given during initialization to combobox was undefined.
Based on your code it seems that you are just changing the data of the store and not the store fields. So its much better you create the store before combobox initialization and then on combox change you just add the data to store by using store.add
I would recommend another approach, that is add a proxy to your store for the service and just do store.load() on combo change

if(combo.itemId == "cmbServiceList") {
MyApp.app.globals.cmbServiceStore = this.createServiceCmbStore(upContainer.getComponent('cmbServiceList').getRawValue());
upContainer.getComponent('cmbServiceList').bindStore(MyApp.app.globals.cmbServiceStore);
}
instead of
if(combo.itemId == "cmbServiceList") {
MyApp.app.globals.cmbServiceStore = this.createServiceCmbStore(upContainer.getComponent('cmbServiceList').getRawValue());
}
solved the issue.

Related

ExtJS property grid reload after render

I have a property grid :
periods.each(function(record){
var tempPropGrid = me.getView().add(
{
xtype:'propertygrid',
width: 80,
header: false,
title: 'prop grid',
//for some reason the headers are not hiding, we may need to deal with this using CSS
//hideHeaders: true,
enableColumnResize: false,
sortableColumns: false,
nameColumnWidth: 1,
source: record.data,
sourceConfig: {
periodScrumMaster: {
editor: Ext.create('Ext.form.ComboBox', {
tdCls: 'red',
store: team,
queryMode: 'local',
displayField: 'personName',
valueField: 'personName',
listeners: {
'expand' : function(combo) {
var gridvalues = this.up('propertygrid').getSource();
combo.getStore().clearFilter(true);
combo.getStore().addFilter({property: 'teamName', value: teamName});
combo.getStore().addFilter({property: 'periodName', value: gridvalues.periodName});
var totalFTE = team.count();
console.log(totalFTE);
var teamStore = Ext.getStore('personPeriods');
console.log('store');
console.log(teamStore);
},
}}),
displayName: 'Scrum Master'
},
},
That has a render listener:
beforerender: function(){
debugger;
var gridValues = this.getSource();
// console.log(record);
//debugger;
// filter periods for this period only
periods.filterBy(function(record,id){
if(record.get("periodName") === gridValues.periodName){
return true;
}});
// filter teamMembers for this period and team
var view = this.up();
var vm = view.getViewModel();
var store = vm.getStore('teamMembers');
store.filterBy(function(record,id){
if(record.get("periodName") === gridValues.periodName) {
return true;
}});
//store.clearFilter(true);
store.addFilter({property: 'teamName', value: teamName});
// get FTEs assigned to this team in this period by counting records
var resourcedFtes = store.count();
// Here I check the record in the periods store to make sure the data matches up with how many resourcedFte there is an update it if required
// This is super bad and will need to refactor
periods.each(function(record,idx){
var value = record.get('resourcedFte');
if(value != resourcedFtes){
record.set('resourcedFte',resourcedFtes);
record.commit();
vm.data.parentController.saveParent();
}});
// Need to call save parent so that the record is updated when we update it above
//Clear everything so that we can start fresh next period
store.clearFilter(true);
//periods.clearFilter(true);
Basically there is some logic to check if the data is correct/up to date and if its not it updates it. This works fine, but the data is not then loaded into the grid. I have to refresh after rendering the grid for it to load correctly.
Is there a way I can call a refresh or reload method on the property grid to load the data again inside an if statement?
If I understand your question, I would suggest you to programm the store proxy so that it returns the whole changed record.
Is your store parametered with autoLoad enabled?
(sorry I can't (yet) comment)

Combobox store load after updating form with Model data

I noticed that there are a lot of ways to populate a form with data.
I want to do it the ExtJS4 MVC style.
However I now see something unwanted happening.
My form has a combobox tied to a store.
The store is filled after populating the form with the model data.
My view / form
Ext.define('WWT.view.settings.Form', {
extend : 'Ext.form.Panel',
alias : 'widget.settingsform',
title : 'WWT Instellingen',
bodyPadding : 5,
defaultType : 'textfield',
initComponent : function() {
var me = this;
me.dockedItems = me.buildToolbars();
me.items = me.buildItems();
me.callParent();
},
buildItems : function() {
var lovEdities = Ext.create('WWT.store.lov.Edities');
return [{
fieldLabel : 'Huidige Editie',
xtype : 'combo',
emptyText : 'Kies een Editie',
name : 'huidige_editie_id',
store : lovEdities,
queryMode : 'local',
displayField : 'naam',
valueField : 'id',
forceSelection : true
}, {fieldLabel : 'Scorebord Slogan',
name : 'scorebord_slogan_regel',
width: 200,
maxLength : 10
}, {
fieldLabel : 'Tijd Offset Scorebord',
name : 'scorebord_tijdoffset'
}];
},
buildToolbars : function() {
return [{
xtype : 'toolbar',
docked : 'top',
items : [{ xtype:'button',
text : 'Save',
iconCls : 'save-icon',
action : 'save'
}]
}];
}
});
My Controller
Ext.define('WWT.controller.settings.Settings', {
extend : 'Ext.app.Controller',
models : ['secretariaat.Settings'],
views : ['settings.Form'],
init : function() {
var me = this;
me.control({
'#settingsId button[action=save]' : {
click : me.save
},
'settingsform' : {
afterrender : function(view) {
Ext.ModelMgr
.getModel('WWT.model.secretariaat.Settings')
.load(1, {
success : function(record) {
view.loadRecord(record);
}
});
}
}
});
},
save : function() {
var form = this.container.down('form');
var model = this.getModel('settings.Settings').set(form.getForm()
.getValues());
model.save();
},
addContent : function() {
this.container.add({
id : 'settingsIDQ',
xtype : 'settingsform',
itemId : 'settingsId'
});
}
});
In my Chrome Network window, I can see that the store request is fired later.
Any thoughts on how to load the store before updating the form ?
I thought of doing it in the afterRender too, but I think that even then the order is not guaranteed.
Seemed that there was nothing wrongs with the (load) mechanism.
There was an issue in the data type of the ID field of the Combobox and the field which was part of the settings. Int vs String.
This caused the issue.
I get around the form loading issue in a few different ways.
If the store is used a lot throughout the application, I load the store early in the loading of the application by looking it up with Ext.getStore('my store name here') and then calling .load() during startup. If you want the store or stores to load only when you reach the form itself, I would hook the component's initialization in initComponent and then you can get the form's fields and with a for-loop can walk through the fields and initialize all stores with .load() before the form component accesses server data.
Here are my edits to your initComponent method. I haven't debugged this code, but it should work great for you.
initComponent() {
var me = this;
// this is where we will load all stores during init
var fields = me.getForm().getFields();
for (var i = 0; i < fields.length; i++) {
var store = fields[i].getStore();
if (store && !store.isLoaded()) {
store.load();
}
}
me.dockedItems = me.buildToolbars();
me.items = me.buildItems();
me.callParent();
},

CKEditor Plugin: Setting a default value based on a selection

I created a custom CKEditor Plugin that takes a text value and inserts it into some HTML. Everything works fine, but I don't know how to populate the field with a default value. I would like the default value to be blank if it is a new element. But i would like the default value to be the value of the selected item while editing it. Otherwise I am unable to edit the value inside of the HTML without going into Source mode, or completely deleting everything and starting over again.
CKEDITOR.dialog.add( 'videoLinkDialog', function( editor )
{
return {
title : 'Video Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
{
type : 'html',
html : 'This dialog window lets you embed Vimeo videos on your website.'
},
{
type : 'text',
id : 'url',
label : 'Video ID',
validate : CKEDITOR.dialog.validate.notEmpty( 'This field cannot be empty.' ),
required : true,
commit : function( data )
{
data.text = this.getValue();
}
},
]
}
],
onOk : function()
{
val = this.getContentElement('general', 'url').getInputElement().getValue();
var text = '<a class="colorbox-inline" href="http://player.vimeo.com/video/' + val + '?width=915&height=515&iframe=true&autoplay=1"><img class="vid-thumbnail" src="http://placehold.it/350x150" data-vimeo-id="' + val + '" /></a>';
this.getParentEditor().insertHtml(text)
},
};
} );
There are several ways,
The simplest way being to add setup to each of your dialog elements as demonstrated in the CK Editor Plugin Tutorial like so:
{
type : 'text',
id : 'url',
label: 'Video ID',
validate : CKEDITOR.dialog.validate.notEmpty( 'This field cannot be empty.' ),
required : true,
setup : function ( data ) {
this.setValue(data.getAttribute('url'));
}
commit : function( data ) {
data.text = this.getValue();
}
}
Alternatively, you could also use this event handler that will fire before the dialog is rendered:
onShow: function () {
// your code here
// eg. this.setValue(*ELEMENT_ID*, *ELEMENT_VALUE*);
}
here you can view the element that called the event and get or set any values you may need to populate your dialog.
You should also add a click listener like the following to your plugin.js file to show the dialog from a selected element like so:
editor.on('doubleclick', function (e) {
var el = e.data.element;
if (el == *YOUR_CUSTOM_ELEMENT*)
e.data.dialog = *DIALOG_NAME*;
});

EXTJS GRID and store

I have EXT JS 4.2 Grid and store.
Now one page load grid get data from store and display on UI.
I have date drop down filter on page. on date selection of date filter one request should go to server fetch data from db and reload store with updated data, and grid should update with updated store value.
My issue is how can i unbind exiting store from grid load, set store params with date, then fetch new data in store and bind to grid. and show updated data on grid?
thanks in advance
this is code where grid is created , one button is created on click of which new params needs to pass to server
{
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 152px;',
width: 960,
height: 'auto',
cls: 'portlet full',
items: Ext.getCmp('grid')
}, { //Create Button to fetch Grid Checked Data//
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 163px;padding-top: 20px;padding-bottom: 59px;',
items: [
Ext.create('Ext.Button', {
name: 'Click me',
width:'40px',
handler: function() {
update =============================================
Ext.create('store', {storeId: 'storetest2'}).load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
// To Perform some call back operations
}
});
scndStore = Ext.data.StoreManager.lookup('storetest2'),
Ext.getCmp('grid').reconfigure(scndStore);
update =============================================
})
],
After getting data into the new store,you can use
grid.reconfigure(store, [columns])
to change which store is bound to the grid..Please have a look docs.
A simple working fiddle
Update:Try this
var store2 = Ext.create('Ext.data.Store', {
model : 'store2Model', //Don't miss to mention model
storeId: 'storetest2',
proxy : {
type : 'ajax',
url :'someUrl'
reader : {
type : 'json',
root : 'items' // depends
}
}
});
store2.load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
grid = Ext.getCmp('grid'); //First check whether you are getting this comp properly
grid.reconfigure(store2);
}
});
It is fixed with this.getStore().load({ params: {test:'test1'},.. I was using filter and I was not clearing it before second load .this.getStore().clearFilter(true);

How to load gridcombobox with dynamic datastore correctly?

I am working on a simple grid form which has a combobox and datasource as proxy (like http://goo.gl/2fxP8). The combobox loads properly but when I try to select one of the list items the gridform closes and combobox doesn't close. Can anyone help me out ?
I am planning to extend the combobox onselect function as well so that once the list item is chosen other fields will be loaded dynamically.
searchField = new Ext.form.ComboBox({
store: ds,
name : 'search',
id:'search',
fieldLabel : 'Search',
displayField:'title',
typeAhead: false,
loadingText: 'Searching...',
pageSize:10,
minChars:2,
triggerAction: 'all',
width: 200,
tpl: resTpl,
itemSelector: 'div.search-item',
onSelect: function(record){
/* Set Values to other fields here */
}
}),
The code for saving is :
Ext.Ajax.request
({
url:"some url",
scope:this,
params:
{
},
success: function(objServerResponse)
{
eval("var resultSet = " +objServerResponse.responseText);
if(resultSet.isOk)
{
this.collapse();
}
else
{
}
}
});
i think the problem is you are OVERIDE the onSelect function..
take look here (try to find onSelect), onSelect method is private...
and as you can see, inside onSelect there is collapse function to call by default..
so, if you are overide onSelect.. your combo never collapse by default..
you have to do that manually.. like what kiran said...
and my question is, why did you overide the onSelect function ??..
if you need to do something When the combo was selected, why don't you set it as listeners ??
try change your code :
onSelect: function(record){
/* Set Values to other fields here */
}
with this one :
listeners : {
"select" : function(combo,data,idx){
console.info(data);
}
}

Categories