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();
},
Related
This is the component where I'm trying to put a Tooltip:
this.textFieldStreet = new Ext.form.TextField({
id : 'idTextFieldStreet',
fieldLabel : 'Street',
autoCreate : limitChar(30,30),
listeners : {
render : function(c){
Ext.QuickTips.register({
target : c.getEl(),
html : '' + Ext.getCmp('idTextFieldStreet').getValue()
}
});
}
}
});
In another .js I created the function that define every component like you see before and invoke the function as you see forward:
var componentFormCustomer = new ComponentFormCustomer();
Then I set value like:
componentFormCustomer.textFieldStreet.setValue('Some street info')
Now, here's the problem, I was looking for some ideas to do that and found nothing, I don't know if this is the right way to accomplish the tooltip. Help!
Solution:
Define show listener for created tooltip. In this listener get the value of textfield and update tooltip.
With this approach, the tooltip's content will change dynamically and will show the content of tooltip's target.
Ext.onReady(function(){
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
renderTo : Ext.getBody(),
id : 'idTextFieldStreet',
fieldLabel : 'Street',
value : 'Initial value',
bodyCfg : {
tag: 'center',
cls: 'x-panel-body',
html: 'Message'
},
listeners : {
render : function(c) {
new Ext.ToolTip({
target : c.getEl(),
listeners: {
'show': function (t) {
var value = t.target.getValue();
t.update(value);
}
}
});
}
}
});
var button = new Ext.Button({
renderTo : Ext.getBody(),
text : 'Change Tooltip',
handler : function () {
textFieldStreet.setValue('New value');
}
});
});
Notes:
Tested with ExtJS 3.4.1.
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)
I am using extjs4 and Spring at server side. I need to integrate Google Places Auto-complete inside one of the extjs4 form. Is there any way this can be done. I am not sure weather we can integrate Google Auto-complete with extjs I have searched but not find anything more specific to my requirement. Please guide me ..... look at my code ...
Ext.define('abce.view.ReportMissing', {
extend : 'Ext.panel.Panel',
alias : 'widget.report_missing',
bodyPadding : 10,
autoScroll : true,
frame : true,
items : [{
id : 'report_form',
xtype : 'form',
frame : true,
defaultType : 'textfield',
items : [{
xtype : 'combobox',
store : new Ext.data.Store({
autoLoad : true,
//fields : ['memberName', 'email'],
proxy : {
type : 'ajax',
headers : {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
},
url : 'http://maps.googleapis.com/maps/api/geocode/json?address=hyd+&sensor=false',
remoteSort : true,
method : 'GET',
reader : {
type : 'json',
successProperty : 'status'
}
}
})
}]
});
https://developers.google.com/places/documentation/autocomplete
Why not instead of use the sencha combobox, use a simple text input as suggest the google api autocomplete documentation.
(I first try with a just common textfield but it didn't work)
Then declare a panel or component with html as the following example, and then assign the render:
xtype: 'component',
html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
listeners: {
render: function () {
var input = document.getElementById('searchTextField');
autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
autocomplete.addListener('place_changed', this.fillInAddress);
},
And result in this:
The proxy cannot be used to retrieve data from a URL on a different origin. See the limitations section of Ext.data.proxy.ajax for more information.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.Ajax
You will probably need to set up an endpoint on your server to proxy the request to Google if you want to use that API.
I was looking for a way to do the same, and I came up writing a custom proxy against the google map javascript library
Then I used this custom proxy in a regular combo box
ComboBox:
Ext.create('Ext.form.field.ComboBox', {
store: {
fields: [
{name: 'id'},
{name: 'description'}
],
proxy: 'google-places'
},
queryMode: 'remote',
displayField: 'description',
valueField: 'id',
hideTrigger: true,
forceSelection: true
});
Custom proxy: (inspired from Ext.data.proxy.Ajax)
Ext.define('com.custom.PlacesProxy', {
extend: 'Ext.data.proxy.Server',
alias: 'proxy.google-places',
constructor: function() {
this.callSuper();
this.autocompletePlaceService = new google.maps.places.AutocompleteService();
},
buildUrl: function() {
return 'dummyUrl';
},
doRequest: function(operation) {
var me = this,
request = me.buildRequest(operation),
params;
request.setConfig({
scope : me,
callback : me.createRequestCallback(request, operation),
disableCaching : false // explicitly set it to false, ServerProxy handles caching
});
return me.sendRequest(request);
},
sendRequest: function(request) {
var input = request.getOperation().getParams().query;
if(input) {
this.autocompletePlaceService.getPlacePredictions({
input: input
}, request.getCallback());
} else {
// don't query Google with null/empty input
request.getCallback().apply(this, [new Array()]);
}
this.lastRequest = request;
return request;
},
abort: function(request) {
// not supported by Google API
},
createRequestCallback: function(request, operation) {
var me = this;
return function(places) {
// handle result from google API
if (request === me.lastRequest) {
me.lastRequest = null;
}
// turn into a "response" ExtJs understands
var response = {
status: 200,
responseText: places ? Ext.encode(places) : []
};
me.processResponse(true, operation, request, response);
};
},
destroy: function() {
this.lastRequest = null;
this.callParent();
}
});
Note: I wrote this against ExtJs6 but it should basically work alike for ExtJs4.
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.
I have this treepanel and i want to call this.getId() method of mainpaneltree from inside "Expand all" button But all i get is method undefined.I tried to put scope:thisin config objects but no success.
Ext.define('MA.view.patient.Tree', {
extend : 'Ext.tree.Panel',
alias : 'widget.EditPatientTree',
title : 'Simple Tree',
width : 150,
store:'Tree',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
text : 'Expand All',
scope: this,
handler : function() {
//this.expandAll gives "Uncaught TypeError: Object [object DOMWindow] has no method 'getId'"
this.expandAll();
//the same error for this.getId();
this.getId();
}
} ]
} ],
rootVisible : false,
initComponent : function() {
this.callParent(arguments);
}
});
So my question is how to get reference to the current component and call its methods while you are inside nested methods or config objects of current component
The handler has arguments that are passed in, 1 of them is normally the button. From the button you can get the container.
Ext.define('MA.view.patient.Tree', {
extend : 'Ext.tree.Panel',
alias : 'widget.EditPatientTree',
title : 'Simple Tree',
width : 150,
store:'Tree',
dockedItems : [ {
xtype : 'toolbar',
items : [ {
text : 'Expand All',
scope: this,
handler : function(button, event) {
var toolbar = button.up('toolbar'), treepanel = toolbar.up('treepanel');
treepanel.expandAll();
treepanel.getId();
}
} ]
} ],
rootVisible : false,
initComponent : function() {
this.callParent(arguments);
}
});
You can make use of the methods like up, down for get references of components that are parent or child. In your case, you could get the reference of the tree panel by:
myTree = this.up('treepanel');
Similarly, you could use the down method, to get hold of any child reference.