IS there any way to get the last selected option in the radio group?
You can manually add listener on change:
radGrp = {xtype: 'radiogroup',
...
previousVal:undefined,
listeners:[
change: function( this, newValue, oldValue, eOpts )
{this.previousVal = oldValue;}
]}
After this you can access to this attribute
var getRadPrevious= function(){
return radGrp.previousVal;
}
Related
My code is as follows:
https://jsfiddle.net/2g7m5qy5/139/
The initial dummy buttons are disabled. When the input value changes, the 'Dummy' button is enabled.
Suppose I have the following sequence of events:
I change 'a' to 'abc'
The 'Dummy' button is then enabled
I press 'Submit' in the top row
The 'Dummy' button is still enabled
In the top row, I press space then backspace, so that the input is still 'abc'
Note now that the 'Dummy' button is disabled
What I really want is for the Dummy button to be disabled at step (4) above, straight after 'Submit' is pressed.
For some reason, no change is firing after this line of code:
that.initialValues[index] = value;
How do I get my 'Dummy' button to be disabled straight after 'Submit' is pressed?
This issue is about reactivity.
Changing an element from your array will not make the computed based on this array re-render.
You have multiple options here :
Re-assign the array
In your submit method, you can create a copy of the array, change the element and then re-assign the array in your Vue instance :
submit: function(value, index) {
setTimeout(() => {
const initialValues = [ ...this.initialValues ]
initialValues[index] = value;
this.initialValues = initialValues
}, 100);
}
Using $set
You can also use the $set method to set your new value and make the computed re-render :
submit: function(value, index) {
setTimeout(() => {
this.$set(this.initialValues, index, value)
}, 100);
}
I have a simple extjs treegrid, and I want to show something based on row selection, how can I add this listener into my treegrid?
Thanks.
You can use listener for grid's select event.
Ext.create('KitchenSink.view.tree.TreeGrid', {
renderTo: Ext.getBody(),
listeners: {
select: function(selModel, record, index, eOpts) {
console.debug(record.get('user'));
}
}
});
Fiddle with live example: https://fiddle.sencha.com/#fiddle/6t7
I have a grid within a window. The grid has 3 Actions: Edit, Delete and Disable.I was wondering if it is possible to make the text of the Disable Action (which is currently 'Disable/Enable') to be dependent on the Current Status of the record selected. So say the user selects a record whose Current Status is Enabled, then the action's text should be 'Disable'. If, however, the user selects a record whose status is Disabled, then the action's text should be 'Enable'. Is it possible to do this when using Action? Or do I need to use a button instead of Action?
I am assuming your action button is in a toolbar that is docked to the top of your grid panel. The only tricky thing is getting a reference to the grid (without hardcoding it). The grid's 'select' event only gives you a reference to the rowmodel used.
/* Set a action attribute on the Ext.Action so we can find it */
var action = new Ext.Action({
text: 'Do something',
handler: function(){
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something',
itemId: 'myAction',
action: 'myAction' // I don't like itemId's personally :)
});
/* In the Controller */
init: function() {
this.control({
'mygrid': {
select: this.onRecordSelect
}
});
},
onRecordSelect: function(rowModel, record) {
var grid = rowModel.views[0].ownerCt);
var action = grid.getDockedItems('toolbar[dock="top"]')[0].down('button[action="myAction"]');
var enabled = (record.get('CurrentStatus') == "Enabled");
action.setText(enabled ? 'Disable' : 'Enable');
action.setIconCls(enabled ? 'myDisableCls' : 'myEnableCls');
}
/* in SASS */
.myDisableCls{
background-image:url(#{$icon_path}/checkbox.png) !important;
}
.myEnableCls {
background-image:url(#{$icon_path}/checkbox_ticked.png) !important;
}
Good luck!
I solved the problem in another way. This is my code:
grid.getSelectionModel().on({
selectionchange: function(sm, selections) {
if (selections.length > 0) {
Edit.enable();
Delete.enable();
if(selections[0].data.CurrentStatus == "Disabled"){
Disable.setText("Enable");
Disable.enable();
}else{
Disable.setText("Disable");
Disable.enable();
}
} else {
Edit.disable();
Delete.disable();
Disable.disable();
}
}
});
i have a panel which should show the "description" field of "currently activeitem of nestedlist". nestedlist uses the model having fields:
id
text
description
when user taps on any item of nestedList [on selectionchange OR itemtap&backtap], i want to change description in the panel with description of "currently activeItem of nestedList".
Is this possible?
thanks for any help/solution/pointer.
The same problem I had today, and no solution had been found with a nested list, because no single field can be taken from a Ext.data.TreeStore. One solution could be that you have lots of "if-function 'do with all the ID's and then you give each ID a text. But that's not good.
I've decided to make a simple list.
if you want I can show you my solution for the simple list
ps.: I use Sencha Touch 1.1
Update:
NotesApp.views.NaviList = new Ext.List({
fullscreen: true,
flex: 1,
layout: 'card',
scroll: false,
useToolbar: false,
itemTpl: '{text}',
store: store,
listeners: {
itemtap: function (obj, idx, el, e) {
var record = this.store.getAt(idx);
var tle = record.get('text');
index = record.get('index');
NotesApp.views.notesListContainer.setActiveItem(index, { type: 'slide', direction: 'left' });
}
}
}
});
description:
My App has the name: "NotesApp".
"notesListContainer" is a Container where all my List are displayed. "index" is an ID that I get from the store and the calls list.
Now when you tap on my NaviList you set a new ActiveItem in this Container.
thanks a lot for the reply. I also tried using simple list with one Ext.button(back button in case of nestedlist). On itemtap and buttonclink, i change list's content by
var t = new Ext.data.Store and list.setStore(t).
Please let me know if there is any other better option to do it.
hi can anyone tell ho to selct a field in a store
i made a nestedlist and i want when someone clicks on a leaf the message somes oops, you click on a leaf. and leaf is a boolean field.
this is what i have:
new Ext.NestedList({
title: 'Categorieën',
store: NestedListDemo.Groepen_Store,
flex: 1,
listeners:
{
itemtap: function(item)
{
if (leaf==true)
{
Ext.Msg.alert('Oops', 'leaf clicked', Ext.emptyFn);
}
}
}
}),
but i have no idea how to do that with sencha touch.
I'm a little confused about where this leaf property exists. If you take a look at the documents for the NestedList, you will see that there is both an itemtap and a leafitemtap event that the list will fire. My recommendation would be to use the leafitemtap to only get events on the items which are leafs.
So if you alter your code using that function:
listeners:{
leafitemtap: function(sublist, index, element, event, card){
Ext.Msg.alert('Oops', 'leaf clicked', Ext.emptyFn);
//find the item
var item = sublist.store.getAt(index);
//then you can do something with the item
//item.get('leaf')
//sublist.store.remove(item)
}
}