Sticky Notes Using ExtJS Window and HTML5 Web SQL Database

September 30th, 2010 by aditia rahman / 4 Comments  

     

In this post I want to share how to creating very simple sticky notes application using HTML 5 Web SQL Database and ExtJS Windows, this post is continuation from my previous post about creating dynamic window in extjs, since this post using HTML 5 Web SQL Database, this code for now only working on Google Chrome, Apple Safari and Opera. The feature that I will create in this post are basic insert, update, delete feature.

All the sql operation written in javascript code, first initializing database

var db = openDatabase('mydb', '1.0', 'my first database',
            2 * 1024 * 1024);

db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS ' +
      'notes (id INTEGER PRIMARY KEY, notes text, '+
      'x INTERGER, y INTEGER)');
});

The database name is “mydb” and create table “notes”, the “x” and “y” table fields is for storing the last window component position from each notes. The next code below is to saving the new notes or updating existing notes.

function save(obj, x, y) {
    var notesid = obj.replace("notes", "");
    var notesval = document.getElementById(obj).value;
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM notes WHERE id = ?', [notesid],
        function (tx, results) {
            if (results.rows.length == 1) {
                // do update
                db.transaction(function (tx) {
                    tx.executeSql('UPDATE notes SET notes = ? ' +
                        'WHERE id = ?', [notesval, notesid]);
                });
            } else {
                // insert new row
                db.transaction(function (tx) {
                    tx.executeSql('INSERT INTO ' +
                        'notes(id, notes, x, y) VALUES (?,?,?,?)',
                        [notesid, notesval, x, y]);
                });
                document.getElementById(obj).style.backgroundColor  = '#FFCC00';
                document.getElementById(obj).style.color  = '#333';
            }
        });
    });
}

This function is will be applied on textarea inside the window component and triggered with “onchange” event, it will check the existing notes id if exist, it will updating the note, otherwise insert new note and changing the textarea stlye and here is the code for the extjs window

Ext.onReady(function(){
    var win = new Array();
    var button = Ext.get('show-windows');
    var counter = 1;

    function createWindow(notes, x, y) {
        if (typeof(notes) == 'object') {
            // setting new notes config, default text and position
            notes = 'Write new notes here ... ';
            x = 50 + (15 * Math.floor(Math.random()*11));
            y = 50 + (15 * Math.floor(Math.random()*11));
            cssnotes = 'txareanew';
        } else {
            cssnotes = 'txarea';
        }
        win[counter] = new Ext.Window({
            id: 'win' + counter,
            resizable: false,
            html: '<textarea class="'+cssnotes+'" maxlength="100" ' +
                    'onchange="save(this.id, '+x+', '+y+')" ' +
                    'id="notes'+counter+'">' + notes + '</textarea>',
            pageX: x,
            pageY: y,
            width: 300,
            closable: false,
            height: 290,
            plain: false,
            border: false,
            listeners: {
                'move': function() {
                    wid = this.id.replace("win", "");
                    winx = this.x;
                    winy = this.y;
                    db.transaction(function (tx) {
                        tx.executeSql('UPDATE notes ' +
                            'SET x = ?, y = ? WHERE id = ?',
                            [winx, winy, wid]);
                    });
                }
            },
            buttons: [{
                id: 'delbtn' + counter,
                text: 'Delete',
                handler: function() {
                    nid = this.id.replace('delbtn', '');
                    db.transaction(function (tx) {
                        tx.executeSql('DELETE FROM notes ' +
                            'WHERE id = ?', [nid]);
                    });
                    win[nid].close();
                }
            }]
        }).show();
        counter = counter + 1;
    }

    // init existing notes
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM notes', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 1; i <= len; i++) {
                counter = results.rows.item(i-1).id;
                createWindow(
                    results.rows.item(i-1).notes,
                    results.rows.item(i-1).x,
                    results.rows.item(i-1).y
                );
            }
        });
    });

    button.on('click', createWindow);
});

The first conditional statement in createWindow function is to check whether the window that we will create is for the existing note or for new note, if for new note the window position (x, y) will be generated, otherwise the (x, y) position is fetched from database, and here the additional code (html and css)

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script type="text/javascript">
    // The above javascript code goes here
    </script>
    <style type="text/css">
        p {
            background: #e3e3e3;
            padding: 10px;
        }
        p input {
            width: 120px;
            height: 30px;
        }
        .txarea {
            width:290px; height:300px; background:#FFCC00; padding:5px;
            font-style:italic; border:none; color:#333;
            font-size:28px; font-family:"Times New Roman";
        }
        .txareanew {
            width:290px; height:300px; background:#e3e3e3; padding:5px;
            font-style:italic; border:none; color:#999;
            font-size:28px; font-family:"Times New Roman";
        }
    </style>
    <title>Extjs Dynamic Windows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>
      <input type="button" id="show-windows" value="Create New Note"/>
    </p>
    <div id="container"></div>
  </body>
</html>

That’s all I can do for now you can see the screenshot, live demo and download all the source following the link below

sticky notes using extjs html5 web sql database screenshot

Download Source | View Demo

note: only working on Google Chrome, Apple Safari and Opera

        submit to reddit Delicious

4 Comments Leave a Comment Subscribe RSS

Leave a Comment