Extjs4.0: March 2014

Thursday 27 March 2014

To get row values and column values using comma seperator

<!Doctype>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
function AddExpenses(){

$('#expenses tbody').append("<tr><td><input type='text'></td><td><input type='text' value='0' class='last'></td></tr>");

}
$('#btn_AddExpense').bind('click',AddExpenses)
$('.last').live('change',function(){
tot = 0;
$('.last').each(function(){
if($(this).val() > 0){
tot += parseInt($(this).val());
}
});
// alert(tot);
$('.total').val(tot);
});
/*
$('input').change(function(){
//alert($('#mval').val());
c_val = parseInt($(this).val())+(parseInt($(this).val())*$('#mval').val())/100;
if(isNaN(c_val)){
c_val = 0;
}
$(this).parent().parent().children().last().html(c_val);

if($(this).val() != $(this).attr('data-msp')){
$(this).addClass('modified');
}

if($(this).val() <= 0){
$(this).val($(this).attr('data-msp'));

}

if(c_val > parseInt($(this).parent().prev().html())){
$(this).parent().parent().addClass('excess');
}else{
$(this).parent().parent().removeClass('excess');
}
tot = 0;
$('input').each(function(){
if($(this).val() > 0){
tot += parseInt($(this).val());
}
});
$('.total').html(tot);
});

$('.submit').click(function(){
$('input').removeClass('modified');
});
*/

$('.save').click(function(){
/*$('.down_loop tr').each(function(){
all = '';
$(this).children().each(function(){
all += $(this).find('input').val()+',';
});
alert(all);
});*/
rows = 4;
for(r=1;r<=rows;r++){
all = '';
$('.clas'+r).each(function(){
all += $(this).val()+',';
});
$('.final'+r).val(all.slice(0,-1));
}
});

});
</script>
</head>
<input type="button" id="btn_AddExpense" value="ADD">
<table class="editableTable" id="expenses">
<thead>
<tr>
<td>Expenses Name</td>
<td>Expenses Value</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="text" class="total" value="0"></td>
</tr>
</tfoot>
</table>
<table class="editableTable" id="margins">
<thead>
<tr>
<td>slab from</td>
<td>slab to</td>
<td>Min %</td>
<td>Left Out Margin</td>

</tr>

</thead>
<tbody class="down_loop">
<tr>
<td><input type="text" class="clas1" value=">0"></td>
<td><input type="text" class="clas2" value="<=2"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="0"></td>
</tr>
<tr>
<td><input type="text" class="clas1" value=">2"></td>
<td><input type="text" class="clas2" value="<=5"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="3"></td></tr>
<tr>
<td><input type="text" class="clas1" value=">5"></td>
<td><input type="text" class="clas2" value="<=10"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="5"></td></tr>
<tr>
<td><input type="text" class="clas1" value=">10"></td>
<td><input type="text" class="clas2" value="<=15"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="10"></td></tr>
<tr>
<td><input type="text" class="clas1" value=">15"></td>
<td><input type="text" class="clas2" value="<=20"></td>
<td><input type="text" class="clas3" value="3"></td>
<td><input type="text" class="clas4" value="20"></td></tr>
</tbody>
</table>
<input type="hidden" class="final1" value="">
<input type="hidden" class="final2" value="">
<input type="hidden" class="final3" value="">
<input type="hidden" class="final4" value="">
<input type="submit" value="Save" class="save">
</html>

Wednesday 26 March 2014

adding background color on the given conditon using jquery

<!Doctype>
<html>
<head>
<style>
* {
font-family:Consolas
}

.editableTable {
border:solid 1px;
width:100%
}

.editableTable td {
border:solid 1px;
}

.editableTable .cellEditing {
padding: 0;
}

.editableTable .cellEditing input[type=text]{
width:100%;
border:0;
background-color:rgb(255,253,210);
}

.invalid{
border:1px solid red !important;
}

.edited{
background: url("tick.png") no-repeat scroll right center rgba(0, 0, 0, 0);
}

.excess{
background:red;
}
.modified{
border:3px solid green !important;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('input').change(function(){
c_val = parseInt($(this).val())+(parseInt($(this).val())*2)/100;
if(isNaN(c_val)){
c_val = 0;
}
$(this).parent().parent().children().last().html(c_val);

if($(this).val() != $(this).attr('data-msp')){
$(this).addClass('modified');
}

if($(this).val() <= 0){
$(this).val($(this).attr('data-msp'));

}

if(c_val > parseInt($(this).parent().prev().html())){
$(this).parent().parent().addClass('excess');
}else{
$(this).parent().parent().removeClass('excess');
}
tot = 0;
$('input').each(function(){
if($(this).val() > 0){
tot += parseInt($(this).val());
}
});
$('.total').html(tot);
});

$('.submit').click(function(){
$('input').removeClass('modified');
});

});
</script>
</head>
<table class="editableTable">

<thead>
<tr>
<td>MRP</td>
<td>MSP</td>
<td>B2G</td>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td><input data-msp="0" type="text"></td>
<td class="last"></td>
</tr>
<tr>
<td>50</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td>120</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td>160</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="total"></td>
<td></td>
</tr>
<tr>
<td><input type="submit" value="submit" class="submit"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</html>

Friday 21 March 2014

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>How to become an editable HTML table with jQuery - MrBool Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('input').addClass('data_values');

$('input').change(function(){
$(this).attr('data-ts-speed',$(this).val());
});

$('.save').click(function(){
$('.data_values').each(function(){
val1 = $(this).val();
val2 = $(this).attr('data-ts-speed');
if(val1 == val2 && val1 != 0){
//write you code;
alert(val1+'-'+val2);
}
});

return false;

});
});
</script>
</head>
<body>
<table class="editableTable">
<thead>
<tr>
<th>Vendor1</th>
<th>Vendor2</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-ts-speed="0" value="0"></td>
<td><input type="text" data-ts-speed="0" value="0"></td>
</tr>
<tr>
<td><input type="text" data-ts-speed="0" value="0"></td>
<td><input type="text" data-ts-speed="0" value="0"></td>
</tr>
<tr><td><input type="submit" value="submit" class="save"></td></tr>
</tbody>
</table>
</body>
</html>

Thursday 20 March 2014

moving form one cell to another cell in html table using jquery

with in the script.js file write the following

$(function () {
$('.editableTable tbody tr td:last-child').addClass('last');
$('.editableTable tbody tr td:first-child').addClass('first');
$("td").dblclick(function () {

if(!$(this).hasClass('a')){
$('.cellEditing').each(function(){
$(this).removeClass('cellEditing');
$(this).text($(this).find('input').val());
});
$('td').removeClass("cellEditing");
var OriginalContent = $(this).text();

$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();

$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
}

$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});

$('td').live("keydown", function(e) {
//alert('fdg');

if (e.which == 9 && !e.shiftKey) { //tab Key

if(!$(this).next().hasClass('a')){
//alert($(this).find('input').val());
//alert($(this).val());
if($(this).find('input').val()){
$(this).removeClass('invalid');
var OriginalContent = $(this).next().text();
//$(this).html('');
$(this).text($(this).find('input').val());
$(this).removeClass("cellEditing");
if(!$(this).hasClass('last')){
$(this).next().addClass("cellEditing");
$(this).next().html("<input type='text' value='" + OriginalContent + "' />");
$(this).next().children().first().focus();
}else{
var OriginalContent = $(this).parent().next().children().first().text();
$(this).parent().next().children().first().addClass("cellEditing");
$(this).parent().next().children().first().html("<input type='text' value='" + OriginalContent + "' />");
$(this).parent().next().children().first().children().first().focus();
}
return false;
}else{
OriginalContent = '';
$(this).addClass('invalid');
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
}
}
}else if(e.shiftKey && e.keyCode == 9){
if(!$(this).prev().hasClass('a')){
var OriginalContent = $(this).prev().text();
//$(this).html('');
$(this).text($(this).find('input').val());
$(this).removeClass("cellEditing");
if(!$(this).hasClass('first')){
$(this).prev().addClass("cellEditing");
$(this).prev().html("<input type='text' value='" + OriginalContent + "' />");
$(this).prev().children().first().focus();
}else{
var OriginalContent = $(this).parent().prev().children().last().text();
$(this).parent().prev().children().last().addClass("cellEditing");
$(this).parent().prev().children().last().html("<input type='text' value='" + OriginalContent + "' />");
$(this).parent().prev().children().last().children().first().focus();
}
return false;
}

}else{
$(this).addClass('edited');
}

});
});

next with in the index.html write the following code

<!DOCTYPE html>

<head>

<title>How to become an editable HTML table with jQuery - MrBool Tutorial</title>

</head>

<body>

<thead>

<tr>

<th>Email</th>

<th>Phone</th>

</tr>

</thead>

<tbody>

<tr>

<td class="a">Pedro Augusto</td>

<td class="b">pedro.augusto@myemail.com</td>

</tr>

<tr>

<td>Paula Silva</td>

<td>paula.silva@mymail.com</td>

</tr>

<tr>

<td>Lucas Costa</td>

<td>lucas.costa@myemail.com</td>

</tr>

<tr>

<td>Lucas Costa</td>

<td>lucas.costa@myemail.com</td>

</tr>

<tr>

<td>Lucas Costa</td>

<td>lucas.costa@myemail.com</td>

</tr>

</tbody>

</table>

</body>

</html>

next with in the style.css write the following code

* {

font-family:Consolas

}

.editableTable {

border:solid 1px;

width:100%

}

.editableTable td {

border:solid 1px;

}

.editableTable .cellEditing {

padding: 0;

}

.editableTable .cellEditing input[type=text]{

width:100%;

border:0;

background-color:rgb(255,253,210);

}

.invalid{

border:1px solid red !important;

}

.edited{

background: url("tick.png") no-repeat scroll right center rgba(0, 0, 0, 0);

}

Wednesday 12 March 2014

How to create a pie chart in extjs mvc

First Create a Project Folder
With in the Project Folder Create Two Folders
First One is app Folder and Second one is extjs Folder
Now with in the app Folder we need to Create 4 Folders They are as follows
First one is model
second one is Store
third one is view and finally controller
with in the extjs folder we need to place the library files related to extjs
next create two files one is app.js and other one is index.html
with in the index.html file we need to write the following code
<html>
<head>
<title>Ext JS 4 MVC</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
next with in the app.js file we need to write the following code
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'app/ux');

/*
* BUG: suspentEvents not honoured in Ext.app.EventBus
*
* note: this fix does not queue events when asked.
*
* http://www.sencha.com/forum/showthread.php?171525
*/
Ext.syncRequire('Ext.app.EventBus');
Ext.override(Ext.app.EventBus, {
constructor: function() {
this.mixins.observable.constructor.call(this);

this.bus = {};

var me = this;
Ext.override(Ext.Component, {
fireEvent: function(ev) {
return me.dispatch.call(me, ev, this, arguments);
}
return false;
}
});
}
});
Ext.application({
name: 'ExtMvc',

controllers: [
'chartsController'
],

autoCreateViewport: true
});

next with in the model folder create a js file like chartModel.js and write the following code
Ext.define('ExtMvc.model.chartModel', {
extend: 'Ext.data.Model',
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5']
});

next with in the store folder create a js file like chartStores.js and write the following code
Ext.define('ExtMvc.store.chartStores', {
extend: 'Ext.data.JsonStore',
model: 'ExtMvc.model.chartModel',
data:generateData()
/*[
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
]*/
});
//function abc(){alert('hai');}
function generateData(n, floor){
var data = [],
p = (Math.random() * 11) + 1,
i;

floor = (!floor && floor !== 0)? 20 : floor;

for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
next with in the view folder create a js file like piechartView.js and write the following code
var donut=false;
Ext.define('ExtMvc.view.piechartView', {
extend: 'Ext.panel.Panel',
alias : 'widget.userchart',
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
'chartStores'.loadData(generateData(6, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: 'chartStores',
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
'chartStores'.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
next with in the view folder create another js file called Viewport.js and write the following code
/**
* The main application viewport, which displays the whole application
* @extends Ext.Viewport
*/
Ext.define('ExtMvc.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',

requires: [
'ExtMvc.view.piechartView'
],

initComponent: function() {
var me = this;

Ext.apply(me, {
items: [
{
xtype: 'userchart'
}
]
});

me.callParent(arguments);
}
});
next with in the controller folder create a js file like chartsController.js and write the following code
Ext.define('ExtMvc.controller.chartsController', {
extend: 'Ext.app.Controller',

models: ['chartModel'],

stores: ['chartStores'],

views: [
'piechartView'
],

init: function() {

}
});

Saturday 8 March 2014

Loadpages in Div Part

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
#div1{background-color:white;
border:5px solid #D2E1F4;
height:400px;
width:500px;
float:right;}
#div2{background-color:white;
height:400px;
width:150px;
border:5px solid #D2E1F4;
}
#div3{background-color:#D2E1F4;
height:80px;
width:635px;
}
#div4{background-color:#D2E1F4;
height:20px;
width:635px;
}
</style>
<script>
function go(obj) {
var page=obj.href;
document.getElementById('div1').innerHTML='<object data="'+page+'" type="text/html"><embed src="'+page+'" type="text/html" /></object>';
return false;
}
</script>
</head>
<body>
<div style="border:5px solid #D2E1F4;border-radius:15px;overflow:hidden;">
<div id="div3"><h1 style="color:#04408C;font-weight:bold;margin:0px;padding-top:20px;text-align:center;">Menubar</h1></div>
<div id="div1"><p style="color:#04408C;font-weight:bold;font-size:32pt;text-align:center;">Welcome Page Content</p></div>
<div id="div2"><h1 style="color:#04408C;font-weight:bold;margin:0px;padding-top:20px;text-align:center;">Sidebar</h1>
<ul>
<li><a href="http://w3schools.com" onclick="return go(this)">w3Schools</a></li>
<li><a href="http://tutorialspoint.com" onclick="return go(this)">tutorialspoint</a></li>
<li><a href="http://compileonline.com" onclick="return go(this)">link3</a></li>
<li><a href="http://Homeandlearn.co.uk" onclick="return go(this)">HomeLearn</a></li>
</ul>
</div>
<div id="div4"><Marquee style="color:#04408C;font-weight:bold;padding-bottom:15px;">Scrolling Text at Footer</Marquee></div>
</div>
</body>
</html>

Pages

Thursday 27 March 2014

To get row values and column values using comma seperator

Wednesday 26 March 2014

adding background color on the given conditon using jquery

Friday 21 March 2014

Thursday 20 March 2014

moving form one cell to another cell in html table using jquery

Wednesday 12 March 2014

How to create a pie chart in extjs mvc

Saturday 8 March 2014

Loadpages in Div Part