1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    18
    Vote Rating
    0
    tljuenem is on a distinguished road

      0  

    Default Dataview - Resize, Tab to next, and Display a Cursor?

    Dataview - Resize, Tab to next, and Display a Cursor?


    I have a dataview that displays the names of manufacturers of cars from a json file in an html table.

    Code:
    {
        xtype: 'dataview',
        store: 'CarDataStore',
        tpl: [
            '<table class=mytable border=1 cellpadding=7><tr>',
            '<tpl for=".">',
            '<td><div class="word" id="{manufacturer}">',
            '<span class="x-editable">{manufacturer}</span>',
            '</div></td>',
            '</tpl>',
            '</tr></table>'
        ],
        multiSelect: true,
        //resizable: true,
        //resizeHandles: 'e w', 
        //height: 310,
        trackOver: true,
        overItemCls: 'x-item-over',
        itemSelector: 'div.word', 
        emptyText: 'Nothing to display',
        plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'manufacturer'})
        ],
        listeners: {         
            keydown: {
                fn: me.onTextfieldKeydown,
                scope: me
            },  
            focus: {
                fn: me.onTextfieldFocus,
                scope: me
            }                                
        }    
    },
    It looks like this:
    table.png
    I can double click on a word to edit it. That all works great. The problems are:
    1. I want the blinking cursor to be displayed all the time next to the word
    2. I want to be able to press "tab" to get to the next word, and have it be selected.
    3. I want each box above to be resizable left to right. (resizable:true wasn't working for me.)
    4. Save the updated text to a file
    (I've already tried grids but the problem with them is they don't put the manufacturer data all in one row horizontally.)
    (I'm getting lost down many roads of jquery that don't recognize the div element in my dataview tpl above.)

    Does anyone know how this can be achieved Thanks!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,343
    Vote Rating
    198
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You might do something the following instead of a dataview. By using a form you can then use the form's submit action to send values back up to the server.

    Client code:
    Code:
    Ext.create('Ext.form.Panel', {
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        bodyPadding: 5,
        autoScroll: true,
        defaultType: 'textfield',
        items: [{
            xtype: 'fieldcontainer',
            layout: 'hbox',
            autoScroll: true,
            loader: {
                url: 'data/json.json',
                autoLoad: true,
                renderer: 'component'
            }
        }]
    });
    
    Server component response:
    
    Code:
    [{
        "xtype": "textfield",
        "value": "Car 1"
    }, {
        "xtype": "splitter"
    }, {
        "xtype": "textfield",
        "value": "Car 2"
    }, {
        "xtype": "splitter"
    }, {
        "xtype": "textfield",
        "value": "Car 3"
    }, {
        "xtype": "splitter"
    }, {
        "xtype": "textfield",
        "value": "Car 4"
    }, {
        "xtype": "splitter"
    }, {
        "xtype": "textfield",
        "value": "Car 5"
    }]
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    18
    Vote Rating
    0
    tljuenem is on a distinguished road

      0  

    Default


    Thank you! I'll give this a try.

Thread Participants: 1

Tags for this Thread