I am trying to generate an event on checking the radio field. The field is checked on a single tap but the event is generated only when i double tap on it.
Anything that am doing wrong. This is the code that I have used.
{
xtype : 'radiofield',
// ui:'plain',
id : 'r1',
name : 'sendDoc',
value : 'Default',
label : 'Default',
labelWidth : '50%',
checked : true,
//baseCls: 'x-plain',
listeners : {
check: function ( radioFld, event, opts ){
if(radioFld.isChecked()){
Ext.getCmp('workstep').disable();
}
}
}
},
{
xtype : 'radiofield',
name : 'sendDoc',
id : 'r2',
value : 'Source Workstep',
label : 'Source Workstep',
labelWidth : '50%',
listeners : {
check : function(radioFld, event, opts ) {
console.log(radioFld.isChecked());
if (radioFld.isChecked()) {
Ext.getCmp('workstep').enable();
}
}
}
}
Thanks in advance.
I'm not sure what your problem is, but if you look at this fiddle:
http://www.senchafiddle.com/#EiQID#UTcRj#bTsT0,
you'll see that the events 'check' and 'uncheck' are triggered correctly when changing the selection from the first radiofield to the second and vice-versa, using a single tap.
Is that working for you?
If not, what is happening exactly?
Related
I have a card layout, Inside card there are many panels inside card items.
I want some listener which will be fired as soon as panel inside card layout is visually activated.
i was trying to achieve the same with Activate and show event,but i am not getting desired output.
One approach would be to write a controller that references all the views, if you are using the MVC pattern:
Ext.define('MyApplication.controller.PanelsController', {
extend : 'Ext.app.Controller',
itemId : 'panelsController',
views : [
'Panel1',
'Panel2' // etc...
],
init : function (application) {
this.control(
{
'panel#panel1' : {
show : this.myListener
}
});
},
myListener : function () {
// do stuff here.
}
});
i am working in extjs4. i have created treeview as-
Ext.define('Balaee.view.qb.qbquestion.tree1', {
extend: 'Ext.tree.Panel',
title: 'Simple Tree',
width: 200,
id:'tree1',
height: 150,
alias : 'widget.tree1',
store:'qb.qbquestionStore',
displayField: 'text',
rootVisible : true,
multiSelect : true,
valueField:'id',
renderTo: Ext.getBody(),}),
Json send via server gets properly attached to above treepanel. But whwn i am trying to click on treenodes its giving me error as "TypeError: listener.fireFn is undefined" in mozilla firefox and error as "Uncaught TypeError: Cannot call method 'apply' of undefined " in chrome. Also nodes are being expanded only once.
In controller for itemclick, i have written code as-
init : function() {
this.control({
'tree1':{
itemclick: {
fn: function (view, record, item, index, e) {
if(record.data.checked==true)
{
console.log(record.data.id);
}
}
},
So what changes i need to do to remove error?
'tree1' is an incorrect selector. In order to attach an event handler to component by its id prepend id with hashtag #:
this.control({
'#tree1':{
UPDATE
I missed line alias : 'widget.tree1'. Therefore your selector was correct.
Try to change listener to:
'tree1':{
itemclick: function (view, record, item, index, e) {
if(record.data.checked==true)
{
console.log(record.data.id);
}
}
I believe the listener format shown in your code is not supported.
So I have the code below, and it works except the 'plain : true', which is suppose to remove the background color of the tabs. Is it because I'm not creating the object using something like this?
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
plain: true,
If I need to do it that way how do I do the Create command from within an items list?
Ext.define('My.view.TabContainer', {
extend : 'Ext.Container',
xtype : 'tabcontainer',
layout : 'border',
items : [
{
itemId : 'theRealTabContainer',
xtype : 'tabpanel',
plain : true,
region : 'center',
items : [
{
xtype : 'company'
}
,
{
xtype : 'test'
}
]
}
]
});
No, what you're doing looks fine. This looks like a bug after testing it out, but it only happens with a border layout as it's adding 'x-border-layout-ct' that is setting the background-color. The tab panel is actually doing the right thing still. You can do 2 things:
Add a class to the container (possibly an existing plain class from extjs or your own)
Set a style on the container
Ext.create('Ext.Container', {
layout: 'border',
style: 'background-color: transparent !important',
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 grid panel with JSON store, if I give alert (myGrid.model.prototype.fields.keys), it is showing all fields name ending with id, for example if I have two fields a1, a2, in alert it is showing as ('a1','a2','id'). I don't know how this Id is getting appended to the fields. If I do the same in extjs4.0.2, it's working fine, but with extjs 4.1.0 it's showing this problem.
Sample code is:
tbar : [{
text : 'Save',
height : 20,
handler : function(){
var gridColumnIds = component.gridStore1.model.prototype.fields.keys;
// alert(grid1.columns[0].dataIndex)
// console.log(gridColumnIds);
alert("grid ids :"+gridColumnIds);
var gridData = Ext.encode(Ext.pluck(component.gridStore1.data.items,'data'));
alert("grid data is :"+gridData);
}
},{
text : 'Get Record',
height : 20,
handler : function(){
p1.show();
}
}]
Probably it's caused because you used Model with default idProperty value (idProperty == 'id' by default). Try change this property http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-cfg-idProperty.