PDA

View Full Version : Editable List Plugin



SimonFlack
31 Mar 2011, 2:30 AM
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.


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



{
xtype: 'button',
editText: 'Edit',
doneText: 'Done',
listId: 'MyList',
editCallback: function(){alert('your edit callback')},
plugins: [ new simfla.ux.plugins.editableListButton() ]
}


html


<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

http://www.whitefox.no/plugins/editableList/ss1.png

http://www.whitefox.no/plugins/editableList/ss2.png

http://www.whitefox.no/plugins/editableList/ss3.png

http://www.whitefox.no/plugins/editableList/ss4.png

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

Any suggestions?

lylepratt
8 Aug 2011, 11:43 AM
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!

SimonFlack
8 Aug 2011, 12:35 PM
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

lylepratt
8 Aug 2011, 2:30 PM
Cool. Thanks for the tips!

bastard
10 Oct 2011, 10:21 AM
Here is another attempt at an editable list. Although it does contain some bugs.

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

AndreaCammarata
11 Oct 2011, 2:17 AM
I suggest you to take a look at the one I've developed.

http://www.sencha.com/forum/showthread.php?144737-Ext.tux.EditableList-Improved-list-component.

Hope this helps.