Extjs4.0

Monday, 12 May 2014

placing html button with in the extjs form panel

var form = Ext.create('Ext.form.Panel', {
                bodyPadding: '10',
                border: 0,
                layout: 'hbox',
    items: [{
        xtype:'datefield',
        fieldLabel: 'Date',
        name: 'dt_Date',
        id: 'dt_Date',
        allowBlank: false
    },{html:'<input type="button" id="btn_Get" name="btn_Get" Value="Get"/>'}],
    renderTo: 'DivDates'
});

Monday, 21 April 2014

Adding a new row to the current row using jquery

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            var dbtobj = [{
                "text": "Option-A",
                "value": "1"
            }, {
                "text": "Option-B",
                "value": "2"
            }, {
                "text": "Option-C",
                "value": "3"
            }];
            var dbtobject = [{
                "text": "Debit-A",
                "value": "1",
                "type": "noneditable"
            }, {
                "text": "Debit-B",
                "value": "2",
                "type": "text"
            }, {
                "text": "Debit-C",
                "value": "3",
                "type": "noneditable"
            }];

            var crdobject = [{
                "text": "Credit-A",
                "value": "1",
                "type": "combo"
            }, {
                "text": "Credit-B",
                "value": "2",
                "type": "noneditable"
            }, {
                "text": "Credit-C",
                "value": "3",
                "type": "text"
            }];
            var tablearraydata = [{
                "Id": "01",
                "AccType": "Debit-B",
                "TaxType": "",
                "Amount": "120",
                "Dbt": "120",
                "Crd": "",
                "CCost": "",
                "Emp": "emp",
                "Remarks": "abc"
            }, {
                "Id": "02",
                "AccType": "Credit-C",
                "TaxType": "abc",
                "Amount": "120",
                "Dbt": "",
                "Crd": "120",
                "CCost": "cc",
                "Emp": "emp",
                "Remarks": "abc"
            }];
            //append the data to the table
            for (var i = 0; i < 2; i++) {
                //    $("#arraytable tbody").append("<tr><td><select class='acctype' id='acc_type" + i + "'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
            }

            //filling the debit combo
            $(".acctype_Dbt").each(function () {
                // var select = '';
                for (index in dbtobject) {
                    $(this).append('<option value=' + dbtobject[index].value + ' type=' + dbtobject[index].type + '>' + dbtobject[index].text + '</option>');
                    // (select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
                }

            });
            /*
           //filling the debit combo
            $(".acctype_Dbt").each(function () {
                var select = document.getElementById("acc_Dbttype0");
                for (index in dbtobject) {
                    (select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
                }

            });*/

            //filling the credit combo
            $(".acctype_Crd").each(function () {
                var select = document.getElementById("acc_Crdtype");
                for (index in crdobject) {
                    (select.options[select.options.length] = new Option(crdobject[index].text, crdobject[index].value)).setAttribute("type", crdobject[index].type);
                }

            });

            //setting the arrary value to the combo on load
            // for (var i = 0; i < myobject.length; i++) {
            //    $("#rec_mode" + i + " option[value='" + myobject[i].value + "']").attr("selected", "selected");
            // }
            //onload filling the second col based on Debit combo type
            $(".acctype_Dbt").each(function (i) {
                if ($('option:selected', this).attr('type') == 'noneditable') {
                    $(this).closest('tr').find('.dbt_second').html("");
                    //$(this).closest('tr').find('.dbt_third').html("<input id='text1' class='amt' type='text'/>");
                    $(this).closest('tr').find('.dbt_third').html("<a href='#'>link</a>");
                }
                //else if ($('option:selected', this).attr('type') == 'combo')
                //    $(this).closest('tr').find('.dbt_second').html("<select class='col2' id='col2_type'>");
                else
                    $(this).closest('tr').find('.dbt_second').html("<input id='text1' class='amt' type='" + $('option:selected', this).attr('type') + "'/>");
            });
            //onload filling the second col based on Credit combo type
            $(".acctype_Crd").each(function (i) {
                if ($('option:selected', this).attr('type') == 'noneditable') {
                    $(this).closest('tr').find('.crd_second').html("");
                    $(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
                } else if ($('option:selected', this).attr('type') == 'combo') {
                    $(this).closest('tr').find('.crd_second').html("<select class='col2' id='col2_type'>");
                    $(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
                } else {
                    $(this).closest('tr').find('.crd_second').html("<input id='text1' class='amt' type='" + $('option:selected', this).attr('type') + "'/>");
                    $(this).closest('tr').find('.crd_third').html("<input id='text1' class='amt' type='text'/>");
                }
            });
            //onchange filling the second col based on Debit combo type
            OriginalContent = '';
            $(".acctype_Dbt").live('change', function () {
               // alert('hai');
                // OriginalContent = $(this).closest('tr').find('.dbt_second').text();
                if ($('option:selected', this).attr('type') == 'noneditable') {
               //alert('fdfd');
                    $(this).closest('tr').find('.dbt_second').html("");
                    $(this).closest('tr').find('.dbt_third').html("<a href='#'>link</a>");
                } else if ($('option:selected', this).attr('type') == 'combo') {
                    $(this).closest('tr').find('.dbt_second').html("<select class='col2' id='col2_type'>");
                } else {
               //alert('dfg');
                    $(this).closest('tr').find('.dbt_third').html("<input id='text1' class='amt' type='text'/>");
                   }
                //$(this).closest('tr').find('.dbt_second').html("<input value='" + OriginalContent + "' type='" + $('option:selected', this).attr('type') + "'/>");
            });

            //onchange filling the second col based on credit combo type
            OriginalContent = '';
            $(".acctype_Crd").change(function () {
                // OriginalContent = $(this).closest('tr').find('.dbt_second').text();
                if ($('option:selected', this).attr('type') == 'noneditable')
                    $(this).closest('tr').find('.crd_second').html("");
                else if ($('option:selected', this).attr('type') == 'combo') {
                    $(this).closest('tr').find('.crd_second').html("<select class='col2' id='col2_type'>");
                    //filling the col2 combo
                    $(".col2").each(function () {
                        var select = document.getElementById("col2_type");
                        for (index in dbtobj) {
                            (select.options[select.options.length] = new Option(dbtobj[index].text, dbtobj[index].value));
                        }

                    });
                } else
                    $(this).closest('tr').find('.crd_second').html("<input value='" + OriginalContent + "' type='" + $('option:selected', this).attr('type') + "'/>");
            });

            //filling the col2 combo
            $(".col2").each(function () {
                var select = document.getElementById("col2_type");
                for (index in dbtobj) {
                    (select.options[select.options.length] = new Option(dbtobj[index].text, dbtobj[index].value));
                }

            });

            var amount = 0;
           $('tr td').live('keydown', function (e) {
                //alert($(this).hasClass('last'));
                if ($(this).find('input').hasClass('amt'))
                    amount = $(this).find('input').val();
                   if (e.keyCode === 9 && $(this).find('input').hasClass('last') && amount > 0 && !e.shiftKey) {
                    var html = '<tr>';
                   //alert($(this).parent().next().children().find('amt').val());
                   alert($(this).parent().next().children().find('select').attr('id'));
                    /*$(this).parent().children().each(function () {
                                    if($(this).hasClass('dbt_four')){
                                      html +='debit';
                                      }else if($(this).hasClass('crd_four')){
                                      html +='Credit';
                                      }else{
                                      html +=$(this).html();
                                      }
                       });*/
                    html += $(this).parent().html();

                    html += '</tr>';
                    $(this).parent().after(html);
                   $(this).parent().next().find('.dbt_third').html('<a href="#">Link</a>');
                   $(this).parent().next().find('.dbt_four').html('Debit');
                }
            });


            /*       var count=0;
           $('tr td').live('keydown',function(e) {
   if (e.keyCode === 9 && $(this).find('input').hasClass('dbtlast') ) {
   alert(++count);
$curRow = $(this).closest('tbody tr');
            //$newRow = $curRow.clone();
            $curRow.after('<tr><td><select class="acctype_Dbt" id="acc_Dbttype'+count+'"></td><td class="dbt_second"></td><td class="dbt_third"></td><td class="dbt_four">Debit</td><td></td><td><a href="#">cc</a></td><td><a href="#">emp</a></td><td><input class="dbtlast" type="text"/></td></tr>');
           $(".acctype_Dbt").each(function () {
                var select = document.getElementById("acc_Dbttype"+count);
                for (index in dbtobject) {
                    (select.options[select.options.length] = new Option(dbtobject[index].text, dbtobject[index].value)).setAttribute("type", dbtobject[index].type);
                }

            });
}
});
            $('tr td').live('keydown', function (e) {
                if (e.keyCode === 9 && $(this).find('input').hasClass('crdlast')) {
                    $curRow = $(this).closest('tbody tr');
                    $newRow = $curRow.clone();
                    $curRow.after($newRow);
                }
            });*/
            //alert($('option:selected', $(".acctype_Dbt")).attr('type'));
            //to get the total of debit col
            $(".dbt_third").live('change', function () {
                $(this).parent().find('.dbt_four').html($(this).find('input').val());
               totdbt = 0;
               $(".dbt_four").each(function(){
               if (parseInt($(this).text()) > 0) {
                    totdbt += parseInt($(this).text());
                }
               });
               $('.totdbt').html(totdbt);
            });
           //to get the total of credit col
            $(".crd_third").live('change', function () {
                $(this).parent().find('.crd_four').html($(this).find('input').val());
               totcrd = 0;
               $(".crd_four").each(function(){
               if (parseInt($(this).text()) > 0) {
                    totcrd += parseInt($(this).text());
                }
               });
               $('.totcrd').html(totcrd);
            });

            tot = 0;
            $('.amt').each(function () {
                if ($(this).val() > 0) {
                    tot += parseInt($(this).val());
                }
            });
            //alert(tot);
            $('.totamt').html(tot);

            $('.amt').live('change', function () {
                $(this).each(function () {
                    if ($(this).val() > 0) {
                        tot += parseInt($(this).val());
                    }

                });
                //alert($(".dbt_third").parent().find('.dbt_four').text());
                //alert(tot);
                $('.totamt').text(tot);
            });
        });
    </script>

    <body>
        <table border="1" id="arraytable">
            <thead>
                <th>Account Type</th>
                <th>Tax Type</th>
                <th>Amount</th>
                <th>Debit</th>
                <th>Credit</th>
                <th>CostCenter</th>
                <th>Employee</th>
                <th>Remarks</th>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select class="acctype_Dbt" id="acc_Dbttype0">
                    </td>
                    <td class="dbt_second"></td>
                    <td class="dbt_third"></td>
                    <td class="dbt_four">Debit</td>
                    <td></td>
                    <td><a href="#">cc</a>
                    </td>
                    <td><a href="#">emp</a>
                    </td>
                    <td>
                        <input class="last" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <select class="acctype_Crd" id="acc_Crdtype">
                    </td>
                    <td class="crd_second"></td>
                    <td class="crd_third"></td>
                    <td></td>
                    <td class="crd_four">Credit</td>
                    <td><a href="#">cc</a>
                    </td>
                    <td><a href="#">emp</a>
                    </td>
                    <td>
                        <input class="last" type="text" />
                    </td>
                </tr>
            </tbody>
            <tfoot>
           <tr>
                    <td>Other Payables A/c</td>
                    <td></td>
                    <td class="totamt">
                    </td>
                    <td>
                    </td>
                    <td class="totcrd"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>
                   Total
                    </td>
                    <td class="totdbt">
                    </td>
                    <td class="totcrd"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>

    </body>

</html>

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() {

}
});

Pages

Monday, 12 May 2014

placing html button with in the extjs form panel

Monday, 21 April 2014

Adding a new row to the current row using jquery

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