form like inbox email

[aclavijo]

How can I create a form like this

[JorisA]

Except for the expanding groups (I think this is on the feature request list) you can achieve this with a grid.

You could use this example for your general layout.
http://extjs.com/deploy/ext/examples/grid/paging.html

You can use the custom render functions to add checkboxes etc

function renderCheckbox(value, cell, record) {
    helper = Ext.DomHelper.append(cell, {tag: 'input', type: 'checkbox'}, true);
    box = new Ext.form.Checkbox({...});
    box.applyTo(helper);
    box.setValue(record.data.someVal);
    box.on('check', function() { record.data.someVal = this.getValue() }

    return "";
} 

[aclavijo]

thanks a lot by the your code(I

[cmd.ares]

Except for the expanding groups (I think this is on the feature request list) you can achieve this with a grid.

You could use this example for your general layout.
http://extjs.com/deploy/ext/examples/grid/paging.html

You can use the custom render functions to add checkboxes etc

function renderCheckbox(value, cell, record) {
    helper = Ext.DomHelper.append(cell, {tag: 'input', type: 'checkbox'}, true);
    box = new Ext.form.Checkbox({...});
    box.applyTo(helper);
    box.setValue(record.data.someVal);
    box.on('check', function() { record.data.someVal = this.getValue() }

    return "";
} 

and how to call the renderCheckbox?

[JorisA]

This is just some scratch, not the exact code. but it should help you a bit, you should pass the renderCheckbox function to your columnmodel (see the example link):

var cm = new Ext.grid.ColumnModel([{
       header: "Check Collumn",
       dataIndex: 'read',
       width: 420,
       renderer: renderCheckbox,
    }

... 

[aclavijo]

what code I must post insede here


box = new Ext.form.Checkbox({...});

[JorisA]

http://extjs.com/deploy/ext/docs/out....Checkbox.html

[aclavijo]

HI. I saw the page you send me, but I

[JorisA]

Check some examples on how ext works.
As you can see the manual states "Checkbox(Object config)" This mean you can pass an object with the configuration variables as listed at the bottom of that page. for example Checkbox({fieldClass: 'my-custom-css-class'));
In this case I dont think you need any options since the defaults will do just fine.