how to write data to a json file - php

I have data that is coming from a form that should be submitted to a database. I need to know how I can write this same information I have submitted in my Ajax request to a file. I have a json writer attached to my store. Basically I just need to flush this data into a file. The database is on the server side, this would be a server side operation. How can I do this?
Here is the store
Ext.define('ClientInfo.store.LicenseStore', {
extend: 'Ext.data.Store',
requires: [
'ClientInfo.model.LicenseModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.writer.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LicenseStore',
autoLoad: true,
autoSync: true,
model: 'ClientInfo.model.LicenseModel',
proxy: {
type: 'ajax',
extraParams: {
class: 'License',
method: 'get'
},
url: 'system/index.php',
reader: {
type: 'json',
rootProperty: 'topics'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
rootProperty: 'topics'
}
}
}, cfg)]);
}
});
and here is current ajax request
var productstore = Ext.getStore('ProductStore');
var win = Ext.create ('Ext.window.Window' , {
title: 'License' ,
id: 'addLicenseWindow',
width: 500 ,
modal: true,
height: 300 ,
items: [
{
xtype: 'form',
bodyPadding: 10,
items: [
{
xtype: 'fieldset',
modelValidation: true,
title: 'Licence',
items: [
{
xtype: 'textfield',
anchor: '100%',
id: 'licensenumberTextField',
fieldLabel: 'Licence Number',
labelWidth: 140,
emptyText: 'Licence Number',
allowBlank: false,
blankText: 'This Field is required',
msgTarget: 'under',
},
{
xtype: 'datefield',
anchor: '100%',
id: 'startdateTextField',
fieldLabel: 'Start Date',
labelWidth: 140,
allowBlank: false,
blankText: 'This Field is required',
msgTarget: 'under'
},
{
xtype: 'datefield',
anchor: '100%',
id: 'enddateTextField',
fieldLabel: 'End Date',
labelWidth: 140,
allowBlank: false,
blankText: 'This Field is required',
msgTarget: 'under'
},
{
xtype: 'numberfield',
anchor: '100%',
id: 'durationTextField',
fieldLabel: 'Duration',
labelWidth: 140,
emptyText: 'Duration',
allowBlank: false,
blankText: 'This Field is required',
msgTarget: 'under'
},
{
xtype: 'datefield',
anchor: '100%',
id: 'expirydateTextField',
fieldLabel: 'Expiry Date',
labelWidth: 140,
allowBlank: false,
blankText: 'This Field is required',
msgTarget: 'under'
},
{
xtype: 'combobox',
fieldLabel: 'Product',
id: 'productidTextField',
valueField: 'product_id',
displayField: 'product_name',
store: productstore,
typeAhead: true,
queryMode: 'local',
minChars: 2,
renderTo: Ext.getBody()
},
{
xtype: 'combobox',
fieldLabel: 'Company',
id: 'companyidtf',
valueField: 'company_id',
displayField: 'name',
store: 'CompanyStore',
typeAhead: true,
queryMode: 'local',
minChars: 2,
renderTo: Ext.getBody()
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'button',
id: 'cancelLicenceBtn',
text: 'Cancel',
listeners: {
click: function(c){
Ext.getCmp('addLicenseWindow').close();
}
}
},
{
xtype: 'tbspacer',
flex: 1
},
{
xtype: 'button',
formBind: true,
id: 'saveLicenceBtn',
text: 'Save',
listeners: {
click: function(c){
Ext.Ajax.request({
url: 'system/index.php',
method: 'POST',
params: {
class: 'License',
method: 'add',
data: Ext.encode({
license_number: Ext.getCmp('licensenumberTextField').getValue(),
start_date: Ext.getCmp('startdateTextField').getValue(),
end_date: Ext.getCmp('enddateTextField').getValue(),
duration: Ext.getCmp('durationTextField').getValue(),
expiry_date: Ext.getCmp('expirydateTextField').getValue(),
product_id: Ext.getCmp('productidTextField').getValue(),
company_id: Ext.getCmp('companyidtf').getValue()
})
},
success: function( response ){
Ext.MessageBox.alert( 'Status', 'Record has been added.' );
Ext.getStore('LicenseStore').reload();
Ext.getStore('LicenseAllStore').reload();
Ext.getCmp( 'addLicenseWindow' ).close();
},
failure: function(){
Ext.MessageBox.alert( 'Status', 'Failed to add record.' );
}
});
}
}
}
]
}
]
}
]
});
win.show ();

Related

Extjs 4.0 Combo box for a remote query not displaying. The Drop down values show blank description

I am trying to upgrade from Extjs 3.4 to Extjs 4.0
initComponent: function() {
this.items = [{
xtype: 'fieldset',
width: 600,
bodyPadding: 40,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
format: 'm d Y',
value: '02 04 1978'
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
format: 'm d Y',
altFormats: 'm,d,Y|m.d.Y',
value: '02.04.1978'
},{
xtype: 'combobox',
hiddenName: 'status',
fieldLabel: 'Status',
store: autoCompleteStore,
queryMode: 'remote',
forceSelection:'true',
triggerAction:'all',
displayField:'displayField',
fireEventOnSetValue: false,
valueField:'valueField',
emptyText:'Select one'
}]
}]
}
Ext.define("test.Tickler",{
extend: 'Ext.data.Model',
fields: [
{name: 'f_uid', type: 'string'},
{name: 'f_description', type: 'string'},
{name: 'f_value', type: 'string'},
{name: 'f_visible', type: 'string'},
{name: 'f_order', type: 'string'},
{name: 'f_default', type: 'string'},
]
});
var autoCompleteStore = new Ext.data.JsonStore({
model: "test.Tickler",
proxy:{
type: 'ajax',
url: '../medit_2_public/fc.php?_C_A=TicklerReport.getListOfTicklerReasons',
reader: new Ext.data.JsonReader({
type: 'json',
root: 'results.rows',
metaProperty: 'metaData'
})
}
}
});
Here is my output from metadata:
[,…]
0: {f_uid: "1", f_description: "Needs Form", f_value: "1", f_visible: "Y", f_order: "1", f_default: "N"}
1: {f_uid: "3", f_description: "Call Client", f_value: "2", f_visible: "Y", f_order: "2", f_default: "N"}
When my screen renders I do see Select One in the value of the drop down for Status. When I select the Drop down I do see the loading warning and I see couple blanks after it loads.
In you combobox definition you have to set which fields from your data should be used in the combobox as value and display field. Currently you have set field names that do not exist in your model. For example setup like this:
valueField: 'f_value',
displayField: 'f_description'

Extjs Grid Paging Toolbar Shows All Data in grid

I am trying to use paging toolbar for pagination. paging toolbar working fine. But the grid loading all the data. what can i do load some part of data into grid to perform paging control on grid. please help me
//This is my code
Ext.define('modelorderdetails', {
extend: 'Ext.data.Model',
fields: [
{name: 'order_id', type: 'string'},
{name: 'order_date', type: 'string'},
{name: 'User_Type', type: 'string'},
{name: 'fname', type: 'string'},
{name: 'lname', type: 'string'},
{name: 'product_name', type: 'string'},
{name: 'quantity', type: 'string'},
{name: 'email', type: 'string'},
{name: 'telephone', type: 'string'},
{name: 'shiping_method', type: 'string'},
{name: 'shipping_charge', type: 'string'},
{name: 'total_amount', type: 'string'},
{name: 'address', type: 'string'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'postal_code', type: 'string'},
{name: 'status', type: 'string'}
]
});
var orderdetailsStore = Ext.create('Ext.data.Store',
{
model: 'modelorderdetails',
autoload: false,
pageSize: 5,
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'orderDetailsHandler.php',
reader: {
type: 'json',
model: 'modelorderdetails',
}
})
});
Ext.create('Ext.grid.Panel',
{
width: 630,
height: 400,
id: 'testgrid',
title: 'Search Results',
store: orderdetailsStore,
columns: [
{
text: "Name",
dataIndex: 'fname',
width: 200,
align: 'left',
sortable: true
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: orderdetailsStore,
dock: 'bottom',
displayInfo: true,
pageSize: 5,
displayMsg: '{0} - {1} of {2}',
emptyMsg: "No topics to display",
}]
});
//And on button click i'm trying to display records
{
xtype: 'button',
text: 'Go',
anchor: '10%',
id: 'btnGo',
handler: function() {
var userId = Ext.getCmp("User").getValue();
var cmbStatusValue = Ext.getCmp("cmbStatus").getValue();
var fromdt = Ext.util.Format.date(Ext.getCmp("fromdate").getValue(), 'Ymd');
var todt = Ext.util.Format.date(Ext.getCmp("todate").getValue(), 'Ymd');
orderdetailsStore.load({
params: {
start: 0,
limit: 5,
status: cmbStatusValue,
user: userId,
fromdate: fromdt,
todate: todt,
}
});
}
},

How to update data on Mysql using extjs4 grid update option

Hi everyone i am working on small data update section using direct grid example the problem is i am not able to update the data using the cell plugin ,i am able to do add and delete and it has direct update to db but when i edit the existing field it does not shows any error and updates on the screen and i did not see any POST response on network area or console of chrome i don't why its not happening
here are the codes please help
Ext.onReady(function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
//added model inside onready
Ext.define('PersonalInfo', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'address', 'state','st_one','st_two','st_three','st_for']
});
//separated store into unique var for guaranteeRange
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'PersonalInfo',
autoLoad: true,
proxy: {
type: 'direct',
api: {
create:QueryDatabase.createRecord,
read:QueryDatabase.getResults,
update:QueryDatabase.updateRecords,
destroy:QueryDatabase.destroyRecord
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var alphaSpaceTest = /^[-\sa-zA-Z]+$/;
Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
alphaSpace: function(val, field) {
return alphaSpaceTest.test(val);
},
// vtype Text property: The error text to display when the validation function returns false
alphaSpaceText: 'Not a valid state. Must not contain numbers.',
// vtype Mask property: The keystroke filter mask
alphaSpaceMask: /^[-\sa-zA-Z]+$/
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
//height: 550,
//width: 800,
cls: 'grid',
title: 'Production Planning Control',
store: store,
columns: [{
dataIndex: 'id',
width: 50,
text: 'ID'
}, {
dataIndex: 'name',
flex: 0.5,
text: 'ClientName',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
}, {
dataIndex: 'address',
flex: 0.5,
text: 'Product Name',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
}, {
dataIndex: 'state',
flex: 0.8,
text: 'No Of QtyRequired',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false,
//vtype: 'alphaSpace'
}
},{
dataIndex: 'st_one',
flex: 0.7,
text: 'Station 1',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
},
{
dataIndex: 'st_two',
flex: 0.7,
text: 'Station 2',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
},{
dataIndex: 'st_three',
flex: 0.7,
text: 'Station 3',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
},
{
dataIndex: 'st_for',
flex: 0.7,
text: 'Station 4',
//pt 2
allowBlank: false,
field: {
type: 'textfield',
//allowBlank: false,
//vtype: 'alphaSpace'
}
}
],
renderTo: Ext.getBody(),
//pt 2
plugins: [
rowEditing
],
dockedItems: [{
xtype: 'toolbar',
store: store,
dock: 'bottom',
//creating, add items
items: [{
iconCls: 'add',
text: 'Add',
handler: function() {
rowEditing.cancelEdit();
// create a record
var newRecord = Ext.create('PersonalInfo');
store.insert(0, newRecord);
rowEditing.startEdit(0, 0);
// write about this section in tutorial
var sm = grid.getSelectionModel();
grid.on('edit', function() {
var record = sm.getSelection();
store.record.commit();
//store.sync();
//e.record.commit();
//store.commitChanges();
store.remove(record);
store.load();
store.sync();
alert ('dome');
});
}
}, {
iconCls: 'delete',
text: 'Delete',
handler: function() {
rowEditing.cancelEdit();
var sm = grid.getSelectionModel();
Ext.Msg.show({
title:'Delete Record?',
msg: 'You are deleting a record permanently, this cannot be undone. Proceed?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if(btn === 'yes') {
store.remove(sm.getSelection());
store.sync();
}
}
});
}
},
{
xtype: 'button',
iconCls:'refresh',
text: 'Refresh Grid',
// action: 'refresh',
handler:function(){
//var reload=this.getGridPanel().getStore();
store.load();
}
}]
}]
});
});
You can just use autoSync:true store config to have it post automatically.

how to pull and trigger pop up box with related data on extjs grid?

I have a paginated grid with data in it, so here's my code
var pagesize = 5;
Ext.onReady(function(){
var invoice = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'classes/invoices.php',
//method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'results',
fields: ['InvoiceID','InvoiceNumber','UserID','CompanyID','Date','InvoiceTo',
'AddressLine1','Addressline2','AddressLine3','AddressLine4','AddressLine5',
'AddressLine6','Country','ZipCode','Description'],
}),
remoteSort: false
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Invoices',
height: 200,
width: 1135,
store: invoice,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
columns: [
{header: "Invoice ID", dataIndex: 'InvoiceID' },
{header: "Invoice Number", dataIndex:'InvoiceNumber'},
//{header: "User ID", dataIndex: 'UserID'},
//{header: "Company ID", dataIndex: 'CompanyID'},
{header: "Date", dataIndex: 'Date'},
{header: "Invoice To", dataIndex: 'InvoiceTo'},
{header: "AddressLine1", dataIndex: 'AddressLine1'},
{header: "AddressLine2", dataIndex: 'AddressLine2'},
{header: "AddressLine3", dataIndex: 'AddressLine3'},
{header: "AddressLine4", dataIndex: 'AddressLine4'},
{header: "AddressLine5", dataIndex: 'AddressLine5'},
{header: "AddressLine6", dataIndex: 'AddressLine6'},
{header: "Country", dataIndex: 'Country'}
]
}),
bbar: new Ext.PagingToolbar({
store: invoice,
displayInfo: true,
pageSize: pagesize,
prependButtons: true,
items:[
'test'
]
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record){
Ext.Msg.alert('You Selected',record.get('InvoiceNumber'));
}
}
})
});
invoice.load({
params: {
start: 0,
limit: pagesize,
}
});
});
What I want to happen now is, if I click one of the rows in the Grid, a grid will pop out that has the data related to the clicked row, so how to do that , what code to insert? , any how's the coding in PHP?, any samples or direct code help is much appreciated, thanks
Check Sencha documentation for the itemclick event for the grid - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Table-event-itemclick

ExtJS 4 grid: display nested data models with associations

i am new to ExtJS and stuck at a problem. I have a deep nested json data that i have successfully loaded in a store, using multiple associated models. But for the next step, i am unable to display this data in a simple grid, please help. How can i display something in that grid which is located deep inside the json.... here is my json
{
"success" : "true",
"total":2,
"user" :
{
"id" : 12,
"email" : "abc#gmail.com",
"course" :
{
"name" : "BESE",
"institute" :
[{
"name" : "Engineering University",
"semester" :
{
"number":1,
"TCH" : 12,
"GPA" : 2.32,
"Marks":23.32,
"record" : [
{
"subject" : "Global Studies",
"CH":2,
"GP":4,
"Grade": "A+",
"Marks":99.1
},
{
"subject" : "Digital Logic Design",
"CH":4,
"GP":3.5,
"Grade": "B+",
"Marks":79.1
}
]
}
},
{
"name" : "Another University",
"semester" :
{
"number":2,
"TCH" : 22,
"GPA" : 1.32,
"Marks":13.32,
"record" : [
{
"subject" : "C++",
"CH":2,
"GP":3,
"Grade": "C+",
"Marks":59.1
},
{
"subject" : "Engg Math",
"CH":4,
"GP":2.5,
"Grade": "C",
"Marks":39.1
}
]
}
}]
}
}
}
and this is my code......
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'email', type: 'string'},
],
proxy: {
type: 'ajax',
url : 'getRecord.php',
reader: {
type: 'json',
root: 'user'
}
},
hasMany: { model: 'Course', name: 'course' ,associationKey: 'course'}
});
Ext.define('Course', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
],
belongsTo: 'User',
hasMany: { model: 'Institute', name: 'institute' ,associationKey: 'institute'}
});
Ext.define('Institute', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
],
belongsTo: 'Course',
hasMany: { model: 'Semester', name: 'semester',associationKey: 'semester' }
});
Ext.define('Semester', {
extend: 'Ext.data.Model',
fields: [
{name: 'number', type: 'int'},
{name: 'TCH', type: 'float'},
{name: 'GPA', type: 'float'},
{name: 'Marks', type: 'float'},
],
belongsTo: 'Institute',
hasMany: { model: 'Record', name: 'record',associationKey: 'record' }
});
Ext.define('Record', {
extend: 'Ext.data.Model',
fields: [
{name: 'subject', type: 'string'},
{name: 'CH', type: 'float'},
{name: 'GP', type: 'float'},
{name: 'Grade', type: 'string'},
{name: 'Marks', type: 'float'},
],
belongsTo: 'Semester',
});
Ext.require('Ext.data.*');
Ext.require('Ext.grid.*');
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.Store({
model: "User",
});
store.load({
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'email'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'course>aname',
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'User.course.name'
}
]
});
});
It's currently a limitation that nested data is not easily loaded into a grid by default, but it's being actively worked on.
maybe mapping can help you, I've resolved similar (but more simple) problem in this way:
My json:
{"operations":
[
{"timestamp": {"__dt__": "2011-08-31T15:39:17"}, "description": "pippo"},
{"timestamp": {"__dt__": "2011-08-31T16:51:43"}, "description": "pluto"}
]
}
My model:
Ext.define('Operation', {
extend: 'Ext.data.Model',
idProperty: 'timestamp.__dt__',
fields: [{name:'__dt__', allowBlank:true, mapping:'timestamp.__dt__'},
{name:'description', allowBlank:false}]
});
My columns:
columns: [{header: 'Timestamp', width: 150, sortable: true, dataIndex: '__dt__'},
{header: 'Description' , width: 100, sortable: true, dataIndex: 'description', editor:'textfield'}],
Hope it helps...
If your json object does not meet extjs requirements just change object format. You can do something similar:
Ext.ajax.request({url: 'getRecords.php', success: function(response) {
var data = Ext.decode(response.reseponseText);
//format your data
grid.loadData(formatedData);
}})
You can also format your json object on the server side

Categories