tayfunoziserikan/gist:1510290

## gistfile1.html
<!--
 Copyright (c) 2011-2012 lab2023 - internet technologies TURKEY Inc.
 http://www.lab2023.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ext JS 4 Ajax Requester</title>

    <!-- include css files here -->
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all-gray.css">
    <link href="http://fonts.googleapis.com/css?family=Aldrich&subset=latin" rel="stylesheet" type="text/css">

    <!-- include js files here -->
    <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>

    <script type="text/javascript">
        Ext.onReady(function() {

            // Accessors
            var requestWrapper  = Ext.get('requestWrapper'),
                responseWrapper = Ext.get('responseWrapper'),
                responseStatus  = Ext.get('responseStatus'),
                responseBody    = Ext.get('responseBody'),
                reqProxy        = Ext.get('reqProxy'),
                reqUrl          = Ext.get('reqUrl'),
                reqParams       = Ext.get('reqParams'),
                reqMethod       = Ext.get('reqMethod'),
                reqBtn          = Ext.get('reqBtn');

            // Send request
            reqBtn.on('click', function(e) {

                // Stop click event
                e.stopEvent();

                // Url required
                if (reqUrl.getValue() != "") {

                    try {
                        var mask = new Ext.LoadMask(responseWrapper, {msg:"Please wait..."});
                        mask.show();

                        // Request
                        Ext.Ajax.request({
                            method: reqMethod.getValue(),
                            url: reqUrl.getValue(),
                            params: Ext.decode("{" + reqParams.getValue() + "}"),
                            success: function(response) {
                                console.log(response);
                                mask.hide();
                                responseStatus.update(response.status);
                                responseBody.update(response.responseText);
                            },
                            failure: function() {
                                mask.hide();
                                Ext.Msg.alert('Failure', 'Request failure...');
                            }
                        });
                    } catch(e) {
                        Ext.Msg.alert('Error', 'An error occurred');
                    }

                } else {
                    Ext.Msg.alert('URL Required', 'Please fill url field...');
                }

            });

        });
    </script>
    <style type="text/css">
        * {
            font-size:16px;
            font-family: 'Aldrich', sans-serif;
        }
        strong {
            font-weight: bold;
        }
        input {
            width:100%;
        }
        h1 {
            margin-bottom:10px;
            font-size: 30px;
        }
        #requestWrapper, #responseWrapper  {
            margin: 20px;
            padding: 20px;
            border: 1px solid gray;
            background:  #eee;
        }

        #responseBody {
            height: 200px;
            padding: 5px;
            border: 1px solid #ccc;
            overflow: auto;
        }
        label {
            border: 1px solid #eee;
            padding: 5px;
            display:block;
            margin-bottom:20px;
        }
        label:hover {
            background-color:#d9d9d9;
            border: 1px dotted #8c8c8c
        }
        select {
            display: block;
        }
        #sponsor {
            text-align: center;
            margin: auto;
        }
    </style>

</head>
<body>

<div id="requestWrapper">

    <h1>Request</h1>

    <label>Method
        <select id="reqMethod">
            <option selected>GET</option>
            <option>POST</option>
            <option>PUT</option>
            <option>DELETE</option>
        </select>
    </label>

    <label>Url
        <input type="text" id="reqUrl" />
    </label>

    <label>Params
        <input id="reqParams" value="a:1, b:2"/>
    </label>

    <button id="reqBtn"> Send Request</button>
</div>

<div id="responseWrapper">
    <h1>Response</h1>
    <strong>Status:</strong> <span id="responseStatus">Wait...</span>
    <hr />
    <div id="responseBody"></div>
</div>

<div id="sponsor">
    2010 - 2011 · <a href="http://www.lab2023.com" target="_blank">lab2023 - internet technologies</a> · All rights reserved
</div>

</body>
</html>
	<!--
	Copyright (c) 2011-2012 lab2023 - internet technologies TURKEY Inc.
	http://www.lab2023.com
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Ext JS 4 Ajax Requester</title>

	<!-- include css files here -->
	<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all-gray.css">
	<link href="http://fonts.googleapis.com/css?family=Aldrich&subset=latin" rel="stylesheet" type="text/css">

	<!-- include js files here -->
	<script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>

	<script type="text/javascript">
	Ext.onReady(function() {

	// Accessors
	var requestWrapper = Ext.get('requestWrapper'),
	responseWrapper = Ext.get('responseWrapper'),
	responseStatus = Ext.get('responseStatus'),
	responseBody = Ext.get('responseBody'),
	reqProxy = Ext.get('reqProxy'),
	reqUrl = Ext.get('reqUrl'),
	reqParams = Ext.get('reqParams'),
	reqMethod = Ext.get('reqMethod'),
	reqBtn = Ext.get('reqBtn');

	// Send request
	reqBtn.on('click', function(e) {

	// Stop click event
	e.stopEvent();

	// Url required
	if (reqUrl.getValue() != "") {

	try {
	var mask = new Ext.LoadMask(responseWrapper, {msg:"Please wait..."});
	mask.show();

	// Request
	Ext.Ajax.request({
	method: reqMethod.getValue(),
	url: reqUrl.getValue(),
	params: Ext.decode("{" + reqParams.getValue() + "}"),
	success: function(response) {
	console.log(response);
	mask.hide();
	responseStatus.update(response.status);
	responseBody.update(response.responseText);
	},
	failure: function() {
	mask.hide();
	Ext.Msg.alert('Failure', 'Request failure...');
	}
	});
	} catch(e) {
	Ext.Msg.alert('Error', 'An error occurred');
	}

	} else {
	Ext.Msg.alert('URL Required', 'Please fill url field...');
	}

	});

	});
	</script>
	<style type="text/css">
	* {
	font-size:16px;
	font-family: 'Aldrich', sans-serif;
	}
	strong {
	font-weight: bold;
	}
	input {
	width:100%;
	}
	h1 {
	margin-bottom:10px;
	font-size: 30px;
	}
	#requestWrapper, #responseWrapper {
	margin: 20px;
	padding: 20px;
	border: 1px solid gray;
	background: #eee;
	}

	#responseBody {
	height: 200px;
	padding: 5px;
	border: 1px solid #ccc;
	overflow: auto;
	}
	label {
	border: 1px solid #eee;
	padding: 5px;
	display:block;
	margin-bottom:20px;
	}
	label:hover {
	background-color:#d9d9d9;
	border: 1px dotted #8c8c8c
	}
	select {
	display: block;
	}
	#sponsor {
	text-align: center;
	margin: auto;
	}
	</style>

	</head>
	<body>

	<div id="requestWrapper">

	<h1>Request</h1>

	<label>Method
	<select id="reqMethod">
	<option selected>GET</option>
	<option>POST</option>
	<option>PUT</option>
	<option>DELETE</option>
	</select>
	</label>

	<label>Url
	<input type="text" id="reqUrl" />
	</label>

	<label>Params
	<input id="reqParams" value="a:1, b:2"/>
	</label>

	<button id="reqBtn"> Send Request</button>
	</div>

	<div id="responseWrapper">
	<h1>Response</h1>
	<strong>Status:</strong> <span id="responseStatus">Wait...</span>
	<hr />
	<div id="responseBody"></div>
	</div>

	<div id="sponsor">
	2010 - 2011 · <a href="http://www.lab2023.com" target="_blank">lab2023 - internet technologies</a> · All rights reserved
	</div>

	</body>
	</html>