<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<base href="http://fbdevzone.com/logindlg/"><div style="background:#fff;border:1px solid #999;margin:-1px -1px 0;padding:0;"><div style="background:#ddd;border:1px solid #999;color:#000;font:13px arial,sans-serif;font-weight:normal;margin:12px;padding:8px;text-align:left">This is Google's cache of <a href="http://fbdevzone.com/logindlg/" style="text-decoration:underline;color:#00c">http://fbdevzone.com/logindlg/</a>. It is a snapshot of the page as it appeared on 20 Feb 2012 09:24:00 GMT. The <a href="http://fbdevzone.com/logindlg/" style="text-decoration:underline;color:#00c">current page</a> could have changed in the meantime. <a href="http://www.google.com/intl/en/help/features_list.html#cached" style="text-decoration:underline;color:#00c">Learn more</a><br><br><div style="float:right"><a href="http://webcache.googleusercontent.com/search?q=cache:http://fbdevzone.com/logindlg/&hl=en&strip=1" style="text-decoration:underline;color:#00c">Text-only version</a></div> | |
<div> </div></div></div><div style="position:relative"> | |
<?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
<head> | |
<title>Ext.us.albeva.LoginDialog</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> | |
<!-- Load ExtJS --> | |
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css"></link> | |
<script type="text/javascript" src="js/ext-base.js"></script> | |
<script type="text/javascript" src="js/ext-all.js"></script> | |
<!-- Load LoginDialog --> | |
<script type="text/javascript" src="js/LoginDialog.min.js"></script> | |
<script type="text/javascript"> | |
function log_event (msg) | |
{ | |
var el = Ext.get('event-log'); | |
el.dom.innerHTML += msg + '<br />'; | |
el.scroll('bottom', 99999999, true); | |
} | |
function makeTitle (dlg) | |
{ | |
return "<span class='title'>" + dlg.title + " :</span>"; | |
} | |
var listeners = { | |
show : function (dlg) | |
{ | |
log_event(makeTitle(dlg) + ' show') | |
}, | |
cancel : function (dlg) { | |
var r = confirm("You sure?"); | |
log_event(makeTitle(dlg) + ' cancel - ' + (r ? 'Yes' : 'No')); | |
return r; | |
}, | |
success : function (dlg) { | |
log_event(makeTitle(dlg) + ' success'); | |
}, | |
failure : function (dlg, a, msg) { | |
log_event(makeTitle(dlg) + ' failure ("'+ msg +'")'); | |
}, | |
submit : function (dlg, values) | |
{ | |
log_event(makeTitle(dlg) + ' submit("' + values.username + '", "'+values.password+'")'); | |
} | |
} | |
// open the LoginDialog | |
function openDlg (title, modal, target) | |
{ | |
var loginDlg = new Ext.ux.albeva.LoginDialog({ | |
title : title, | |
url : "login-ajax.php", | |
basePath : "images/", | |
cancelButton: 'Cancel', | |
modal : modal, | |
listeners : listeners | |
}); | |
loginDlg.show(target); | |
} | |
Ext.onReady (function () { | |
Ext.QuickTips.init(); | |
var ctr = 0; | |
Ext.get('open-login').on('click', function () { | |
openDlg ("Login " + (++ctr), false, 'open-login') | |
}); | |
Ext.get('open-login-modal').on('click', function () { | |
openDlg ("Login (modal) " + (++ctr), true, 'open-login') | |
}); | |
Ext.get('event-log-clear').on('click', function () { | |
Ext.get('event-log').dom.innerHTML = ''; | |
}); | |
}); | |
</script> | |
<style type="text/css"> | |
h1 { font-size : 2em; padding : 4px; } | |
p { font-size : 1em; line-height 1.2em; padding 4px;} | |
#event-log { | |
font-family : courier, monospace; | |
border : 2px solid blue; | |
width : 100%; | |
height : 200px; | |
background : black; | |
color : white; | |
overflow : auto; | |
white-space : pre; | |
} | |
#event-log .title { | |
color : yellow; | |
font-weight : bold; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Ext.ux.albeva.LoginDialog</h1> | |
<p>Simple login dialog for ExtJS 2.x library</p> | |
<p>Author : Albert Varaksin<br /> | |
Version : 1.0 Beta<br /> | |
Licence : <a href="http://www.opensource.org/licenses/lgpl-3.0.html">LGPLv3</a><br /> | |
Downlaod : <a href="LoginDialog_1_0beta.zip">here</a> | |
</p> | |
<hr /> | |
<p>Username : user<br />Password : 1234</p> | |
<button id="open-login">Open</button> | |
<button id="open-login-modal">Open modal</button> | |
<div style="padding:15px"> | |
<div id="event-log"></div> | |
<button id="event-log-clear">Clear</button> | |
</div> | |
</body> | |
</html> | |
Friday, 9 March 2012
login dialog
Thursday, 9 February 2012
JSON Data using ExtJS 4 Store
Ext.onReady(function(){
Ext.define('UsgsList', {
extend: 'Ext.data.Model',
fields: [
{name: 'fid', type: 'int'},
{name: 'title', type: 'string'},
{name: 'description', type: 'string'},
{name: 'link', type: 'string'},
{name: 'pubDate', type: 'date'},
{name: 'lat', type: 'string'},
{name: 'long', type: 'string'}
],
idProperty: 'fid'
});
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'UsgsList',
proxy: {
type: 'jsonp',
url: 'http://query.yahooapis.com/v1/public/yql',
extraParams: {
q: 'select * from rss where url="http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M2.5.xml"',
format: 'json'
},
reader: {
root: 'query.results.item',
}
}
});
function renderTitle(value, p, record) {
return Ext.String.format('<a href="{1}" target="_blank">{0}</a>',
value,
record.data.link
);
}
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'USGS - M2.5+',
store: store,
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
id: 'title',
text: "Title",
dataIndex: 'title',
flex: 1,
renderer: renderTitle,
sortable: false
},{
id: 'pubDate',
text: "Published Date",
dataIndex: 'pubDate',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true
}],
renderTo: Ext.getBody()
});
// trigger the data store load
store.load();
});
Saturday, 28 January 2012
Grid editing using wcf
ajax.svc
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data.SqlClient;
using System.Data;
using System.Web;
namespace gridediting
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Ajax
{
[WebGet(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetRelatives")]
[OperationContract]
public PageData GetRelatives()
{
// [0]: "_dc"
//[1]: "page"
//[2]: "start"
//[3]: "limit"
//int dc = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["_dc"]) ? "0" : System.Web.HttpContext.Current.Request["_dc"].ToString());
int start = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["start"]) ? "0" : System.Web.HttpContext.Current.Request["start"].ToString());
int end = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["limit"]) ? "0" : System.Web.HttpContext.Current.Request["limit"].ToString());
int page = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["page"]) ? "0" : System.Web.HttpContext.Current.Request["page"].ToString());
System.Collections.Generic.List<Person> people = new System.Collections.Generic.List<Person>();
string s = string.Format("SELECT pid,FirstName, LastName, Age,startdate FROM (SELECT ROW_NUMBER() OVER (ORDER BY FirstName ASC) AS Row, pid,FirstName, LastName, Age,startdate FROM person2) AS LogWithRowNumbers WHERE Row >{0} AND Row <= {1}", start, (start + end));
SqlDataAdapter da = new SqlDataAdapter(s, con);
SqlCommandBuilder cb = new SqlCommandBuilder(da);
//DataSet ds = new DataSet();
DataTable dt = new DataTable();
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
people.Add(new Person(dr.ItemArray[1].ToString(), dr.ItemArray[2].ToString(), int.Parse(dr.ItemArray[3].ToString()), int.Parse(dr.ItemArray[0].ToString()), dr.ItemArray[4].ToString()));
}
SqlCommand cmd = new SqlCommand("select count(*) from person2", con);
con.Open();
int row_count = int.Parse(cmd.ExecuteScalar().ToString());
con.Close();
PageData pg = new PageData(row_count);
pg.Data = people;
return pg;
//return people;
}
//}
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/Save")]
[OperationContract]
public string Save(String first, String last, Int32 age, String startdate)
{
string s = "insert into person2 values('" + first + "','" + last + "'," + age + ",'" + startdate + "')";
SqlDataAdapter da = new SqlDataAdapter(s, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ("u r record has saved successfully");
}
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/update")]
[OperationContract]
public string update(String first, String last, Int32 age, Int32 pid, String startdate)
{
string s;
SqlCommand cmd = new SqlCommand("select Max(pid)+1 from person2", con);
con.Open();
int max = int.Parse(cmd.ExecuteScalar().ToString());
con.Close();
if (pid==0)
{
pid = max;
s = "insert into person2 values('" + first + "','" + last + "'," + age + ",'" + startdate + "')";
}
else
{
s = "update person2 set firstname='" + first + "',lastname='" + last + "',age=" + age + ",startdate='" + startdate + "'where pid=" + pid + "";
}
SqlDataAdapter da = new SqlDataAdapter(s, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ("u r record has saved successfully");
}
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/delete")]
[OperationContract]
public string delete(String first, String last, Int32 age,Int32 pid)
{
string s = " delete person2 where pid=" + pid + "";
SqlDataAdapter da = new SqlDataAdapter(s, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ("u r record has Deleted successfully");
}
}
[System.Runtime.Serialization.DataContract]
public class PageData
{
public PageData(Int32 TotalCount)
{
totalCount = TotalCount;
}
[System.Runtime.Serialization.DataMember]
public Int32 totalCount
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public List<Person> Data
{
get;
set;
}
}
[System.Runtime.Serialization.DataContract]
public class Person
{
public Person(String first, String last, Int32 age, Int32 pid, String startdate)
{
FirstName = first;
LastName = last;
Age = age;
Pid = pid;
Startdate = startdate;
}
//public Person() { }
[System.Runtime.Serialization.DataMember]
public String FirstName
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public String LastName
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public Int32 Age
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public Int32 Pid
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public String Startdate
{
get;
set;
}
}
}
webform.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="gridediting.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
function change(val) {
if (val >= 21) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 21) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Age', type: 'int' },
{ name: 'Pid', type: 'int' }
, { name: 'Startdate', type: 'date' }
//, { name: 'indoor', type: 'bool' }
]
});
var myStore = Ext.create('Ext.data.Store', {
pageSize: 5,
autoLoad: true,
autoSync: true,
model: 'User',
groupField: 'age',
paramNames: {
start: "start",
limit: "end"
},
proxy: {
type: 'rest',
url: 'Ajax.svc/GetRelatives',
reader: {
type: 'json',
root: 'GetRelativesResult.Data',
totalProperty: 'GetRelativesResult.totalCount'
}
}
});
var cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners: {
'beforeedit': function (e) {
var me = this;
var allowed = !!me.isEditAllowed;
if (!me.isEditAllowed)
Ext.Msg.confirm('confirm', 'Are you sure you want edit?', function (btn) {
if (btn !== 'yes')
return;
me.isEditAllowed = true;
me.startEdit(0, 0);
});
return allowed;
},
afteredit: function (e) {
this.isEditAllowed = false;
var p = grid.getSelectionModel().lastFocused.data;
Ext.Ajax.request({
url: 'Ajax.svc/update',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { first: p.FirstName, last: p.LastName, age: p.Age, pid: p.Pid, startdate: p.Startdate },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
e.record.commit();
}
}
});
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
});
var sm = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
// prevent selection of records with invalid descriptions selectedRows[0].data selectedRows.length
beforeselect: function (selModel, record, index) {
if ((Ext.String.trim(record.get('FirstName')) == '')) {
var srows = selModel.getSelection(sm);
Ext.Msg.alert('Please complete the record! ', 'You cannot check these rows until you complete x field.' + srows.length + srows);
return false;
}
},
select: function (selModel, record, index) {
var selectedRows = selModel.getSelection(sm);
if (selectedRows.length > 0) {
for (var i = 0; i < selectedRows.length; i++) {
Ext.Msg.alert('msg', 'you have selected ' + selectedRows.length + ' row');
}
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: myStore,
frame: true,
title: 'Users',
features: [groupingFeature],
columns: [{
xtype: 'rownumberer',
sortable: false
}, { text: "Pid", id: 'Pid', header: 'Pid', dataIndex: 'Pid', sortable: true },
{ text: "FirstName", id: 'FirstName', header: 'Name'
, dataIndex: 'FirstName', sortable: false, //editor: title_edit
field: { xtype: 'textfield', allowBlank: false },
renderer: function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + record.get('Age') + ' is the age of ' + value + '"';
return value;
}
// , xtype: 'templatecolumn'
// , tpl: '<img src="group.gif" style="cursor:pointer;"> {FirstName}' //,fieldLabel: 'FirstName',name: 'first' }
},
{ text: "LastName", id: 'LastName', header: 'LastName', dataIndex: 'LastName', sortable: false,
editor: {
xtype: 'textfield',
allowBlank: false, fieldStyle: 'text-transform:uppercase'
}
},
{ text: "Age", id: 'Age', header: 'Age', dataIndex: 'Age', sortable: false, renderer: change,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'Startdate',
width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y'
,
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
header: 'Delete',
xtype: 'actioncolumn'
, width: 40
, items: [{ // Delete button
tooltip: 'Delete a Row',
icon: 'delete.gif',
handler: function (grid, rowIndex, colindex) {
// Working with grid row data
var record = grid.getStore().getAt(rowIndex);
//Ext.Msg.alert('Delete', 'Delete user: ' + record.data.Pid);
var p = record.data.Pid;
Ext.Ajax.request({
url: 'Ajax.svc/delete',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { pid: p },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
} // eo handler
}]
}
// , {
//
// header: 'Indoor?',
// dataIndex: 'indoor',
// width: 55
// }
// , { header: "DOJ", dataIndex: 'DOJ', renderer:
//Ext.util.Format.dateRenderer('m/d/Y')
// }
]
, fbar: ['->', {
text: 'Clear Grouping',
iconCls: 'icon-clear-group',
handler: function () {
groupingFeature.disable();
}
}, {
text: 'Enable Grouping',
iconCls: 'icon-clear-group',
handler: function () {
groupingFeature.enable();
}
}],
// tools: [{ // config
// type: 'refresh'
// }] ,
// selModel: {
// selType: 'rowmodel'
// },
selModel: sm,
plugins: [
cellEditing
],
renderTo: 'example-grid',
width: 600,
height: 400,
bbar: Ext.create('Ext.PagingToolbar', {
store: myStore,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No topics to display",
items: [
'-', {
text: 'Show Preview',
enableToggle: true,
toggleHandler: function (btn, pressed) {
var preview = Ext.getCmp('gv').getPlugin('preview');
}
}]
}),
tbar: [{
text: 'Add Record',
handler: function (btn) {
var form = Ext.create('Ext.form.Panel', {
renderTo: 'example-grid',
frame: true,
title: 'Person Details Form',
width: 300,
height: 200,
buttonAlign: 'center',
items: [{
xtype: 'textfield',
fieldLabel: 'FirstName',
//id: 'txtFirst',
name: 'first'//,
//allowBlank: false
//declare it after ending ext.create a = Ext.getCmp('email').focus();
,listeners: {
afterrender: function(field) {
field.focus(false, 1000);
}
}
}, {
xtype: 'textfield',
fieldLabel: 'LastName',
//id: 'txtLast',
name: 'last'
}, {
xtype: 'textfield',
fieldLabel: 'Age',
//id: 'txtAge',
name: 'age'
}],
buttons: [{
text: 'Save',
icon: 'disk.png',
handler: function () {
var formValues = form.getValues();
Ext.Ajax.request({
url: 'Ajax.svc/Save',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { first: formValues.first, last: formValues.last, age: formValues.age },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
}
}]
});
btn.disable();
}
}, '-', {
text: 'Add Row',
tooltip: 'Add a new row',
// width: 64,
// height: 64,
icon: 'add.gif',
//iconCls: 'startbutton',
// style: 'background-color: #F1F1F1; margin: 30px auto;'
// + 'position: relative;' // support the [+] button
// ,
handler: function () {
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
//FirstName: 'New Plant 1',
checkOnly: false,
FirstName: '',
LastName: '',
Age: '',
pid: '',
Startdate: new Date()
}, 'User');
//add new row at first
// myStore.insert(0, r);
// cellEditing.startEditByPosition({ row: 0, column: 0 });
//add new row at last
myStore.insert(grid.getStore().getCount(), r);
cellEditing.startEdit(grid.getStore().getCount() - 1, 0);
}
}, '-',
{
text: 'Delete Row',
cls: 'x-btn-text-icon',
icon: 'delete.gif',
handler: function () {
if (grid.getSelectionModel().getCount() == 0) {
Ext.MessageBox.alert("No Records Selected", "You have not selected any records for removal. Please select one or more records and try again.");
} else {
myStore.remove(grid.getSelectionModel().getSelection());
//grid.reconfigure();
// var p = grid.getSelectionModel().lastFocused.data;
// Ext.Ajax.request({
// url: 'Ajax.svc/delete',
// headers: { 'Content-Type': 'application/json' },
// method: 'POST',
// jsonData: { first: p.FirstName, last: p.LastName, age: p.Age, pid: p.Pid, startdate: p.Startdate },
// success: function (f, a) {
// var s = Ext.decode(f.responseText);
// Ext.Msg.alert('Success', '' + f.responseText + '');
// },
// failure: function (response, options) {
// Ext.MessageBox.alert('Failed', '' + response.responseText + '');
// }
// });
}
}
}, '-', {
text: 'Save',
icon: 'disk.png',
handler: function () {
var p = grid.getSelectionModel().lastFocused.data;
Ext.Ajax.request({
url: 'Ajax.svc/update',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { first: p.FirstName, last: p.LastName, age: p.Age, pid: p.Pid, startdate: p.Startdate },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
}
}
// , {
// xtype: 'textfield',
// listeners: {
// specialkey: Movies.doSearch
// }
// }
]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="example-grid">
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data.SqlClient;
using System.Data;
using System.Web;
namespace gridediting
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Ajax
{
[WebGet(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetRelatives")]
[OperationContract]
public PageData GetRelatives()
{
// [0]: "_dc"
//[1]: "page"
//[2]: "start"
//[3]: "limit"
//int dc = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["_dc"]) ? "0" : System.Web.HttpContext.Current.Request["_dc"].ToString());
int start = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["start"]) ? "0" : System.Web.HttpContext.Current.Request["start"].ToString());
int end = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["limit"]) ? "0" : System.Web.HttpContext.Current.Request["limit"].ToString());
int page = int.Parse(string.IsNullOrEmpty(HttpContext.Current.Request["page"]) ? "0" : System.Web.HttpContext.Current.Request["page"].ToString());
System.Collections.Generic.List<Person> people = new System.Collections.Generic.List<Person>();
string s = string.Format("SELECT pid,FirstName, LastName, Age,startdate FROM (SELECT ROW_NUMBER() OVER (ORDER BY FirstName ASC) AS Row, pid,FirstName, LastName, Age,startdate FROM person2) AS LogWithRowNumbers WHERE Row >{0} AND Row <= {1}", start, (start + end));
SqlDataAdapter da = new SqlDataAdapter(s, con);
SqlCommandBuilder cb = new SqlCommandBuilder(da);
//DataSet ds = new DataSet();
DataTable dt = new DataTable();
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
people.Add(new Person(dr.ItemArray[1].ToString(), dr.ItemArray[2].ToString(), int.Parse(dr.ItemArray[3].ToString()), int.Parse(dr.ItemArray[0].ToString()), dr.ItemArray[4].ToString()));
}
SqlCommand cmd = new SqlCommand("select count(*) from person2", con);
con.Open();
int row_count = int.Parse(cmd.ExecuteScalar().ToString());
con.Close();
PageData pg = new PageData(row_count);
pg.Data = people;
return pg;
//return people;
}
//}
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/Save")]
[OperationContract]
public string Save(String first, String last, Int32 age, String startdate)
{
string s = "insert into person2 values('" + first + "','" + last + "'," + age + ",'" + startdate + "')";
SqlDataAdapter da = new SqlDataAdapter(s, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ("u r record has saved successfully");
}
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/update")]
[OperationContract]
public string update(String first, String last, Int32 age, Int32 pid, String startdate)
{
string s;
SqlCommand cmd = new SqlCommand("select Max(pid)+1 from person2", con);
con.Open();
int max = int.Parse(cmd.ExecuteScalar().ToString());
con.Close();
if (pid==0)
{
pid = max;
s = "insert into person2 values('" + first + "','" + last + "'," + age + ",'" + startdate + "')";
}
else
{
s = "update person2 set firstname='" + first + "',lastname='" + last + "',age=" + age + ",startdate='" + startdate + "'where pid=" + pid + "";
}
SqlDataAdapter da = new SqlDataAdapter(s, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ("u r record has saved successfully");
}
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/delete")]
[OperationContract]
public string delete(String first, String last, Int32 age,Int32 pid)
{
string s = " delete person2 where pid=" + pid + "";
SqlDataAdapter da = new SqlDataAdapter(s, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ("u r record has Deleted successfully");
}
}
[System.Runtime.Serialization.DataContract]
public class PageData
{
public PageData(Int32 TotalCount)
{
totalCount = TotalCount;
}
[System.Runtime.Serialization.DataMember]
public Int32 totalCount
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public List<Person> Data
{
get;
set;
}
}
[System.Runtime.Serialization.DataContract]
public class Person
{
public Person(String first, String last, Int32 age, Int32 pid, String startdate)
{
FirstName = first;
LastName = last;
Age = age;
Pid = pid;
Startdate = startdate;
}
//public Person() { }
[System.Runtime.Serialization.DataMember]
public String FirstName
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public String LastName
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public Int32 Age
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public Int32 Pid
{
get;
set;
}
[System.Runtime.Serialization.DataMember]
public String Startdate
{
get;
set;
}
}
}
webform.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="gridediting.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
function change(val) {
if (val >= 21) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 21) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Age', type: 'int' },
{ name: 'Pid', type: 'int' }
, { name: 'Startdate', type: 'date' }
//, { name: 'indoor', type: 'bool' }
]
});
var myStore = Ext.create('Ext.data.Store', {
pageSize: 5,
autoLoad: true,
autoSync: true,
model: 'User',
groupField: 'age',
paramNames: {
start: "start",
limit: "end"
},
proxy: {
type: 'rest',
url: 'Ajax.svc/GetRelatives',
reader: {
type: 'json',
root: 'GetRelativesResult.Data',
totalProperty: 'GetRelativesResult.totalCount'
}
}
});
var cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners: {
'beforeedit': function (e) {
var me = this;
var allowed = !!me.isEditAllowed;
if (!me.isEditAllowed)
Ext.Msg.confirm('confirm', 'Are you sure you want edit?', function (btn) {
if (btn !== 'yes')
return;
me.isEditAllowed = true;
me.startEdit(0, 0);
});
return allowed;
},
afteredit: function (e) {
this.isEditAllowed = false;
var p = grid.getSelectionModel().lastFocused.data;
Ext.Ajax.request({
url: 'Ajax.svc/update',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { first: p.FirstName, last: p.LastName, age: p.Age, pid: p.Pid, startdate: p.Startdate },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
e.record.commit();
}
}
});
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
});
var sm = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
// prevent selection of records with invalid descriptions selectedRows[0].data selectedRows.length
beforeselect: function (selModel, record, index) {
if ((Ext.String.trim(record.get('FirstName')) == '')) {
var srows = selModel.getSelection(sm);
Ext.Msg.alert('Please complete the record! ', 'You cannot check these rows until you complete x field.' + srows.length + srows);
return false;
}
},
select: function (selModel, record, index) {
var selectedRows = selModel.getSelection(sm);
if (selectedRows.length > 0) {
for (var i = 0; i < selectedRows.length; i++) {
Ext.Msg.alert('msg', 'you have selected ' + selectedRows.length + ' row');
}
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: myStore,
frame: true,
title: 'Users',
features: [groupingFeature],
columns: [{
xtype: 'rownumberer',
sortable: false
}, { text: "Pid", id: 'Pid', header: 'Pid', dataIndex: 'Pid', sortable: true },
{ text: "FirstName", id: 'FirstName', header: 'Name'
, dataIndex: 'FirstName', sortable: false, //editor: title_edit
field: { xtype: 'textfield', allowBlank: false },
renderer: function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + record.get('Age') + ' is the age of ' + value + '"';
return value;
}
// , xtype: 'templatecolumn'
// , tpl: '<img src="group.gif" style="cursor:pointer;"> {FirstName}' //,fieldLabel: 'FirstName',name: 'first' }
},
{ text: "LastName", id: 'LastName', header: 'LastName', dataIndex: 'LastName', sortable: false,
editor: {
xtype: 'textfield',
allowBlank: false, fieldStyle: 'text-transform:uppercase'
}
},
{ text: "Age", id: 'Age', header: 'Age', dataIndex: 'Age', sortable: false, renderer: change,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'Startdate',
width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y'
,
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
header: 'Delete',
xtype: 'actioncolumn'
, width: 40
, items: [{ // Delete button
tooltip: 'Delete a Row',
icon: 'delete.gif',
handler: function (grid, rowIndex, colindex) {
// Working with grid row data
var record = grid.getStore().getAt(rowIndex);
//Ext.Msg.alert('Delete', 'Delete user: ' + record.data.Pid);
var p = record.data.Pid;
Ext.Ajax.request({
url: 'Ajax.svc/delete',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { pid: p },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
} // eo handler
}]
}
// , {
//
// header: 'Indoor?',
// dataIndex: 'indoor',
// width: 55
// }
// , { header: "DOJ", dataIndex: 'DOJ', renderer:
//Ext.util.Format.dateRenderer('m/d/Y')
// }
]
, fbar: ['->', {
text: 'Clear Grouping',
iconCls: 'icon-clear-group',
handler: function () {
groupingFeature.disable();
}
}, {
text: 'Enable Grouping',
iconCls: 'icon-clear-group',
handler: function () {
groupingFeature.enable();
}
}],
// tools: [{ // config
// type: 'refresh'
// }] ,
// selModel: {
// selType: 'rowmodel'
// },
selModel: sm,
plugins: [
cellEditing
],
renderTo: 'example-grid',
width: 600,
height: 400,
bbar: Ext.create('Ext.PagingToolbar', {
store: myStore,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No topics to display",
items: [
'-', {
text: 'Show Preview',
enableToggle: true,
toggleHandler: function (btn, pressed) {
var preview = Ext.getCmp('gv').getPlugin('preview');
}
}]
}),
tbar: [{
text: 'Add Record',
handler: function (btn) {
var form = Ext.create('Ext.form.Panel', {
renderTo: 'example-grid',
frame: true,
title: 'Person Details Form',
width: 300,
height: 200,
buttonAlign: 'center',
items: [{
xtype: 'textfield',
fieldLabel: 'FirstName',
//id: 'txtFirst',
name: 'first'//,
//allowBlank: false
//declare it after ending ext.create a = Ext.getCmp('email').focus();
,listeners: {
afterrender: function(field) {
field.focus(false, 1000);
}
}
}, {
xtype: 'textfield',
fieldLabel: 'LastName',
//id: 'txtLast',
name: 'last'
}, {
xtype: 'textfield',
fieldLabel: 'Age',
//id: 'txtAge',
name: 'age'
}],
buttons: [{
text: 'Save',
icon: 'disk.png',
handler: function () {
var formValues = form.getValues();
Ext.Ajax.request({
url: 'Ajax.svc/Save',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { first: formValues.first, last: formValues.last, age: formValues.age },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
}
}]
});
btn.disable();
}
}, '-', {
text: 'Add Row',
tooltip: 'Add a new row',
// width: 64,
// height: 64,
icon: 'add.gif',
//iconCls: 'startbutton',
// style: 'background-color: #F1F1F1; margin: 30px auto;'
// + 'position: relative;' // support the [+] button
// ,
handler: function () {
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
//FirstName: 'New Plant 1',
checkOnly: false,
FirstName: '',
LastName: '',
Age: '',
pid: '',
Startdate: new Date()
}, 'User');
//add new row at first
// myStore.insert(0, r);
// cellEditing.startEditByPosition({ row: 0, column: 0 });
//add new row at last
myStore.insert(grid.getStore().getCount(), r);
cellEditing.startEdit(grid.getStore().getCount() - 1, 0);
}
}, '-',
{
text: 'Delete Row',
cls: 'x-btn-text-icon',
icon: 'delete.gif',
handler: function () {
if (grid.getSelectionModel().getCount() == 0) {
Ext.MessageBox.alert("No Records Selected", "You have not selected any records for removal. Please select one or more records and try again.");
} else {
myStore.remove(grid.getSelectionModel().getSelection());
//grid.reconfigure();
// var p = grid.getSelectionModel().lastFocused.data;
// Ext.Ajax.request({
// url: 'Ajax.svc/delete',
// headers: { 'Content-Type': 'application/json' },
// method: 'POST',
// jsonData: { first: p.FirstName, last: p.LastName, age: p.Age, pid: p.Pid, startdate: p.Startdate },
// success: function (f, a) {
// var s = Ext.decode(f.responseText);
// Ext.Msg.alert('Success', '' + f.responseText + '');
// },
// failure: function (response, options) {
// Ext.MessageBox.alert('Failed', '' + response.responseText + '');
// }
// });
}
}
}, '-', {
text: 'Save',
icon: 'disk.png',
handler: function () {
var p = grid.getSelectionModel().lastFocused.data;
Ext.Ajax.request({
url: 'Ajax.svc/update',
headers: { 'Content-Type': 'application/json' },
method: 'POST',
jsonData: { first: p.FirstName, last: p.LastName, age: p.Age, pid: p.Pid, startdate: p.Startdate },
success: function (f, a) {
var s = Ext.decode(f.responseText);
Ext.Msg.alert('Success', '' + f.responseText + '');
},
failure: function (response, options) {
Ext.MessageBox.alert('Failed', '' + response.responseText + '');
}
});
}
}
// , {
// xtype: 'textfield',
// listeners: {
// specialkey: Movies.doSearch
// }
// }
]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="example-grid">
</div>
</form>
</body>
</html>
web.config
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="WebScriptBehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="true"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="WebScriptBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
multipleSiteBindingsEnabled="true" />
<services>
<service name="gridediting.Ajax">
<endpoint address="" behaviorConfiguration="WebScriptBehavior"
binding="webHttpBinding" contract="gridediting.Ajax" />
</service>
</services>
</system.serviceModel>
Subscribe to:
Posts (Atom)