ExtJS grid store filter

using a combobox to filter a grid in extjs

window.onload = function() {

var accModel = Ext.create('Ext.data.Model', {
fields: ['accCode', 'name', 'type', 'amount']
});

var store = Ext.create('Ext.data.Store', {
alias: 'store.accStore',
model: accModel,
proxy: {
type: 'ajax',
url: '/accounts.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

var accGrid = Ext.create('Ext.grid.Panel', {
header: {
hidden: true
},
store: store,
layout: 'fit',
columns: [{
text: "Account Code",
dataIndex: 'accCode'
},
{
text: "Name",
dataIndex: 'name'
},
{
text: "Type",
sortable: false,
dataIndex: 'type'
},
{
text: "Amount",
align: 'right',
sortable: false,
dataIndex: 'amount'
}
],
columnLines: true,
width: 600,
height: 300
});

var accCodesStore = Ext.create('Ext.data.Store', {
fields: ['accCode', 'abbr'],
proxy: {
type: 'ajax',
url: '/accCodes.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

var cBox = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Account',
store: accCodesStore,
queryMode: 'local',
displayField: 'accCode',
valueField: 'abbr',
forceSelection: true,
listeners: {
change: function (field, newValue, oldValue) {
//console.log(newValue);
accGrid.getStore().clearFilter();
accGrid.getStore().filter('accCode', newValue);
},
scope: this
}
});

Ext.onReady(function() {

Ext.create('Ext.panel.Panel', {
title: 'Account details',
width: 600,
height: 450,
items: [cBox, accGrid],
renderTo: Ext.getBody()
});

});
}


//accounts.json
[
  {
    "accCode": "003",
    "name": "satya",
    "type": "savings",
    "amount": 10000
  },
  {
    "accCode": "003",
    "name": "Abhinaw",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "003",
    "name": "Vishal",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Malvika",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Sakshi",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Kshitij",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Palash",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Supal",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Ramesh",
    "type": "current",
    "amount": 100000
  }
]


//accCodes.json
[
  {
    "accCode": "003",
    "abbr": "003"
  },
  {
    "accCode": "004",
    "abbr": "004"
  },
  {
    "accCode": "005",
    "abbr": "005"
  }
]

ExtJS 5.0.1

Advertisements

Creating a simple server locally

If you are using ajax calls in javascript, it won’t work locally as browsers restrict xmlhttp calls.

Work around for this is to install node js locally and create a simple http server in any particular folder.

Once node is being installed, open node command prompt.

Locate to the folder and

Type
`npm install -g http-server`

This will create the server in your local folder

Then to start the server type
`http-server`

You can terminate it any time by ctrl+c

Starting ExtJs sample

This is my first ExtJs sample. in this I am going to explain about how to start a sample in ExtJs.

first download the ExtJs library files

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/crisp/resources/sencha-charts-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/ext-theme-crisp.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/sencha-charts-debug.js

Include them into the html file.

create a script block in html like below

 


      lessThan script type="text/javascript" greaterThan //<![CDATA[
         window.onload=function(){ }  //]] greaterThan 
         
      lessThan /script greaterThan

Now let’s create a simple grid with some JSON data inside window.onload function,

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

This is going to be our model. In ExtJs a model is the JSON structure not the actual data. The model is a part of Ext.data Object. And it has fields which is an Array. Each field can be a simple name or you can define the type as well for the field like below

fields: [  { name: ‘id’, type: ‘int’ }  ]

Now time to create the actual JSON data. ExtJs holds the actual data in Store Object. Store takes at least two parameters model and data.

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Let’s render the data into a grid container.

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

What is permanent in this world?

The only permanent thing in this world is change. Except this nothing else is permanent.

Change starts from day one in one’s life. It is with you for ever.

Some changes are good. Some are bad.
But it depends on your hard work and approach towards the change.

As per horoscope, the planetary motions affect our change in life. But what I saw is one can change the bad time into the better one by hard work and commitment. If something is bothering you a lot do put more effort into it during the difficult situations. By that you can definitely achieve some good result even in the adverse time periods.

Believe in one thing, hard work always pays off even in bad situations.

Digest cycle in angularjs

Digest cycle in angularjs is very same as any digestion process. As angularjs allows two way data binding, the change in model has to be applied to views or vice versa.

When an event is triggered which changes the model, angularjs initiates the digest cycle.

every time we bind data to view, an watcher is being initiated behind the scene to verify the changes which is similar to $watch. The digest cycle triggers the watchers which are continuously verifying the change in the model.

digest cycle runs maximum up to 10 times to compare the old value and the new value. It stops when they are same. Digest cycle starts at the $rootScope and propagates to each nested scope.

When you are using a JavaScript inbuilt function like setInterval instead of $interval to update the model then angularjs does not understand to trigger the digest cycle. That time we need to manually call the $scope.$apply() method to initiate the digest cycle.

Enumerable in JavaScript

Object.defineProperty(obj, 'answer', {
  value: 42,
  writable: true,
  enumerable: true,
  configurable: true
});

The property enumerable specifies a specific property of an object to be available for operations.

The default properties of inbuilt objects in JavaScript are not enumerable that means they can not be listed by using for in loop.

When you try to get the properties of an object, the default properties are not being listed because of enumerable false assigned to them. These properties are not listed when you try to get the properties of that object.

var o = {};
var a = [];
o.prop = 'is enumerable';
a[0] = 'is enumerable';

o.propertyIsEnumerable('prop');   // returns true
a.propertyIsEnumerable(0);        // returns true
a.propertyIsEnumerable('length');   // returns false

One can check if the property is enumerable by using propertyIsEnumerable. The length is a default property of an array object. But it is not listed when you try to get the keys/properties in an array.

How to get success as a software developer

Many times I tried to find some tips on how to get success in the software industry as a developer. I found few of them and thought to share;

  1. One should have Passion in creating something interesting which can make our life easy. With out this the world would not have come to this stage. Every development in the world in somehow related to technology and one should have passion to make something interesting.
  2. One should be dedicated to learn new things which can be implemented in real life.
  3. Sharing is caring. When you share your ideas with other similar people, you might get to accomplish something faster. Moving ahead will be easy with a team.
  4. Be excited to reach to a level and live the life with that in mind even before you have that. Then you will feel the need of it.
  5. Teach things to people, it helps you learn faster. When you teach, you know what are missing in your thinking process. People will fill in those gaps.
  6. Try to finish what is being started.
  7. Stay away from distractions.
  8. Be patient until you receive a response from prospective customers.
  9. Improve your communication skill so that you express your idea to get help.
  10. Keep doing things. Stop Never.

Array.fill method in JavaScript

We are used to create arrays with loop.

A better way to create a long array with around 10,000,000 entries is to use the fill method which is fast and reliable.

E.g.

Var a = new Array(10000000);
a.fill(“satya”);
console.log(a);

Fill can take two extra parameters as well.

a.fill(“satya”, 0, 100);
this will fill the array starting from 0th index till 100th index.