|
|
|
Wednesday, 19 July 2017
Tech Talk: Learn How to Build Responsive React Apps with ExtReact
Thursday, 18 May 2017
Sencha Test 2.1 GA
|
|
Thursday, 11 May 2017
Ext JS 6.5 GA, Progressive Web Apps, Sencha Test Futures, and Ext JS Tips
|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
|
|---|
Thursday, 4 May 2017
Learn best practices from XH.IO for building beautiful, data-intensive web apps using Ext JS
|
|
|
Jon Jarboe, Technical Marketing Manager, SenchaMonday, 17 April 2017
Hyderabad Global Azure Bootcamp 2017
Hyderabad Global Azure Bootcamp 2017
By Microsoft User Group Hyderabad
Event to be held at the following time, date, and location:
Saturday, April 22, 2017 from 9:00 AM to 4:30 PM (IST)
Microsoft India Development Center Building 3, MPR Halls 1, 2 & 3 Gachibowli Hyderabad 500081 India
DESCRIPTION
Wednesday, 29 March 2017
Extjs - Loading Json data in Combo
In this post i am going to explain about the loading of the Jsoin data in combo Box.
Ext.onReady(function () {
var JsonData = {
'items': [{
'name': 'Lisa',
"id": "111"
}, {
'name': 'Bart',
"id": "222"
}, {
'name': 'Homer',
"id": "555"
}]
};
var colors = new Ext.data.JsonStore({
root: 'items',
id: "colors",
fields: ['id', 'name']
});
colors.loadData(JsonData);
var entitySearchForm = new Ext.form.FormPanel({
title: "Form loading with Json data",
width: 425,
frame: true,
items: [{
xtype: 'combo',
fieldLabel: 'Role Selection',
id: 'role',
hiddenName: 'role',
hiddenValue: 1,
editable: false,
emptyText: 'Please select a role',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
displayField: 'name',
valueField: 'id',
store: colors
}]
});
var entitySearchWindow = new Ext.Window({
layout: 'anchor',
closable: true,
resizable: false,
draggable: false,
modal: true,
items: [entitySearchForm]
});
entitySearchWindow.show();
});
Ext.onReady(function () {
var JsonData = {
'items': [{
'name': 'Lisa',
"id": "111"
}, {
'name': 'Bart',
"id": "222"
}, {
'name': 'Homer',
"id": "555"
}]
};
var colors = new Ext.data.JsonStore({
root: 'items',
id: "colors",
fields: ['id', 'name']
});
colors.loadData(JsonData);
var entitySearchForm = new Ext.form.FormPanel({
title: "Form loading with Json data",
width: 425,
frame: true,
items: [{
xtype: 'combo',
fieldLabel: 'Role Selection',
id: 'role',
hiddenName: 'role',
hiddenValue: 1,
editable: false,
emptyText: 'Please select a role',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
displayField: 'name',
valueField: 'id',
store: colors
}]
});
var entitySearchWindow = new Ext.Window({
layout: 'anchor',
closable: true,
resizable: false,
draggable: false,
modal: true,
items: [entitySearchForm]
});
entitySearchWindow.show();
});
Sunday, 26 March 2017
Extjs loading FormPanel using Json Data
In this post i will explain about the loading the form with Json data. Form panel having some fields like 3 textboxes on click of the button i will load the data.
Same time on click of clear button we can remove all text boxes values. The following example will show you how to do this.
Result:
Code:
Ext.onReady(function () {
var entitySearchForm = new Ext.form.FormPanel({
title: "Form loading with Json data",
width: 425,
frame: true,
items: [{
xtype: 'textfield',
fieldLabel:'Name',
allowBlank: false,
name: 'name'
}, {
xtype: 'textfield',
allowBlank: false,
fieldLabel:'Location',
name: 'location'
}, {
xtype: 'textfield',
allowBlank: false,
fieldLabel:'Department',
name: 'department'
}],
buttons: [{
text: "Load Data",
listeners: {
click: onbtnClick
}
}, {
text: 'Clear',
listeners: {
click: onbtnClearClick
}
}]
});
var entitySearchWindow = new Ext.Window({
layout: 'anchor',
closable: true,
resizable: false,
draggable: false,
modal: true,
items: [entitySearchForm]
});
//Preparing the Json Data
var record = {
data: {
name: 'Harikrishna',
location: 'India',
department: 'IT'
}
};
function onbtnClick() {
entitySearchForm.getForm().loadRecord(record);
}
function onbtnClearClick() {
entitySearchForm.getForm().reset();
}
entitySearchWindow.show();
});
Same time on click of clear button we can remove all text boxes values. The following example will show you how to do this.
Result:
Code:
Ext.onReady(function () {
var entitySearchForm = new Ext.form.FormPanel({
title: "Form loading with Json data",
width: 425,
frame: true,
items: [{
xtype: 'textfield',
fieldLabel:'Name',
allowBlank: false,
name: 'name'
}, {
xtype: 'textfield',
allowBlank: false,
fieldLabel:'Location',
name: 'location'
}, {
xtype: 'textfield',
allowBlank: false,
fieldLabel:'Department',
name: 'department'
}],
buttons: [{
text: "Load Data",
listeners: {
click: onbtnClick
}
}, {
text: 'Clear',
listeners: {
click: onbtnClearClick
}
}]
});
var entitySearchWindow = new Ext.Window({
layout: 'anchor',
closable: true,
resizable: false,
draggable: false,
modal: true,
items: [entitySearchForm]
});
//Preparing the Json Data
var record = {
data: {
name: 'Harikrishna',
location: 'India',
department: 'IT'
}
};
function onbtnClick() {
entitySearchForm.getForm().loadRecord(record);
}
function onbtnClearClick() {
entitySearchForm.getForm().reset();
}
entitySearchWindow.show();
});
EXTJS3 JSON GRID
In last posts i explained about the Array grid and grouping grid. Now i will explain about the Json Grid.
Ext.onReady(function () {
var Grid1Store = new Ext.data.JsonStore({
root: 'users',
fields: ['id', 'name', 'email'],
//autoLoad: true,
data: {
users: [{
"id": 1,
"name": "John Smith",
"email": "jsmith@example.com"
}, {
"id": 2,
"name": "Anna Smith",
"email": "asmith@example.com"
}, {
"id": 3,
"name": "Peter Smith",
"email": "psmith@example.com"
}, {
"id": 4,
"name": "Tom Smith",
"email": "tsmith@example.com"
}, {
"id": 5,
"name": "Andy Smith",
"email": "asmith@example.com"
}, {
"id": 6,
"name": "Nick Smith",
"email": "nsmith@example.com"
}]
}
});
var onReadyFunction = function () {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Database',
width: 500,
height: 300,
store: Grid1Store,
columns: [{
header: "Id",
dataIndex: 'id'
}, {
header: "Name",
dataIndex: 'name'
}, {
header: "Email",
dataIndex: 'email'
}]
});
}
Ext.onReady(onReadyFunction);
});
Ext.onReady(function () {
var Grid1Store = new Ext.data.JsonStore({
root: 'users',
fields: ['id', 'name', 'email'],
//autoLoad: true,
data: {
users: [{
"id": 1,
"name": "John Smith",
"email": "jsmith@example.com"
}, {
"id": 2,
"name": "Anna Smith",
"email": "asmith@example.com"
}, {
"id": 3,
"name": "Peter Smith",
"email": "psmith@example.com"
}, {
"id": 4,
"name": "Tom Smith",
"email": "tsmith@example.com"
}, {
"id": 5,
"name": "Andy Smith",
"email": "asmith@example.com"
}, {
"id": 6,
"name": "Nick Smith",
"email": "nsmith@example.com"
}]
}
});
var onReadyFunction = function () {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Database',
width: 500,
height: 300,
store: Grid1Store,
columns: [{
header: "Id",
dataIndex: 'id'
}, {
header: "Name",
dataIndex: 'name'
}, {
header: "Email",
dataIndex: 'email'
}]
});
}
Ext.onReady(onReadyFunction);
});
Subscribe to:
Posts (Atom)