View Full Version : Checkbox and form panel

21 May 2012, 12:37 PM
I develop a new application in sencha JS 4.0 with a CRUD interface.
I have a problem with forms (set checkbox value from a dataStore loaded from a sql/php backend)
As I didn't manage to get a form.panel working, I used a grid.panel. I was able to use a CRUD API to GET/PUT data from/to the PHP backend

I would like to use checkbox in a new tab of my application
- I know the number of checkbox
- I can load a dataStore from a json formated file (as a copy of data from the database)
- Checkbox are not checked ...

Of course, the goal is to update a database depending of what you check.

Many people did it by create dynamic checkox object. Should I do it that way ?

Thank you very much
Could you tell me where is wrong ?
Json file : action.json

'success': true,
'data': [
{'dID': '1', 'aID': '1', 'action':'on', 'value':true},
{'dID': '1', 'aID': '2', 'action':'off', 'value':true},
{'dID': '1', 'aID': '3', 'action':'dimmer', 'value':false}

Ext.define('myapp.DeviceActionForm', {
extend: 'Ext.form.Panel',
alias: 'widget.deviceactionform',
autoHeight: true,
width : 600,
bodyPadding: 10,
initComponent: function(){

Ext.apply(this, {
//cls: 'feed-grid',
store: Ext.create('Ext.data.Store', {
model: 'Action',
proxy: {
type: 'ajax',
url: 'data/action.json',
idProperty : 'aID',
reader: {
type: 'json',
root: 'data'
listeners: {
//load: this.onLoad,
scope: this
items: [{
xtype: 'fieldset',
title: 'Select the special actions for this module',
defaultType: 'checkbox', // each item will be a checkbox
layout: 'anchor',
items: [{
boxLabel: 'On',
name: 'on',
dataIndex: 'on',
//inputValue: 'on'
}, {
boxLabel: 'Off',
name: 'off',
dataIndex: 'off',
//inputValue: 'off'
}, {
//checked: true,
boxLabel: 'Dimmer',
name: 'dimmer',
dataIndex: 'dimmer'
//inputValue: 'dimmer'
buttons: [{
text: 'Save',
handler: function(){

var form = this.up('form').getForm(), s = '';
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
form.getValues(true).replace(/&/g,', '));
text: 'Reset',
handler: function(){
var form = this.up('form').getForm(), s = '';

* Listens for the store loading
* @private
onLoad: function() {
var store = this.store;
var record = store.getAt(0);

* Instructs the grid to load a new feed
* @param {String} url The url to load
loadDevice: function(dID){
//console.log("DeviceMainForm::loadDevice -> " + dID);
var store = this.store;
params: {
data: dID

21 May 2012, 10:41 PM
After the form has been created, try setting the values of the checkboxes: