1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    kerum is on a distinguished road

      0  

    Default Answered: Grid as input for HTML form

    Answered: Grid as input for HTML form


    Hi,
    It's quite simple to use ExtJS field as input in HTML form, something like this:
    Code:
    <html>
    <form action="dummy.php" method="get">
    <div id='div1'></div>
    <script>
    Ext.onReady(function(){
    Ext.create( 'Ext.form.TextField', {
        id:'myinput',
        value:'default value',
        renderTo:'div1'
    });
    });
    </script>
    <input type=submit value="Ok">
    </form>
    </html>
    If I place a simple grid instead of TextField no variables are submitted.
    I've tried to enable selection possibility (selType and SelModel) and got checkboxes
    as first column but perhaps further configs are needed to make grid act as input?
    I would like to submit value from particular column and selected rows.
    Is there a possibility to use ExtJS grid as input for a HTML form?

  2. For my purpose I've resolved it without ExtJS selection model and rendering <input> as cell content:

    Code:
    Ext.create('Ext.grid.Panel', {
        columns: [
            {   dataIndex: 'selector_checkbox',
                renderer: function(val){
                    return('<input type="checkbox" id='+val+' name='+val+' value=x>');
                },
                text: 'Selector'
            },
    ...
    k.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    That is a lot of overhead, why not just a form layout?
    I guess the other alternative would be to have a button that commits the dirty grid cells?

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    kerum is on a distinguished road

      0  

    Default


    in my case there is a HTML form with many non-ExtJS input fields and I can't change it at the moment.
    One of inputs is a table with checkbox'es and could be replaced with a ExtJS grid
    (it has a lot of columns and grid looks better as combo).
    My goal is to replace a HTML table with ExtJS grid and forward the keys of selected rows
    together with other inputs to the HTML form.
    So the question is: can ExtJS grid act as input in HTML form?

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Not that I am aware of.

  6. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    kerum is on a distinguished road

      0  

    Default


    For my purpose I've resolved it without ExtJS selection model and rendering <input> as cell content:

    Code:
    Ext.create('Ext.grid.Panel', {
        columns: [
            {   dataIndex: 'selector_checkbox',
                renderer: function(val){
                    return('<input type="checkbox" id='+val+' name='+val+' value=x>');
                },
                text: 'Selector'
            },
    ...
    k.

Thread Participants: 1

Tags for this Thread