We Keep Coding

How can i create a user profile in ext.js?

I'm working on creating a user profile view in my ext.js (and sencha touch) application. I have my routes set up and I have my data model in my data.js. I also created a form to show the data in. However, I'm having issues getting the user data to render on the front end.
index.js code:
// User Profile
var userProfileToolbar = {
xtype: 'toolbar',
id: 'userProfileToolbar',
title: 'UserProfile',
style: settings_sz2,
ui: 'light',
docked: 'top',
items: gen_top_buttons
};
var userprofile_tabbar = {
xtype: 'tabbar',
id: 'userprofile_tabbar',
style: dark_tabbar_sz,
ui: 'light',
docked: 'top',
items: all_discover_buttons
};
var profileForm = {
items: [
{
xtype: 'textfield',
name : 'email',
label: 'Email',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
{
xtype: 'urlfield',
name : 'url',
label: 'Website',
labelWidth: '35%'
},
{
xtype: 'textfield',
name : 'location',
label: 'Location',
labelWidth: '35%'
},
{
xtype: 'selectfield',
name : 'defaultCollection',
label: 'Default Collection',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},
{
xtype: 'selectfield',
name : 'relationshipStatus',
label: 'Relationship Status',
labelWidth: '35%',
labelWrap:true,
options: [
{text: 'Single', value: 'single'},
{text: 'In a Relationship', value: 'inARelationship'},
{text: 'Married', value: 'married'}
]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Gender',
style: settings_sz,
hidden: false,
margin: '0',
id: 'male_female_gender',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'male_female_gender',
label: 'Male',
value: 0,
}, {
name: 'male_female_gender',
label: 'Female',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Sexual Orientation',
style: settings_sz,
hidden: false,
margin: '0',
id: 'sexual_orientation',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'sexual_orientation',
label: 'Straight',
value: 0,
}, {
name: 'sexual_orientation',
label: 'Gay',
value: 1,
},{
name: 'sexual_orientation',
label: 'Bi',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Subscription',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_email_subscription',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_email_subscription',
label: 'Enabled',
value: 0,
}, {
name: 'enable_disable_email_subscription',
label: 'Disabled',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Default Access',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_default_access',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_default_access',
label: 'Public',
value: 0,
}, {
name: 'enable_disable_default_access',
label: 'Private',
value: 1,
}, {
name: 'enable_disable_default_access',
label: 'Adult',
value: 2,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Safe Browsing',
style: settings_sz,
hidden: false,
margin: '0',
id: 'enable_disable_safe_browsing',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'enable_disable_safe_browsing',
label: 'On',
value: 0,
}, {
name: 'enable_disable_safe_browsing',
label: 'Off',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Visibility',
style: settings_sz,
hidden: false,
margin: '0',
id: 'everyone_loggedin_visibility',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'everyone_loggedin_visibility',
label: 'Everyone',
value: 0,
}, {
name: 'everyone_loggedin_visibility',
label: 'Logged In',
value: 1,
}]
},
{
xtype: 'fieldset',
pack: 'center',
title: 'Email Notification',
style: settings_sz,
hidden: false,
margin: '0',
id: 'new_share_emailnotification',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'new_share_emailnotification',
label: 'New Connection',
value: 0,
}, {
name: 'new_share_emailnotification',
label: 'Video Sharing',
value: 1,
}]
},
{
xtype: 'button',
ui: 'plain',
style: 'background-color: green; width: 90%; color: white; margin-left: 5%; margin-bottom: 15px; margin-top: 15px',
id: 'save',
text: 'Save Changes'
},
{
xtype: 'button',
style: 'width: 90%; margin-left: 5%; margin-bottom: 15px;',
id: 'cancel',
text: 'Cancel',
},
],
listeners: {
itemtap: {
fn: function(view, index, target, record, event) {
var user_id = record.get('user_id');
setTimeout(function() {
Ext.getCmp('userprofile_recommendations_var').deselectAll();
}, 500);
}
}
}
};
Ext.define('myVidster.view.UserProfile', {
extend: 'Ext.Panel',
id: 'UserProfile',
fields: [
'email',
{name: 'disp_name', type: 'string', value: 'account.get("disp_name")'},
],
alias: 'widget.UserProfile',
config: {
scrollable: {
direction: 'vertical',
directionLock: true,
},
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [userProfileToolbar, profileForm,]
},
listeners: {
load: function(users) {
var profileForm = Ext.getCmp('UserProfile');
profileForm.loadRecord(this.data.first());
}
}
});
Data.js:
//User Profile Data
Ext.define('userprofile_model', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'user_id',
type: 'string'
}, {
name: 'disp_name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'phone_number',
type: 'string'
}, {
name: 'pw',
type: 'string'
}, {
name: 'family_filter',
type: 'string'
}, {
name: 'v_orientation_chk',
type: 'string'
}, {
name: 'anc1',
type: 'int'
}, {
name: 'current_video',
type: 'int'
}, {
name: 'current_video_type',
type: 'string'
}, {
name: 'video_history',
type: 'auto'
}, {
name: 'video_history_chk',
type: 'string'
}, {
name: 'HTML5_only',
type: 'string'
}, {
name: 'filter_by',
type: 'string'
}, {
name: 'unlock',
type: 'int'
}],
proxy: {
type: 'localstorage',
id: 'UserProfile'
}
}
});
var userprofile_obj = Ext.create("Ext.data.Store", {
model: 'userprofile_model',
pageSize: 9,
proxy: {
type: 'jsonp',
url: "http://api.example.com/mobile_json2.php",
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
},
extraParams: {
last_id: '0'
},
},
autoLoad: false,
listeners: {
load: function(store) {
var tmp = store.first();
var tmp2 = store.getData();
Ext.getCmp('userprofile_recommendations_var').setItemTpl(discover_recommendations_listTpl)
}
}
});
The issue comes when I try to pre populate the field with data.
For instance:
{
xtype: 'textfield',
name : 'disp_name',
label: 'Display Name',
labelWidth: '35%',
value: account.get('disp_name'),
listeners: {
check: {
fn: function() {
account.get('disp_name');
account.set("disp_name", disp_name);
account.setDirty();
store.sync();
}
}
}
},
Does not return the display name.

jqxGrid button format

I wish to use the cellsrender to render my own button using something like the following code:
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'Name', datafield: 'firstname', width: 120 },
{ text: 'Last Name', datafield: 'lastname', width: 120 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' },
{
text: 'Edit', width: 100, height: '100%', datafield: 'Name', columntype: 'button',
cellsrenderer: function (cellvalue, options, rowObject) {
return '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="">Edit</button>';
},
buttonclick: function (row) {
var data = $('#jqxgrid').jqxGrid('getrowdata', row);
alert(data.firstname);
}
}
]
});
As you can see I am trying to render a button in the cellsrender so that I can make a modal form appear.

You can't use a cellsrenderer like that with the button columntype and buttonclick handler. You can only return the text to be displayed in the button.
Your cellsrenderer would look like the following:
cellsrenderer: function() {
return 'Edit';
}
As far as including your bindings to make the modal work, you'll have to do it another way

How to show color picker in grid cell?

I try to show colorpicker in grid cell. But i can't do it correct. It must look like show/hide panel whith colorpiker and save piked color in grid cell.
I try to use several controls. But allways have problems. Please explain to do it right way.
Now it's look like this:
and the code:
{
xtype: "widgetcolumn",
dataIndex: "color",
text: "Color",
width: 60,
widget: {
xtype: 'colorpicker',
align: 'right',
value: '993300',
},
listeners: {
select: function(picker, selColor) {
value = selColor,
hide(this);
}
}
}

show color picker in grid cell.double click on grid row then select menu bar color and click on update plugin color show on grid row.code check in js fiddler
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'colorCode' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com'},
{ name: 'Bart', email: 'bart#simpsons.com'},
{ name: 'Homer', email: 'homer#simpsons.com'},
{ name: 'Marge', email: 'marge#simpsons.com'},
{ name: 'Homer', email: 'homer#simpsons.com' },
{ name: 'Marge', email: 'marge#simpsons.com'},
]
});
var customColors = ['FF4848', 'FF7575', 'FFA8A8', 'FFBBBB', 'FFCECE', 'FFECEC', 'FF68DD', 'FF86E3', 'FFACEC', 'FFC8F2', 'FF62B0', 'FF73B9', 'FF86C2', 'FFA8D3',
'E469FE', 'EA8DFE', 'EFA9FE', 'D568FD', 'D97BFD', 'DD88FD', 'E7A9FE', '9669FE', 'A27AFE', 'C4ABFE', 'D0BCFE', 'DDCEFF', 'FFA4FF', 'EAA6EA', 'D698FE', 'CEA8F4',
'BCB4F3', 'A9C5EB', '8CD1E6', 'FFBBFF', 'EEBBEE', 'DFB0FF', 'DBBFF7', 'CBC5F5', 'BAD0EF', 'A5DBEB', 'FFCEFF', 'F0C4F0', 'E8C6FF', 'E1CAF9', 'D7D1F8', 'CEDEF4',
'B8E2EF', '62A9FF', '62D0FF', '06DCFB', '01FCEF', '03EBA6', '01F33E', '99E0FF', '63E9FC', '74FEF8', '62FDCE', '72FE95', 'C0F7FE', 'CEFFFD', 'BEFEEB', 'CAFFD8',
'1FCB4A', '59955C', '48FB0D', '2DC800', '59DF00', '9D9D00', 'B6BA18', 'DFDF00', 'DFE32D', '93EEAA', 'A6CAA9', 'AAFD8E', '6FFF44', 'ABFF73', 'FFFF84', 'E7F3F1',
'EEF093', 'BDF4CB', 'C9DECB', 'CAFEB8', 'A5FF8A', 'D1FFB3', 'FFFFB5', 'F5F7C4', 'BABA21', 'C8B400', 'DFA800', 'DB9900', 'FFB428', 'FF9331', 'FF800D', 'D8F0F8',
'E6E671', 'E6CE00', 'FFCB2F', 'FFB60B', 'FFC65B', 'FFAB60', 'FFAC62', 'F7DE00', 'FFD34F', 'FFBE28', 'FFCE73', 'FFBB7D', 'FFBD82', 'EEEECE', 'EADFBF', 'E4C6A7',
'E6C5B9', 'DEB19E', 'E8CCBF', 'DDB9B9', 'E1E1A8', 'DECF9C', 'DAAF85', 'DAA794', 'CF8D72', 'DAAC96', 'D1A0A0', 'FF8E8E', 'E994AB', 'FF7DFF', 'D881ED', 'B7B7FF',
'A6DEEE', 'CFE7E2', 'FFC8C8', 'F4CAD6', 'FFA8FF', 'EFCDF8', 'C6C6FF', 'C0E7F3', 'DCEDEA', 'FFEAEA', 'F8DAE2', 'FFC4FF', 'EFCDF8', 'DBDBFF'];
Ext.create('Ext.window.Window', {
height: 400,
width: 350,
xtype: 'panel',
layout: 'fit',
items:
[
{
layout: 'border',
height: 200,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'grid',
// height: 300,
region: 'center',
id: 'GridId',
store: userStore,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name',
editor: {
xtype: 'textfield'
}
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
editor: {
xtype: 'textfield',
}
},
{
header: 'Color',
dataIndex: 'colorCode',
width: '20%',
renderer: function (value, metaData) {
metaData.tdAttr = 'bgcolor=' + value;
return value;
},
editor: {
xtype: 'button',
text: 'Color Menu',
menu: new Ext.menu.ColorPicker({
resizable: true,
scrollable: true,
listeners: {
select: function (metaData, value) {
metaData.up('grid').getSelection()[0].dirty = true;
metaData.up('grid').getSelectionModel().getSelection()[0].data.colorCode = value;
}
}
}),
listeners: {
render: function (metaData, value) {
metaData.down('colorpicker').colors = [];
metaData.down('colorpicker').value = metaData.ownerCt.context.grid.getSelectionModel().getSelection()[0].data.colorCode;
for (var i = 0; i < customColors.length; i++) {
metaData.down('colorpicker').colors.push(customColors[i]);
}
metaData.down('colorpicker').updateLayout();
}
}
}
},
],
selModel: 'rowmodel',
plugins: {
ptype: 'rowediting',
clicksToEdit: 2
},
}
]
}]
}).show();
});

Setting the Editable property of a column in JQXgrid

JS: http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
I am trying to learn JQXgrid and this is my JS file. in this whole grid is set to editable: true flag but i want a particular field to be non-editable.
In reference to the forum-post by jqwidget team member http://www.jqwidgets.com/community/topic/making-a-column-non-editable/#post-11055
i tried this:
JS: http://jsfiddle.net/tzHXR/89/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
editable:false; // Editable Property Set to false
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
but after this , it doesn't work at all. all it shows is blank. i tried on my machine too.
why does editable:false for a column makes it worse. how can i apply non-editable property to one exact column.

The reason is that you should remove ";" after editable: false in your jQWidgets Grid's column definition. That is a syntax error.

Bind Ext form data into GridPanel in ExtJS

I had created a demo page using ExtJS for the first time.
I have created the .JS file as below.
Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'userForm',
frame: true,
title: 'User Details',
bodyPadding: '5 5 0',
align: 'center',
width: 350,
buttonAlign: 'center',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
id: 'txtName',
fieldLabel: 'Name',
name: 'name',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'dDOJ',
fieldLabel: 'Date Of Joining',
name: 'doj',
xtype: 'datefield',
format: 'd/m/Y',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'txtAge',
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'chkActive',
xtype: 'checkbox',
boxLabel: 'Active',
name: 'cb'
}],
buttons: [{
text: 'ADD',
listeners: {
click: {
fn: function() {
debugger;
if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
alert("Please Enter All Required Details!");
return false;
}
var reply = confirm("Are You Sure You Want To Save?")
if (reply != false) {
fnShowGrid();
}
}
}
}
}]
});
simple.render(document.body);
});
function fnShowGrid() {
debugger;
var vName = Ext.getCmp('txtName').getValue();
var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
var vAge = Ext.getCmp('txtAge').getValue();
var vIsActive = "InActive";
if (Ext.getCmp('chkActive').getValue() == true) {
vIsActive = "Active";
}
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
idIndex: 0,
fields: [
{ name: 'name' },
{ name: 'doj' },
{ name: 'age' },
{ name: 'active' }
],
//data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
data: [[vName, vDOJ, vAge, vIsActive]]
});
store.load({
params: {
start: 1,
limit: 3
}
});
Ext.create('Ext.grid.Panel', {
title: 'User Details',
store: store,
columns: [
{
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: 'Date Of Join',
width: 75,
sortable: true,
dataIndex: 'doj'
},
{
header: 'Age',
width: 75,
sortable: true,
dataIndex: 'age'
},
{
header: 'Active',
width: 75,
sortable: true,
dataIndex: 'active'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
//detailsGrid.render(document.body);
}
The gridPanel is being displayed. But each time add a new data its creating a new grid!
I want to display GridPanel only once including all before added data.
Here's fiddle: http://jsfiddle.net/pratikhsoni/wc9mD/1/

Here is the working example based on your fiddle!
Ext.require([
'*'
]);
store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
idIndex: 0,
fields: [
{ name: 'name' },
{ name: 'doj' },
{ name: 'age' },
{ name: 'active' }
],
//data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
});
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'userForm',
frame: true,
title: 'User Details',
bodyPadding: '5 5 0',
align: 'center',
width: 350,
buttonAlign: 'center',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
id: 'txtName',
fieldLabel: 'Name',
name: 'name',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'dDOJ',
fieldLabel: 'Date Of Joining',
name: 'doj',
xtype: 'datefield',
format: 'd/m/Y',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'txtAge',
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'chkActive',
xtype: 'checkbox',
boxLabel: 'Active',
name: 'cb'
}],
buttons: [{
text: 'ADD',
listeners: {
click: {
fn: function() {
debugger;
if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
alert("Please Enter All Required Details!");
return false;
}
var reply = confirm("Are You Sure You Want To Save?")
if (reply != false) {
fnShowGrid();
}
}
}
}
}]
});
simple.render(document.body);
});
function fnShowGrid() {
debugger;
var vName = Ext.getCmp('txtName').getValue();
var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
var vAge = Ext.getCmp('txtAge').getValue();
var vIsActive = "InActive";
if (Ext.getCmp('chkActive').getValue() == true) {
vIsActive = "Active";
}
if (!Ext.getCmp('sample-grid')) {
store.add({
name: vName,
doj: vDOJ,
age: vAge,
active: vIsActive
});
Ext.create('Ext.grid.Panel', {
title: 'User Details',
store: store,
id: 'sample-grid',
columns: [
{
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: 'Date Of Join',
width: 75,
sortable: true,
dataIndex: 'doj'
},
{
header: 'Age',
width: 75,
sortable: true,
dataIndex: 'age'
},
{
header: 'Active',
width: 75,
sortable: true,
dataIndex: 'active'
}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
} else {
store.add({
name: vName,
doj: vDOJ,
age: vAge,
active: vIsActive
});
}
}

First of All.
Its very good to see you getting touch with EXT js. Mistake's i will like to highlight in your code.
1. if (reply != false) {
fnShowGrid();
}
In this you are calling your grid to be created which is being called why you are creating a new grid . you just have to update the store.
Approach: You must call it only once check if it exist and if yes then update the store like this.
if (reply != false) {
if(!Ext.getCmp('hello')) {
fnShowGrid();
} else {
var store=Ext.getCmp('hello').getStore();
store.add ({
name: 'sadad',
doj:'25/01/2015',
age:'26',
active:'false'
});
store.reload();
}
}
So in all you have to update the store add the new records. I have hardcoded right now you can get the values as you have got when creating it.
Please find Updated fiddle.
Fiddle