I have a checkbox group with somany checkboxes in it. I want to check all of them once when a button clicked. These checkboxes are created dynamically.
var json = result.responseText;
var temp = JSON.parse(json);
for(var i=0;i<Object.keys(temp[newValue]).length;i++){
menuArray.push({
xtype: 'checkboxfield',
boxLabel: (temp[newValue][i]).split("_").join(" "),
name: temp[newValue][i],
id:temp[newValue][i],
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
});
}
checkboxGroup = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: '',
id:'moduleCheckboxGroup',
columns: 1,
items: menuArray
});
permissionPanel.removeAll();
permissionPanel.add(checkboxGroup);
Thanks in advance!
you can use "query" method to search childs with "isCheckbox".
Ext.create('Ext.form.CheckboxGroup', {
renderTo: Ext.getBody(),
id: 'mycheckboxgroup',
columns: 1,
items: [{
xtype: 'checkboxfield',
boxLabel: 'Test1',
name: 'test1',
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
}, {
xtype: 'checkboxfield',
boxLabel: 'Test2',
name: 'test2',
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
}, {
xtype: 'checkboxfield',
boxLabel: 'Test3',
name: 'test3',
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
}]
});
Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'Check all',
handler: function () {
var checkboxes = Ext.getCmp('mycheckboxgroup').query('[isCheckbox]');
Ext.Array.each(checkboxes, function (checkbox) {
checkbox.setValue(1);
});
}
});
Jsfiddle example
I would create a button which holds a reference to a checkbox group and then store states to toggle select and de-select on click. Here is a live demo of the code below.
App
var group = Ext.create('App.DynamicCheckboxGroup', {
id: 'mycheckboxgroup',
count : 9,
columns : 3,
width: 180,
renderTo: Ext.getBody()
});
Ext.create('App.CheckboxGroupButton', {
checkboxGroup: group,
renderTo: Ext.getBody()
});
DynamicCheckboxGroup
Ext.define('App.DynamicCheckboxGroup', {
extend : 'Ext.form.CheckboxGroup',
config : {
count : 3
},
initComponent : function() {
var me = this;
var items = [];
for (var i = 1; i <= me.count; i++) {
items.push({
xtype: 'checkbox',
boxLabel: 'Test' + i,
name: 'test' + i,
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
});
}
me.items = items;
me.callParent(arguments);
}
});
CheckboxGroupButton
Ext.define('App.CheckboxGroupButton', {
extend: 'Ext.Button',
config : {
checkboxGroup : null,
states : [{
text : 'Deselect All',
value : 1
}, {
text: 'Select All',
value : 0
}]
},
initComponent : function() {
var me = this;
me.setText(me.states[1].text);
me.callParent(arguments);
},
handler : function (button, e) {
var me = this;
var newState = me.states.reduce(function(result, state) {
return state.text !== button.getText() ? state : result;
}, {});
Ext.Array.each(me.checkboxGroup.getBoxes(), function (checkbox) {
checkbox.setValue(newState.value);
});
button.setText(newState.text);
}
});
In ExtJS 4.x there is a shortcut for Eldono's solution:
var checkBoxes = checkboxGroup.getBoxes()
Sencha docs: Ext.form.CheckboxGroupView.getBoxes
Related
I'm trying to write a tooltip that's specific for each column in a grid.
My current implementation is failing to pick up the value of the record that's being hovered over. How do I reference the specific column/row value of the row entry?
fiddle
Code
Ext.onReady(function() {
var trackStore = new Ext.data.Store({
storeId: 'soundCloudStore',
proxy: {
type: 'memory',
data: [
{
title: 'Test', duration: '3434', genre: 'stuff', created_at: '2011/06/18', id: '1'
}
]
},
fields:['duration', 'genre', 'created_at', 'title', 'id']
});
trackStore.load(
function() {
Ext.create('Ext.grid.Panel', {
title: 'Tracks',
store: trackStore,
stripeRows: false,
columns: [
{
header: 'Title',
dataIndex: 'title'
},
{ header: 'Duration', dataIndex: 'duration' },
{ header: 'Genre', dataIndex: 'genre' },
{ header: 'Created At', dataIndex: 'created_at'}
],
height: 200,
width: 475,
renderTo: Ext.getBody(),
listeners: {
afterrender: function( )
{
view = this.getView();
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update(this.data.title);
}
}
});
}
}
});
});
});
Error
Uncaught TypeError: Cannot read property 'title' of undefined
You could do it like this,
use the event "viewready" instead "afterrender" :
listeners: {
viewready: function(grid) {
var view = this.getView();
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
console.log(grid.cellIndex);
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
}
}
}
});
}
}
I have some ExtJS forms containing radiogroups.
And each of these radioGroups have 2 radios having inputValues as true and false.
But when I set form values using form.setValues(values), if radioButton value I want to set is false, respective radio is not getting selected. This works in case my value is true.
Here is link for fiddle
This works if you change booleanRadio: true.
My Code:
Ext.define('myView', {
extend: 'Ext.panel.Panel',
xtype: 'myView',
id: 'myViewContainer',
layout: 'vbox',
width: '100%',
initComponent: function() {
var me = this;
var allItems = [];
allItems.push(me.getMyForm());
Ext.applyIf(me, {
items: allItems
});
me.callParent(arguments);
},
getMyForm: function() {
var me = this;
var currentForm = {
xtype: 'form',
cls: 'y-form',
id: 'myForm',
trackResetOnLoad: true,
items: [
{
xtype: 'radiogroup',
fieldLabel: 'is Sponsored',
labelSeparator: '',
layout: 'hbox',
items: [
{
xtype: 'radiofield',
name: 'isSponsored',
boxLabel: 'Yes',
inputValue: true
},
{
xtype: 'radiofield',
name: 'isSponsored',
boxLabel: 'No',
inputValue: false
}
]
}
]
};
return currentForm;
}
});
Ext.define('myController', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'panel#myViewContainer': {
afterrender: this.retrieveFormValues
}
});
},
retrieveFormValues: function() {
var me = this;
var data = {isSponsored: false};
if (data != null && !Ext.Object.isEmpty(data)) {
var myFormContainer = Ext.getCmp('myViewContainer');
myFormContainer.getForm().setValues(data);
}
}
});
if you change the inputValues of radiobuttons to 0 or 1, and adjust values var accordingly, the desired radio button will be set. I have updated the fiddle.
items: [{
boxLabel: 'Item 1',
name: 'booleanRadio',
inputValue: 1,
}, {
boxLabel: 'Item 2',
name: 'booleanRadio',
inputValue: 0,
}],
listeners: {
afterrender: function(radioGroupForm) {
var values = {
booleanRadio: 0
}
Ext.getCmp('radioGroupFormPanel').getForm().setValues(values);
}
}
If you send false to radiobutton, it unchecks the radio. That's why your 'true' is working and 'false' is not.
I have a listContainer and on tap of any item in the list, I open another page known as editContainer with the record from list. In the edit page, I want to disable a dropdown based on the value of another field, is there any way I can get the values in record in the initialize function of editContainer? Here is my code:-
onListItemTap:function(dataview,index,target,record,e,eOpts)
{
if(record)
this.editContainer = Ext.create('myApp.view.EditContainer',{title:'Edit Data'});
this.editContainer.setRecord(record);
this.getMainNav().push(this.editContainer);
}
Above code opens editContainer when a list item is selected. Below is my EditContainer
Ext.define('myApp.view.EditContainer', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Select'
],
config: {
id: 'editContainer',
autoDestroy: false,
layout: 'fit',
items: [
{
xtype: 'formpanel',
id: 'editFormPanel',
padding: 10,
styleHtmlContent: true,
autoDestroy: false,
layout: 'fit',
items: [
{
xtype: 'fieldset',
id: 'nameFieldSet',
autoDestroy: false,
items: [
{
xtype: 'textfield',
id: 'siteName',
itemId: 'mytextfield',
label: 'Name',
labelWidth: '35%',
name: 'name'
},
{
xtype: 'selectfield',
id: 'role',
itemId: 'myselectfield4',
label: 'Role',
labelWidth: '35%',
name: 'role',
options: [
{
text: 'Unassigned',
value: 'Unassigned'
},
{
text: 'Role1',
value: 'role1'
}
]
},
{
xtype: 'selectfield',
id: 'type',
label: 'Type',
labelWidth: '35%',
name: 'type',
options: [
{
text: 'Default',
value: 'Default'
},
{
text: 'Custom',
value: 'custom'
}
]
},
{
xtype: 'selectfield',
id: 'roleValue',
label: 'Role Value',
labelWidth: '35%',
name: 'rolevalue',
options: [
{
text: 'value1',
value: 'value1'
},
{
text: 'value2',
value: 'value2'
},
{
text: 'value3',
value: 'value3'
}
]
}
]
}
]
}
],
listeners: [
{
fn: 'onTextfieldKeyup',
event: 'keyup',
delegate: 'textfield'
},
{
fn: 'onSelectfieldChange',
event: 'change',
delegate: 'selectfield'
}
]
},
onTextfieldKeyup: function(textfield, e, eOpts) {
this.fireEvent('change', this);
},
onSelectfieldChange: function(selectfield, newValue, oldValue, eOpts) {
this.fireEvent('change', this);
},
initialize: function() {
this.callParent();
var record;
//Code to disable roleValue selectfield if Role is unassigned.
},
updateRecord: function(newRecord) {
var me = this,
myPanel = me.down('#editFormPanel');
if(myPanel)
myPanel.setRecord(newRecord);
},
saveRecord: function() {
var me =this,
myStore = Ext.data.StoreManager.lookup('MyStore');
var formPanel = me.down('#editFormPanel'),
record = formPanel.getRecord();
formPanel.updateRecord(record);
return record;
}
});
Since creating your editContainer and setting its data are two different steps in your code you can't use the initialize method of the editContainer.
But you can override the setRecord method of the editContainer, so it additionally disables the dropdown.
Since you push the editContainer onto a navigation view you could also use the activate event of the editContainer to disable the dropdown.
Maybe you can create a quick store on the fly, as a place to have a reference to that data...
//in your controller where you set the record
var mod = Ext.define('app.model.PanelDataModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'roleValue'
]
}
});
var sto = Ext.create('Ext.data.Store', {
model: mod,
id:'PanelDataStore'
});
sto.add({
roleValue: record.roleValue
});
sto.sync();
//Now in your panel's initialize method:
var pstore = Ext.getStore('PanelDataStore');
pstore.load();
if(pstore.data.all[0].data.roleValue == 'unassigned'){
Ext.getCmp('roleValue').setDisabled(true);
}
I am trying to add a toolbar to my grid with an "Add New Record" button.
The code example provided by Sencha is here:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}],
//etc...
});
Example: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html
I am having trouble applying this to my code since I use the MVC pattern. This is my code:
Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'AirShipmentGrid',
plugins: [
{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting'
},
'bufferedrenderer'
],
tbar: [{
text: 'Add Rate',
//iconCls: 'rate-add',
handler : function() {
rowEditing.cancelEdit(); // rowEditing is not defined...
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0); // rowEditing is not defined...
}
}],
// etc...
});
How can I access the "rowEditing" plugin so as to call it's required methods?
the handler from the buttons gets a reference to the button as a first argument. You can use that reference with a componentquery to get a reference to your grid panel that houses it. The gridPanel has a getPlugin method with which you can fetch a plugin based on a pluginId.The only thing you have to make sure of is to give the plugin a pluginId, otherwise the Grid cannot find it. This should work:
Ext.define('RateManagement.view.Grids.AirShipmentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'AirShipmentGrid',
plugins: [
{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
},
'bufferedrenderer'
],
tbar: [{
text: 'Add Rate',
//iconCls: 'rate-add',
handler : function(button) {
var grid = button.up('gridpanel');
var rowEditing = grid.getPlugin('rowediting');
rowEditing.cancelEdit(); // rowEditing is now defined... :)
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0); // rowEditing is not defined...
}
}],
// etc...
});
Cheers, Rob
EDIT: added complete example:
- Go to http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/grid/row-editing.html
- Open the javascript console
- Paste the below code in there
It will create a second grid with a button that finds the row editing plugin and cancels your edit. doubleclick a row to start editing, click the button in the tbar to cancel it. Works like a charm. Make sure you have specified the pluginId, otherwise the grid's getPlugin method cannot find it.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function() {
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email', {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
}, {
name: 'salary',
type: 'float'
}, {
name: 'active',
type: 'bool'
}
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
eDate = Ext.Date,
now = new Date(),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start: eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name: name,
email: name.toLowerCase().replace(' ', '.') + '#sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 105,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Cancel editing Plugin',
handler: function(button) {
var myGrid = button.up('grid');
var myPlugin = myGrid.getPlugin('rowediting')
myPlugin.cancelEdit();
console.log(myPlugin);
}
}],
plugins: [{
clicksToMoveEditor: 1,
autoCancel: false,
ptype: 'rowediting',
pluginId: 'rowediting'
}]
});
});
I have the following column specified in my Ext.grid.Panel:
{text: 'Home Country', dataIndex: 'homeCountryId', width: 250, xtype: 'country-column'},
The xtype is "country-column" which is defined as:
Ext.define("RateManagement.view.Columns.CountryColumn", {
extend: 'Ext.grid.column.Column',
xtype: 'country-column',
text: 'Country',
editor: { xtype: 'country-combo', allowBlank: false, blankText: 'Country is required.'},
renderer: function(val) {
var locationStore = Ext.data.StoreManager.lookup('RateManagement.store.CountryStore');
var index = locationStore.findExact('value', val);
if (index != -1) {
var record = locationStore.getAt(index).data;
return record.label;
}
},
sortable: true
});
When I click the column header in the grid ("Home Country"), it doesn't sort at all.
How can I make it sort by the record.label to sort alphabetically?
Edit: Here is how I have changed my model:
{name:'homeLocationId', type: 'string'},
{name:'homeLocation', type: 'string', convert: function (newValue, model) {
// homeCountryId is appened for uniqueness and additional sort
return (newValue ? newValue : '' ) + '_' + model.get('homeLocationId');
}
},
Here is my grid column:
{text: 'Home Location', dataIndex: 'homeLocationId', width: 250, xtype: 'location-column'},
You can set label as dataIndex and attach renderer with display 'Home Country'
Here is working sample: http://jsfiddle.net/KLX5q/
// Monel
Ext.define('CountryModel', {
extend: 'Ext.data.Model',
fields: [
{ name:'homeCountryId', type:'int'},
{ name:'HomeCountryName', type:'string'},
{ name:'label', type:'string',
convert: function (newValue, model) {
// homeCountryId is appened for uniqueness and additional sort
return (newValue ? newValue : '' ) + '_' + model.get('homeCountryId');
}
}
]
});
// store
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['homeCountryId', 'HomeCountryName', 'label'],
data:{'items':[
Ext.create('CountryModel',{ homeCountryId: 1, HomeCountryName: 'Australia', label:'nnnn' }),
Ext.create('CountryModel',{ homeCountryId: 2, HomeCountryName:'Germany', label:'bbbb' }),
Ext.create('CountryModel',{ homeCountryId: 3, HomeCountryName:'Russia', label:'aaaa' }),
Ext.create('CountryModel',{ homeCountryId: 4, HomeCountryName:'United States', label:'zzzz' })
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// gridpanel
Ext.create('Ext.grid.Panel', {
title: 'Countries',
margin: 5,
frame: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'HomeCountryName',
dataIndex: 'label',
flex: 1,
renderer: function(value, column, record){
return record.data.HomeCountryName;
}
}
//,{ text: 'homeCountryId', dataIndex: 'homeCountryId' } // uncomment if need
//,{ text: 'display label', dataIndex: 'label' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});