sencha touch select field change event not firing if store has duplicate names
suppose my data looks like
options: [{
text: 'Sencha Touch',
value: 'extjs'
}, {
text: 'Sencha Touch',
value: 'senchatouch'
}, {
text: 'Sencha Animator',
value: 'animator'
}, {
text: 'Sencha Designer',
value: 'designer'
}], // options
for the above code the change event not fired for same text
help me?
change event only fires when the new value is actually different from the old value. Not just for select fields, but for all field.
Related
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I am able to display radio buttons using bootbox prompt. But I am not getting the checked radio button by default. How to do that . Here is my code to displaying radio buttons.
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
I have added checked: true, and tried with checked : "checked" , but not sure these both not working . Any help would be greatly appreciated.
This is actually covered in the documentation, here. I've also answered this previously, but since I don't have a link to that answer at the moment, this is what you need to do:
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
value: '1', /* value sets the initial checked item */
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
The only difference between radiobuttons and checkboxes is that you can only set a single value with radios. NOTE THAT THE TYPES MUST MATCH. In your example, '1' would work, but 1 would not, since the former is a string, whereas the latter is a number. We don't do any explicit type coercion when checking the value attribute.
Since you're referencing the radio type, I assume you're using the 5.x version? If so, I have a work-in-progress update to the docs here, until I can push the 5.x version out. The old docs are still valid, but it (obviously?) doesn't document some of the new features.
Am having a problem with the following selectfield on my form:
{
xtype: 'selectfield',
label: 'Title',
displayField: 'ItemName',
valueField: 'Id',
listeners: {
initialize: function () {
var titleStore = Ext.create('MyApp.store.Titles', {});
this.setStore(titleStore);
}
}
},
On the form which uses the selectfield, whenever I select the option the form updates correctly, but the first item in the list always has a check mark against it. Also when selecting the first item in the list never updates the form. My knowledge of ST is limited but surely this should work out of the box?
Any ideas why this isn't working?
This was down to a silly error. The data coming from the server had identical 'Id' values, so when an item in the list was selected it had the same value as the rest of the items. The select field would then just show the first item that matched the 'Id' value which would be the first in the list.
I am using extjs 4.0.7. I have a requirement wherein I have two combo boxes in the edit mode of a grid and I need to change the data in the second based on the value selected in the first one.
I am using MVC architecture for extjs and a java code that returns json string to populate data in the combo boxes. The code for my first combo box is:
view file:
items: [{
id: 'country',
header: 'Countries',
field: {
xtype: 'combo',
store: [
["USA","USA"],
["India","India"],
],
editable: false,
allowBlank: false,
listeners: {
select: function(combo, records, eOpts){
contactTypeGrid = combo.getValue();
myGrid.fireEvent('LoadStateOnSelect');
}
}
}
},
{
id: 'states',
header: 'Sates',
dataIndex: 'states',
field: {
xtype: 'combo',
store: 'StateStore',
valueField: 'stateDesc',
displayField: 'stateText',
}
}, ....
]
controller:
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
stateStore.load();
},
However, when I run this code, the data in the second store changes in the background but a Loading mask continues to appear in front due to which I cannot select any value.
How should I resolve the issue of connditional data load? Any help will be much appreciated.
Have you tried clearing the selected value in the combobox before reloading the store? You could try calling the clearValue() method on the combo.
I have a temporary fix for this. However, I am still looking for a solution that is more stable and workable.
Solution:
Whenever changing the data in the dependant store you could expand the combo box which loads the new data correctly.
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
statesCombo.expand(); //Here I am assuming that "statesCombo" has a
//reference to the dependant combo box.
stateStore.load();
},
This might save somebody else's time however, In case somebody finds a more viable solution, please let me know as well.
carStore- any store for main combo
carModelStore - store, the content of which should be depended on selection in the carStore
Consider more general and useful example when data is getting from server.
var carModelStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'car-model'],
root: 'rows'
}),
storeId: 'car-model-store',
proxy: new Ext.data.HttpProxy({
url: 'carmodeldataprovider.json?car-name=lamborghini'
}),
autoLoad: true
});
{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
listeners: {
select: function(combo, records, eOpts){
var carName = records.get('car-name');
var carModelStore = Ext.StoreMgr.lookup("car-model-store");
carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
carModelStore.reload();
}
}
}
New to sencha touch here. I've checked out quite a few tutorials online. I am having an issue trying to get the value of a text field. The error I am getting when I click my login button is Uncaught TypeError: Cannot call method 'getValue' of undefined. Does that mean my Ext.getCmp is undefined then? I have this panel wrapped in the regular Ext.setup....onReady:.....
var login = new Ext.Panel({
height:'auto',
scroll:'vertical',
layout:{
type:'vbox',
align:'center'
},
items:[
{
cls:'launchscreen',
html:logo,
padding:10
},
new Ext.form.FormPanel({
width:300,
cls:'loginform',
items:[
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username',
labelWidth: 85
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
labelWidth: 85
}
]
},
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler:function()
{
alert(Ext.getCmp('username').getValue());
}
}
]
})
]
});
EDIT: I was able to get the value if I set the id property on the text field. I've seen some example where the id isn't set and they get the value based off the name property. So I guess my question now is am I supposed to get the value based off id or name?
Using Ext.getCmp() you have to provide the ID of the element whose value you want. See Sencha API doc's for this:
getCmp( String id )
This is shorthand reference to Ext.ComponentManager.get. Looks up an existing Component by id
Parameters
id : String
The component id
You can also find the element by name, but I think it is faster by ID but perhaps also a bit expensive for the browser's engine. Can't say anything about that really.
Anyway, finding field by name is possible by using findField() method. With this method you should provide the id or name of the field that you want. See API doc: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-findField
Example:
var fieldValue= Ext.getCmp("YourFormID").getForm().findField("FieldName").getValue();