Results 1 to 6 of 6

Thread: Editable List Plugin

  1. #1
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    242

    Default Editable List Plugin

    I need an editable list in one of my current projects so I decided to start on a reusable plugin.

    What I wanted was to be able to just add a plugin to my lists and not have to worry about coding templates and stuff every time.

    So far I have made this.

    Working demo
    http://www.whitefox.no/plugins/editableList/

    You need to specify and "id", include the plugin and add a little check in the tap handler.

    Code:
     items: [{
                    xtype: 'list',
                    //Other config stuff taken way
                    id: 'MyList',
                    itemTpl: '{firstName} <strong>{lastName}</strong>',
                    listeners:{
                        itemtap: function(list){
                            if(list.plugins[0].isEditing()){
                                return;
                            }
                            //Your stuff here
                            alert('You taped a record')
                        }
                    },
                    plugins: [new simfla.ux.plugins.editableList()]
                    }]
                });
    I also wanted a toggle Edit/Done button that would call a callback function when the user was done editing.

    Here you need to configure the listId and include the plugin. You can also configure an editCallback, doneText and editText

    Code:
    {
           xtype: 'button',
           editText: 'Edit',
           doneText: 'Done',
           listId: 'MyList',
           editCallback: function(){alert('your edit callback')},
           plugins: [ new simfla.ux.plugins.editableListButton() ]
    }
    html
    Code:
     
    <link rel="stylesheet" href="simfla.ux.plugins.editableList.css" type="text/css">    
       
    <script type="text/javascript" src="simfla.ux.plugins.editableList.js"></script>
    <script type="text/javascript" src="simfla.ux.plugins.editableListButton.js"></script>
    Screen Shots









    I will keep on working on this... There is probably a lot more to do.

    Any suggestions?
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  2. #2
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159

    Default

    Great plugin! I was just thinking about doing something like this.

    Is there an easy way to change the icon and icon placement? If not, that would be my only suggestion.

    Thanks for doing this!

  3. #3
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    242

    Default

    Hey lylepratt


    Thanks for the comments. I have not had time to do much with this since I posted it.


    To change the stuff you want to change grab the code from simfla.ux.plugins.editableList.js and simfla.ux.plugins.editableList.css


    To change the icon: edit the "deleteButton:" property (Base64 encoded string of a png image).


    To change the placement: edit the css to place the icon wherever you want to.

    Hope this helps

    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  4. #4
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159

    Default

    Cool. Thanks for the tips!

  5. #5
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65

    Thumbs up Another Editable List

    Here is another attempt at an editable list. Although it does contain some bugs.

    https://github.com/tmanderson/Sencha-Touch-Edit-List

  6. #6
    Sencha User
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395

    Default

    I suggest you to take a look at the one I've developed.

    http://www.sencha.com/forum/showthre...list-component.

    Hope this helps.

Similar Threads

  1. Plugin to allow auto sizing of the combo's list
    By Juanito in forum Community Discussion
    Replies: 22
    Last Post: 3 Feb 2011, 11:30 AM
  2. Editable list items?
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 7 Jul 2010, 9:18 AM
  3. RowEditor plugin and non-editable rendered fields
    By Izhaki in forum Ext 3.x: User Extensions and Plugins
    Replies: 1
    Last Post: 8 Feb 2010, 3:18 AM
  4. configuring editable combo list size
    By wavel in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 6 May 2008, 3:23 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •