We Keep Coding

Ext.Defer gives getAsynchronousLoad Error

I've just defined a combobox. Firstly it loads a countrylist and when select a value it's fire a change event which doing a ajax query to DB within searching service;
The thing; this configuration works pretty well when I click and open combobox items. But when I'm typing to combobox's field it's fires listener's store.load and because of none of country selected yet, the search query url gives not found errors of course.
{
xtype: 'countrycombo',
itemId: 'countryName',
name:'country',
afterLabelTextTpl: MyApp.Globals.required,
allowBlank: false,
flex: 1,
// forceSelection: false,
// typeAhead: true,
// typeAheadDelay: 50,
store: {
proxy: {
type: 'ajax',
// isSynchronous: true,
url: MyApp.Globals.getUrl() + '/country/list?limit=250',
// timeout: 300000,
reader: {
type: 'json',
rootProperty: 'data'
}
},
pageSize: 0,
sorters: 'description',
autoLoad: true
}
,
listeners: {
change: function (combo, countryId) {
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy()
.setUrl(MyAppp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
// Ext.defer(cityStore.load, 100);
cityStore.load();
}
}
},
I've tried several things as you see in code above to set a delay/timeout for load during typing to combobox text field; Ext.defer, timeoutconfig on proxy, typeAhead config on combo but none of them worked!
I thought that Ext.defer is the best solution but it gives this error:
Uncaught TypeError: me.getAsynchronousLoad is not a function at load (ProxyStore.js?_dc=15169)
How can I set a delay/timeout to combobox to fires load function?

Instead of Ext.defer(cityStore.load, 100);
try using this :
Ext.defer(function(){
cityStore.load
}, 300);
If this doest work, try increasing your delay
or you can put a logic before loading
like this :
if(countryId.length == 5){
cityStore.load
}
This will ensure that you Entered the right values before loading
Hope this helps, and Goodluck on your project

well.. I've tried to implement #Leroy's advice but somehow Ext.defer did not fire cityStore.load. So I keep examine similar situations on google and found Ext.util.DelayedTask
So configured the listerens's change to this and it's works pretty well;
listeners: {
change: function (combo, countryId) {
var alert = new Ext.util.DelayedTask(function () {
Ext.Msg.alert('Info!', 'Please select a country');
});
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy().setUrl(MyApp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
if (typeof countryId === 'number') {
cityStore.load();
} else {
alert.delay(8000);
}
}
}

Rendering extjs component to html tpl

i have a simple template:
tpl: '<table><tr><td>{LogicalCondition}</td></tr></table>',
Instead of {LogicalCondition} I want to place extjs component (dynamically).
(http://jsfiddle.net/4t458yxo/2/)
Ext.define('MyApp.view.ux.form.BoolDisplayField', {
extend: 'Ext.Component',
alias: 'widget.booldisplayfield',
tpl: '<table><tr><td>{LogicalCondition}</td></tr></table>',
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
applyValue: function (v) {
if (v) {
this.update({
//instead of combo i am getting [object object]
LogicalCondition: Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: ["a"],
queryMode: 'local',
displayField: 'name'
})
});
}
return v;
}
});
var c = Ext.create('MyApp.view.ux.form.BoolDisplayField', {
renderTo: Ext.getBody(),
value: false
});
c.setValue(true);

Ext (X)Template does not allow components in its data but plain objects or arrays are assumed. Ext when processing the new data for the template (update call) understands "LogicalCondition" as text - you get object (combo instance) converted to text ([object object]).
Most likely, there is another way how to achieve what you want, (X)Template/data is obviously not the best one.

You could use a controller? Create the component you need dynamically when you need it and just use add() to a Container with table layout?
http://docs.sencha.com/extjs/4.2.2/?mobile=/api/Ext.container.AbstractContainer#method-add

get checkbox value without using Ext.getCmp

I am trying to get value of this checkbox
Ext.define('myRoot.myExtApp.myForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
scope: this,
constructor: function() {
this.callParent(arguments);
this.myFieldSet = Ext.create('Ext.form.FieldSet', {
scope: this,
columnWidth: 0.5,
collapsible: false,
defaultType: 'textfield',
layout: {
type: 'hbox', align: 'stretch'
}
});
this.mySecondForm = Ext.create('myRoot.myExtApp.myForm2', {
scope: this,
listener: this,
margin: '1 3 0 0'
});
this.myCheckBox = Ext.create('Ext.form.Checkbox', {
scope: this,
//id: 'myCheckBox',
boxLabel: 'Active',
name: 'Active',
checked: true,
horizontal: true
});
this.myFieldSet.add(this.mySecondForm);
this.myFieldSet.add(this.myCheckBox);
this.add(this.myFieldSet);
}
});
As you can see I have another form
Ext.define('myRoot.myExtApp.myForm2', {
where I have a handler, that should get the value of the checkbox from "myForm"
How can I get the value of my checkbox from Form2 without using Ext.getCmp? I know I can get the value of the checkbox if I do
Ext.getCmp('myCheckBox').getValue();
but using
this.myCheckBox.getValue();
gives me undefined error.
UPDATE - with Wared suggestion I tried this inside myForm2
this.temp=Ext.create('myRoot.myExtApp.myForm'), {});
var tempV = this.temp.myCheckBox.getValue();
I was able to get the value but I get the same true value even if I uncheck the box

I assume you worry about performance loss due to excessive use of component queries. A nice trick to minimize component queries could be to define a new method inside a closure in order to cache the result of the first getCmp call. Wrapping the definition of the method inside a closure allows to avoid using global scope or a useless class property.
getMyCmp: function (cmp) {
// "cmp" does not exist outside this function
return function () {
return cmp = cmp || Ext.getCmp('#myCmp');
};
}()

One solution could be :
myRoot.myExtApp.myForm.myCheckBox.getValue();
Beware, wrong answer. See comments below for a valid solution.

ExtJS: programatically replacing elements in a ComboBox

I just typed up another post and halfway through I figured out my problem. Let's see if it happens again.
I need to be able to update another drop down if a given one is selected. My problem is the secondary drop down isn't loaded the first time; nothing happens on the page. If the user selects the same element a second time, then everything works fine.
I'm programatically generating a bunch of ComboBoxes:
var item = new Ext.form.ComboBox({
store: store,
id: input.id,
name: input.id,
displayField: 'description',
valueField: 'id',
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select one...',
typeAhead: false,
editable: true,
allowBlank: allowBlank,
selectOnFocus:true,
fieldLabel: input.label,
listeners: {
scope: this,
'select': checkDependencies
},
autoHeight: true
});
My problem occurs when I try to update the dependent drop down. Here's the function that gets called when the user selects an option:
function checkDependencies(el, ev){
debug(el);
debug(el.value);
var val = el.value;
if (Ext.isArray(dependencies[val])) {
var id = dependencies[val]['changeId'];
var input = Ext.getCmp(id);
var vals = dependencies[val]["vals"];
input.store.removeAll();
gridForm.doLayout();
debug("num elements: " + vals.length);
input.autoHeight = true;
for (var i=0;i<vals.length;i++) {
input.store.add(vals[i]);
}
gridForm.doLayout(false,true);
}
}
It hits all the debug lines. There are elements in the list, but like I said, the first time the user selects an element it doesn't work, but subsequent selections work fine.
I ended up putting doLayouts eveywhere, but it didn't seem to help.

Try setting queryMode: 'local' on the secondary box, and in your checkDependencies, doing input.lastQuery = ''.

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);
}
}