PDA

View Full Version : populate text fields



atoto
22 Jun 2010, 3:35 AM
im stuck in making data display in textfields,i already have a database in mysql and using a datastore/json reader,how do i make the textfield comm with the datastore.below is my code
<<javascript code>>
var CompanyCreateWindow;
var CompanyCreateForm;
var Company_NameField;
var CompanysDataStore;
var IDField;
var Company_NameField;
var AddressField;
var PrefixField;
var BranchField;
var TelephoneField;
var Fax_NoField;
var EmailField;

Ext.onReady(function(){

Ext.QuickTips.init();
var picBox = {
columnWidth: '100 px',
height:190,
frame:'true',
//bodyStyle: 'padding:70px',
items: [
{ xtype: 'box',
autoEl: { tag: 'div',
html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />'
}
}
]
}
var picFiles = {
columnWidth: .65,
layout: 'form',
labelAlign:'top',
items: [{
xtype: 'textfield',
fieldLabel: 'Current',
labelSeparator: '',
name: 'currPic',
id:'currPic',
readOnly: true,
disabled:true,
anchor:'100%'
},
{
xtype: 'textfield',
fieldLabel: 'New (JPG or PNG only)',
labelSeparator: '',
name: 'newPic',
id:'newPic',
style:'width: 300px',
inputType: 'file',
allowBlank: false
}]
}
function validateFileExtension(fileName) {
var exp = /^.*.(jpg|JPG|png|PNG)$/;
return exp.test(fileName);
}
var pictUploadForm = new Ext.FormPanel({
frame: true,
title: 'Change Picture',
bodyStyle: 'padding:5px',
width: 420,
height:270,
layout: 'column',
url: 'companydatabase.php',
method: 'POST',
fileUpload: true,
items: [picFiles],
buttons: [{
text: 'Upload Picture',
handler: function() {
var theForm = pictUploadForm.getForm();
if (!theForm.isValid()) {
Ext.MessageBox.alert('Change Picture',
'Please select a picture');
return;
}
if (!validateFileExtension(Ext.getDom('newPic').value)) {
Ext.MessageBox.alert('Change Picture',
'Only JPG or PNG, please.');
return;
}
theForm.submit({
params: { act: 'setPicture', id: 'contact1' },
waitMsg: 'Uploading picture'
})
}
},
{
text: 'Cancel'
}]
});
pictUploadForm.on({
actioncomplete: function(form, action) {
if (action.type == 'load') {
var pic = action.result.data;
Ext.getDom('pic').src = pic.file;
Ext.getCmp('currPic').setValue(pic.file);
}
if (action.type == 'submit') {
var pic = action.result.data;
Ext.getDom('pic').src = pic.file;
Ext.getCmp('currPic').setValue(pic.file);
Ext.getDom('newPic').value = '';
}
}
});
pictUploadForm.render(document.body);
pictUploadForm.getForm().load({
params: { act: 'getPicture',
id: 'contact1'
},
waitMsg: 'Loading'
});






IDField = new Ext.form.TextField({
name:'ID',
fieldLabel: 'COMPANY ID',
displayField:'ID',
});

Company_NameField = new Ext.form.TextArea({
store:CompanysDataStore,
name:'Company_Name',
id: 'Company_Name',
displayField: 'company_name',
ValueField:'company_name',
height:40,
fieldLabel: 'company name',
anchor : '95%',

});

AddressField = new Ext.form.TextArea({
name: 'Address',
id:'Address',
fieldLabel: 'address',
height:40,
width:100,
valueField:'Address',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

PrefixField = new Ext.form.TextField({
name: 'PrefixField',
fieldLabel: 'prefix',
maxLength:40,
width:10,
valueField:'Prefix',
allowBlank: false,
anchor : '25%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

BranchField = new Ext.form.TextField({
name: 'BranchField',
fieldLabel: 'branch',
maxLength:40,
width:10,
valueField:'Branch',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

WebsiteField = new Ext.form.TextField({
name: 'WebsiteField',
fieldLabel: 'website',
maxLength:40,
width:10,
valueField:'Website',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

TelephoneField = new Ext.form.TextField({
name: 'TelephoneField',
fieldLabel: 'telephone',
maxLength:40,
width:10,
valueField:'Telephone',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

Fax_NoField = new Ext.form.TextField({
name: 'Fax_NoField',
fieldLabel: 'fax number',
maxLength:40,
width:10,
valueField:'Fax_No',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});

EmailField = new Ext.form.TextField({
name: 'EmailField',
fieldLabel: 'e-mail',

maxLength:40,
width:10,
valueField:'Email',
allowBlank: false,
anchor : '95%',
maskRe: /([a-zA-Z0-9\s]+)$/
});


CompanyCreateForm = new Ext.FormPanel({
standardSubmit: true,

labelAlign: 'top',
bodyStyle:'padding:5px',
id:'14',
frame:'true',
url: 'companydatabase.php',
method: 'POST',
frame: true,

width: 500,
displayInfo: true,
items: [{
layout:'column',
border:false,

items:[{
columnWidth:0.5,
layout: 'form',
border:false,

items: [Company_NameField,AddressField,PrefixField,BranchField,WebsiteField,TelephoneField,Fax_NoField,EmailField]


}],

}],
buttons: [{
text: 'Save and Close',

},{
text: 'Cancel',
handler: function(){


}
}]

});

CompanyCreateForm.on({
actioncomplete: function(form, action){
if(action.type == 'load'){
var contact = action.result.data;
Ext.getCmp(contact.Address).setValue(true);
CompanyCreateForm.setTitle(contact.company_name + ' ' +
contact.prefix);

}
}
});



CompanysDataStore = new Ext.data.Store({
id: 'CompanysDataStore',
proxy: new Ext.data.HttpProxy({
url: 'companydatabase.php',
//method: 'POST'
}),
baseParams:{task: "LISTING1"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'ID', type: 'string', mapping: 'ID'},
{name: 'Company_Name', type: 'string', mapping: 'company_name'},
{name: 'Address', type: 'string', mapping: 'address'},
{name: 'Website', type: 'string', mapping: 'website'},
{name: 'Telephone', type: 'string', mapping: 'telephone'},
{name: 'Fax_No', type: 'string', mapping: 'fax_no'},
{name: 'Email', type: 'string', mapping: 'email'},



])

,remoteSort:false

});
CompanysDataStore.load({params:{start:0, limit:70}});

CompanysDataStore.on('load', function() {
Company_Name.setValue(CompanysDataStore.getAt(0).data.company_name);

Address.setValue(CompanysDataStore.getAt(0).data.address);
Website.setValue(CompanysDataStore.getAt(0).data.website);
Telephone.setValue(CompanysDataStore.getAt(0).data.telephone);
Fax_No.setValue(CompanysDataStore.getAt(0).data.fax_no);
Email.setValue(CompanysDataStore.getAt(0).data.email);



})

CompanysDataStore.load();






CompanyCreateWindow= new Ext.Window({
id: 'CompanyCreateWindow',
title: 'Company identity',
closable:true,
width: 800,
height: 500,
plain:true,
layout: 'column',
modal:'true',
plain:true,

items:[{

columnWidth:0.6,
items:[CompanyCreateForm]


},{
columnWidth:0.4,
items:[picBox,pictUploadForm]
}]

});


CompanyCreateWindow.show();
});

<<php code connecting to an already setup database called dbslamslife>>
<?php

// This will connect us to our database...
mysql_connect("localhost", "root", "") or
die("Could not connect: " . mysql_error());
mysql_select_db("dbslamslife");

// The ext grid script will send a task field which will specify what it wants to do

$task = '';
if ( isset($_POST['task'])){
$task = $_POST['task'];
}
switch($task){


case "LISTING1":
getList();
break;

case "UPDATEPRES":
updateCompany();
break;

default:
echo "{failure:true}";
break;
}

function getList()
{

$query = "SELECT company_name FROM companyinfo";

//echo $query;
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);


if($nbrows>0){
while($rec = mysql_fetch_array($result)){
// render the right date format


$arr[] = $rec;
}
$jsonresult = JEncode($arr);
echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
} else {
echo '({"total":"0", "results":""})';
}
}

function updateCompany()
{
$Company_ID = $_POST['Company_ID'];
$Company_Name = addslashes($_POST['Company_Name']);
$Address = addslashes($_POST['Address']);


// Now update the Claimcause
$query = "UPDATE companyinfo SET company_name = '$Company_Name', address = '$Address'WHERE company_ID=$Company_ID";
$result = mysql_query($query);
echo '1';
}

// Encodes a SQL array into a JSON formated string
function JEncode($arr){
if (version_compare(PHP_VERSION,"5.2","<"))
{
require_once("./JSON.php"); //if php<5.2 need JSON class
$json = new Services_JSON();//instantiate new json object
$data=$json->encode($arr); //encode the data in json format
} else
{
$data = json_encode($arr); //encode the data in json format
}
return $data;
}

// Encodes a YYYY-MM-DD into a MM-DD-YYYY string
function codeDate ($date) {
$tab = explode ("-", $date);
$r = $tab[1]."/".$tab[2]."/".$tab[0];
return $r;
}

?>


any help will greatly appreciated