I'm working with extjs 3. while I open first time a wiz card then all radio group are showing properly. but when I close the wiz card and open again that then all radio group are not showing.
xtype: 'radiogroup',
id: 'industry_select_type',
fieldLabel: 'Select By',
columns: 1,
items: [{
boxLabel: 'None',
name: 'industry_select_type',
inputValue: '1', // do not set this field to 0, otherwise the radiogroup will not work properly.
checked: true,
listeners: {
check: function (cb, checked) {
toggleCheck(Ext.getCmp('indTree').root, false);
}
}
}, {
boxLabel: 'All Industries',
name: 'industry_select_type',
inputValue: '2',
listeners: {
check: function (cb, checked) {
if (checked) {
Ext.getCmp('indTree').hide();
}
}
}
}, {
boxLabel: 'Specific Industries',
name: 'industry_select_type',
inputValue: '3',
listeners: {
check: function (cb, checked) {
if (checked) {
Ext.getCmp('indTree').show();
} else {
Ext.getCmp('indTree').hide();
}
}
}
}]
Remove the ID of your Radiogroup object.
Related
I have a grid with a checkbox selection model.
There are some rows that not be selectable, based on a value in a field. It's work.
My problem is that clearing all the selections by clicking the checkbox in the column header doesn't work.
On this link I see that costa was faced the same problem as me: ExtJs - Checkbox selection model, disable checkbox per row.
This listener is worked, but it's break checkbox clearing.
Code:
xtype: 'grid',
border: false,
selModel: {
selType: 'checkboxmodel',
listeners: {
beforeselect: function(grid, record) {
if (!record.get('supplier')) {
return false;
}
}
}
colums:[
....
],
....
Does anyone have an idea how to do this?
Thank you.
The header checkbox is checked only if all the records are checked. In your case it is impossible to check all the records => header checkbox will be never checked => it is impossible to uncheck.
To implement new logic, you can extend the checkbox model and write your own one with custom logic (by overriding the updateHeaderState method). Something like this:
Ext.define('CustomCheckboxModel', {
alias: 'selection.custom_checkboxmodel',
extend: 'Ext.selection.CheckboxModel',
allowDeselect: true,
updateHeaderState: function () {
// check to see if all records are selected
var me = this,
store = me.store,
storeCount = store.getCount(),
views = me.views,
hdSelectStatus = true,
selectedCount = 0,
selected, len, i;
if (!store.isBufferedStore && storeCount > 0) {
selected = me.selected;
hdSelectStatus = true;
store.each(function (record) {
if (!record.get('supplier')) {
return true;
}
var found = false;
for (i = 0, len = selected.getCount(); i < len; ++i) {
if (record.getId() == selected.getAt(i).id) {
found = true;
break;
}
}
if (!found) {
hdSelectStatus = found;
return false;
}
}, this);
}
if (views && views.length) {
me.column.setHeaderStatus(hdSelectStatus);
}
},
});
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
supplier: true
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
supplier: false
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
supplier: true
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
supplier: false
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'checkcolumn',
text: 'Supplier',
dataIndex: 'supplier'
}],
height: 400,
renderTo: Ext.getBody(),
selModel: {
selType: 'custom_checkboxmodel',
listeners: {
beforeselect: function (selectionCheckboxModel, record, index, eOpts) {
console.log(record);
if (!record.get('supplier')) {
return false;
}
return true;
}
}
}
});
}
});
I'd like to both open a context menu and select the right-clicked row in a ExtJS 7 modern grid. The context menu works with the code below. However, I cannot find a way to select the row. The grid.getSelectionModel() seems to be no longer available in ExtJS 7.
// Listener in my Ext.app.ViewController manages to update and show context menu but not to select the row.
onContextMenu: function (e) {
const grid = this.getView();
const target = e.getTarget(grid.itemSelector);
if (target) {
e.stopEvent();
const item = Ext.getCmp(target.id);
if (item) {
// Would like to select row here with something like grid.getSelectionModel().selectRow(rowindex);
this.updateMenu(item.getRecord(), item.el, e);
}
}
}
Have a look at the following fiddle sample (Modern toolkit 7.3.1)
Ext.application({
name: 'Fiddle',
launch: function () {
const menu = new Ext.menu.Menu({
items: [{
text: 'Menu Item 1'
}, {
text: 'Menu Item 2'
}]
});
Ext.Viewport.add({
xclass: 'Ext.grid.Grid',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}]
}),
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
listeners: {
childcontextmenu: function (grid, location) {
const {
record,
event
} = location;
grid.deselectAll();
grid.setSelection(record);
menu.showAt(event.getX(), event.getY());
event.stopEvent()
}
}
})
}
});
I'm trying to do textfiled binding in extjs with the following conditions.
What i'm doing wrong?
Need to display three textfields where by default 2nd and 3rd textfields will be disabled.
Second textfield should enable only when first field value is entered.
third should be enabled only when first and second values are entered.
the fiddle.
You have forgotten to bind the second field value to 'field2'. This sample works:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
field1: '',
field2: '',
field3: ''
},
formulas: {
fieldTwoDisabled: function (get) {
return Ext.isEmpty(get('field1'));
},
fieldThreeDisabled: function (get) {
return !(!Ext.isEmpty(get('field1')) && !Ext.isEmpty(get('field2')));
}
}
});
Ext.create({
xtype: 'panel',
title: 'VM Demo',
fullscreen: true,
defaults: {
xtype: 'textfield'
},
viewModel: {
type: 'myvm'
},
items: [{
label: 'Field 1',
bind: '{field1}'
}, {
label: 'Field 2',
bind: {
value: '{field2}', // THIS BINDING IS FORGOTTEN
disabled: '{fieldTwoDisabled}'
}
}, {
label: 'Field 3',
bind: {
disabled: '{fieldThreeDisabled}'
}
}]
})
}
});
Am trying to fetch the persondetails details into enableButton method.
Am aware that we can achieve this by simply adding key and value to data object.
But my question here is, is there any way to store data into persondetails and fetch it?
If I specify as below and bind accordingly, then its wok fine.
data: {
firstname: '',
lastname: ''
}
bind: {
value: '{lastname}'
},
Here is the code:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.userinfo',
data: {
persondetails:{
firstname: '',
lastname: ''
}
},
formulas: {
enableButton: function(get){
debugger;
if(get('firstname')!=='' && get('lastname')!=='' ){
return true;
}else{
return false;
}
},
fullName: function(get){
if(get('firstname')!=='' && get('lastname')!=='' ){
return get('firstname') + ' ' + get('lastname');
}
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 500,
bodyPadding: 10,
renderTo: Ext.getBody(),
viewModel:{
type:'userinfo'
},
items: [{
xtype: 'textfield',
name: 'firstname',
emptyText: 'Enter First Name',
bind: {
value: '{persondetails.firstname}'
},
}, {
xtype: 'textfield',
name: 'lastname',
emptyText: 'Enter Last Name',
bind: {
value: '{persondetails.lastname}'
},
}, {
xtype: 'button',
reference: 'clickme',
disabled: true,
bind: {
disabled: '{!enableButton}'
},
text: 'Click',
listeners: {
click: function(){
alert('{fullName}');
}
}
}, {
xtype: 'displayfield',
fieldLabel: 'Full Name',
bind: {
value: '{fullName}'
}
}]
});
}
});
I have created a fiddle Example
According to documentation
When a direct bind is made and the bound property is an object, by
default the binding callback is only called when that reference
changes. This is the most efficient way to understand a bind of this
type, but sometimes you may need to be notified if any of the
properties of that object change.
To do this, we create a "deep bind":
In other words, if a object changes its properties, the viewmodel will not notify these changes (although their properties are changed correctly).
If you need to listen this changes, you need to use deep binding
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.TestViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.userinfo',
data: {
persondetails: {
firstname: '',
lastname: ''
}
},
formulas: {
enableButton: {
bind: {
bindTo: '{persondetails}',
deep: true // listen to any change in personaldetails
},
get: function (data) {
return data.firstname && data.lastname
}
},
fullName: {
bind: {
bindTo: '{persondetails}',
deep: true // listen to any change in personaldetails
},
get: function (data) {
return data.firstname + ' ' + data.lastname
}
},
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 500,
bodyPadding: 10,
renderTo: Ext.getBody(),
viewModel:{
type:'userinfo'
},
items: [{
xtype: 'textfield',
name: 'firstname',
emptyText: 'Enter First Name',
bind: {
value: '{persondetails.firstname}'
},
}, {
xtype: 'textfield',
name: 'lastname',
emptyText: 'Enter Last Name',
bind: {
value: '{persondetails.lastname}'
},
}, {
xtype: 'button',
reference: 'clickme',
disabled: true,
bind: {
disabled: '{!enableButton}'
},
text: 'Click',
listeners: {
click: function(){
alert('{fullName}');
}
}
}, {
xtype: 'displayfield',
fieldLabel: 'Full Name',
bind: {
value: '{fullName}'
}
}]
});
}
});
I have a radio group
Ext.define('MyApp.view.ColorGrp',{
extend: 'Ext.form.RadioGroup',
xtype: 'colorGrp',
id:'colorGrp',
initComponent: function(){
colorSchema='1';
Ext.applyIf(me,{
value: colorSchema
items: [
{ boxLabel: Lang.SCHEMA1, name: 'cgrp', inputValue: '0'},
{ boxLabel: Lang.SCHEMA2, name: 'cgrp', inputValue: '1'}
]
});
}
});
Why isn't any radio button checked? IMO, the second radio should be checked now!?
Try :
colorSchema = { cgrp: '1' }
Working example: http://jsfiddle.net/2dy39/