vscarpenter/depts.html

## depts.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Departments</title>

<!-- Include Ext and app-specific scripts: -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css"/>
<script type="text/javascript" src="scripts/ext-base.js"></script>
<script type="text/javascript" src="scripts/ext-all-debug.js"></script>

<script type="text/javascript">

Ext.BLANK_IMAGE_URL = 'images/s.gif';
var store = Ext.data.Store;
var Report = Ext.data.Record;
var grid = Ext.grid.EditorGridPanel;
var saveURL = 'dept.json';
var objName = 'departmentName';

function generateDeleteLink(val, metadata, record) {
    if (val) {
        return "<a href='javascript:deleteRecord(" + record.data.departmentID + ")'>
                    <img src='images/delete.gif' border=0></a>";
    }
    return val;
}

function handleLoadException(proxy, store, response, e) {
    alert("Error loading user data " + e.message);
}

function addRecord() {
    if (store.recordType) {
        var rec = new store.recordType({newRecord:true});
        rec.fields.each(function(f) {
            rec.data[f.name] = f.defaultValue || null;
        });
        rec.commit();
        store.add(rec);
        return rec;
    }
    return false;
}

function commitChanges() {
    var records = store.getModifiedRecords();
    if (!records.length) {
        return;
    }
    var data = [];
    Ext.each(records, function(r, i) {
        var o = r.getChanges();
        if (r.data.newRecord) {
            o.newRecord = true;
        }

        o['departmentID'] = r.data.departmentID;
        data.push(o);
    }, this);


    var ajaxRequest = {url:saveURL, method:'post', callback: requestCallback,
                      waitMsg: 'Saving...', params:{cmd:'saveData', data:Ext.encode(data)}};
    Ext.Ajax.request(ajaxRequest);
}

function requestCallback(options, success, response) {

    if (true !== success) {
        showError(response.responseText);
        return;
    }
    try {
        var o = Ext.decode(response.responseText);
    }
    catch(e) {
        showError(response.responseText, 'Cannot decode JSON object');
        return;
    }
    if (true !== o.success) {
        showError(o.error || 'Unknown error');
        return;
    }

    switch (options.params.cmd) {
        case 'saveData':
            var records = store.getModifiedRecords();
            Ext.each(records, function(r, i) {
                if (o.insertIds && o.insertIds[i]) {
                    r.set(this.departmentID, o.insertIds[i]);
                    delete(r.data.newRecord);
                }
            });
            store.commitChanges();
            break;

        case 'deleteData':
            break;
    }
}

function showError(msg, title) {
    Ext.Msg.show({
        title:title || 'Error'
        ,msg:Ext.util.Format.ellipsis(msg, 2000)
        ,icon:Ext.Msg.ERROR
        ,buttons:Ext.Msg.OK
        ,minWidth:1200 > String(msg).length ? 360 : 600
    });
}

function deleteRecord(departmentID) {

    var recordToDel = store.getById(departmentID);
    var recordDeptName = recordToDel.data.departmentName;
    var postData = 'departmentID=' + departmentID;

    Ext.Msg.show({
        title:'Delete record?'
        ,msg:'Do you really want to delete <b>' + recordDeptName + '</b>?'
        ,icon:Ext.Msg.QUESTION
        ,buttons:Ext.Msg.YESNO
        ,scope:this
        ,fn:function(response) {
            if (response == 'yes') {
                var ajaxRequest = {
                    url:saveURL, method:'post', callback: requestCallback, waitMsg: 'Saving...', params:{cmd:'deleteData', data:postData}
                };
                Ext.Ajax.request(ajaxRequest);
                store.remove(recordToDel);
                this.store.commitChanges();
            }
        }
    });
}

function cancelChanges() {
    store.rejectChanges();
}

Ext.onReady(function() {
    Ext.QuickTips.init();


    Report = Ext.data.Record.create([
        {name: 'departmentID', type: 'int'},
        {name: 'departmentName', type: 'string'}
    ]);

    var reader = new Ext.data.JsonReader({root: "list.dept", id: "departmentID"}, Report);

    store = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'dept.json'}),
        reader: reader, listeners: {loadexception: handleLoadException}, baseParams:{cmd:'getData', objName:this.objName}});

    var columnModel = new Ext.grid.ColumnModel([{
        id:'departmentID',
        header: "ID",
        dataIndex: 'departmentID',
        width: 50
    }, {
        header: "departmentName",
        dataIndex: 'departmentName',
        width: 300,
        editor:new Ext.form.TextField({
            allowBlank:false
        })
    }, {
        header: "DEL ",
        dataIndex: 'departmentID',
        width: 30,
        tooltip: 'Delete this record',
        renderer: generateDeleteLink
    }
    ]);

    columnModel.defaultSortable = true;

    grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: columnModel,
        loadMask: true,
        stripeRows: true,
        collapsible: false,
        enableColumnMove: true,
        enableColumnResize: true,
        autoExpandColumn: 'departmentName',
        idName:'departmentID',
        viewConfig: {
            forceFit: true
        },
        frame:true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        height:500,
        width:500,
        addRecord: addRecord,
        buttons: [{text:'Save',handler: commitChanges},{text:'Cancel', handler: cancelChanges},
            {text:'Reload', handler : function() {
                grid.stopEditing();
                store.reload();
            }}],
        buttonAlign:'center',
        tbar: [{
            text: ' Add New Department',
            tooltip:'Add a new Department',
            iconCls:'icon-plus',
            handler : function() {
                grid.stopEditing();
                var p = new Report({
                    departmentName: 'Department Name'
                });
                store.add(p);
                var r = store.indexOfId(p.id);
                grid.getView().focusRow(r);
                grid.startEditing(r, 1);
            }
        }]

    });

    grid.render('gridGoesHere');
    store.load();

});

</script>
</head>
<body>
<h2>Department</h2>

<p>

<div id="gridGoesHere"/>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>Departments</title>

	<!-- Include Ext and app-specific scripts: -->
	<link rel="stylesheet" type="text/css" href="css/ext-all.css"/>
	<script type="text/javascript" src="scripts/ext-base.js"></script>
	<script type="text/javascript" src="scripts/ext-all-debug.js"></script>

	<script type="text/javascript">

	Ext.BLANK_IMAGE_URL = 'images/s.gif';
	var store = Ext.data.Store;
	var Report = Ext.data.Record;
	var grid = Ext.grid.EditorGridPanel;
	var saveURL = 'dept.json';
	var objName = 'departmentName';

	function generateDeleteLink(val, metadata, record) {
	if (val) {
	return "<a href='javascript:deleteRecord(" + record.data.departmentID + ")'>
	<img src='images/delete.gif' border=0></a>";
	}
	return val;
	}

	function handleLoadException(proxy, store, response, e) {
	alert("Error loading user data " + e.message);
	}

	function addRecord() {
	if (store.recordType) {
	var rec = new store.recordType({newRecord:true});
	rec.fields.each(function(f) {
	rec.data[f.name] = f.defaultValue \|\| null;
	});
	rec.commit();
	store.add(rec);
	return rec;
	}
	return false;
	}

	function commitChanges() {
	var records = store.getModifiedRecords();
	if (!records.length) {
	return;
	}
	var data = [];
	Ext.each(records, function(r, i) {
	var o = r.getChanges();
	if (r.data.newRecord) {
	o.newRecord = true;
	}

	o['departmentID'] = r.data.departmentID;
	data.push(o);
	}, this);


	var ajaxRequest = {url:saveURL, method:'post', callback: requestCallback,
	waitMsg: 'Saving...', params:{cmd:'saveData', data:Ext.encode(data)}};
	Ext.Ajax.request(ajaxRequest);
	}

	function requestCallback(options, success, response) {

	if (true !== success) {
	showError(response.responseText);
	return;
	}
	try {
	var o = Ext.decode(response.responseText);
	}
	catch(e) {
	showError(response.responseText, 'Cannot decode JSON object');
	return;
	}
	if (true !== o.success) {
	showError(o.error \|\| 'Unknown error');
	return;
	}

	switch (options.params.cmd) {
	case 'saveData':
	var records = store.getModifiedRecords();
	Ext.each(records, function(r, i) {
	if (o.insertIds && o.insertIds[i]) {
	r.set(this.departmentID, o.insertIds[i]);
	delete(r.data.newRecord);
	}
	});
	store.commitChanges();
	break;

	case 'deleteData':
	break;
	}
	}

	function showError(msg, title) {
	Ext.Msg.show({
	title:title \|\| 'Error'
	,msg:Ext.util.Format.ellipsis(msg, 2000)
	,icon:Ext.Msg.ERROR
	,buttons:Ext.Msg.OK
	,minWidth:1200 > String(msg).length ? 360 : 600
	});
	}

	function deleteRecord(departmentID) {

	var recordToDel = store.getById(departmentID);
	var recordDeptName = recordToDel.data.departmentName;
	var postData = 'departmentID=' + departmentID;

	Ext.Msg.show({
	title:'Delete record?'
	,msg:'Do you really want to delete <b>' + recordDeptName + '</b>?'
	,icon:Ext.Msg.QUESTION
	,buttons:Ext.Msg.YESNO
	,scope:this
	,fn:function(response) {
	if (response == 'yes') {
	var ajaxRequest = {
	url:saveURL, method:'post', callback: requestCallback, waitMsg: 'Saving...', params:{cmd:'deleteData', data:postData}
	};
	Ext.Ajax.request(ajaxRequest);
	store.remove(recordToDel);
	this.store.commitChanges();
	}
	}
	});
	}

	function cancelChanges() {
	store.rejectChanges();
	}

	Ext.onReady(function() {
	Ext.QuickTips.init();


	Report = Ext.data.Record.create([
	{name: 'departmentID', type: 'int'},
	{name: 'departmentName', type: 'string'}
	]);

	var reader = new Ext.data.JsonReader({root: "list.dept", id: "departmentID"}, Report);

	store = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'dept.json'}),
	reader: reader, listeners: {loadexception: handleLoadException}, baseParams:{cmd:'getData', objName:this.objName}});

	var columnModel = new Ext.grid.ColumnModel([{
	id:'departmentID',
	header: "ID",
	dataIndex: 'departmentID',
	width: 50
	}, {
	header: "departmentName",
	dataIndex: 'departmentName',
	width: 300,
	editor:new Ext.form.TextField({
	allowBlank:false
	})
	}, {
	header: "DEL ",
	dataIndex: 'departmentID',
	width: 30,
	tooltip: 'Delete this record',
	renderer: generateDeleteLink
	}
	]);

	columnModel.defaultSortable = true;

	grid = new Ext.grid.EditorGridPanel({
	store: store,
	cm: columnModel,
	loadMask: true,
	stripeRows: true,
	collapsible: false,
	enableColumnMove: true,
	enableColumnResize: true,
	autoExpandColumn: 'departmentName',
	idName:'departmentID',
	viewConfig: {
	forceFit: true
	},
	frame:true,
	sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
	height:500,
	width:500,
	addRecord: addRecord,
	buttons: [{text:'Save',handler: commitChanges},{text:'Cancel', handler: cancelChanges},
	{text:'Reload', handler : function() {
	grid.stopEditing();
	store.reload();
	}}],
	buttonAlign:'center',
	tbar: [{
	text: ' Add New Department',
	tooltip:'Add a new Department',
	iconCls:'icon-plus',
	handler : function() {
	grid.stopEditing();
	var p = new Report({
	departmentName: 'Department Name'
	});
	store.add(p);
	var r = store.indexOfId(p.id);
	grid.getView().focusRow(r);
	grid.startEditing(r, 1);
	}
	}]

	});

	grid.render('gridGoesHere');
	store.load();

	});

	</script>
	</head>
	<body>
	<h2>Department</h2>

	<p>

	<div id="gridGoesHere"/>

	</body>
	</html>