PDA

View Full Version : selectfield with PHP/mySQL



avishnev
21 Oct 2013, 12:45 PM
All,

This could be a simple newbie question. I am using Open Source of ExtJS 4.2.1. Inside my form there is a selectfield field that I want to populate from mysql database. So I created model and store for using back-end PHP url creating a jason response. here is the code. It is nothing complicated. Just trying to do account registration app where country is populated in the drop down list. Every time I run in, i get the following inside dev console on line 5057 in ext-debug.js. Any ideas? I have been stuck on what I think is something simple for about a day. Just seems like I am missing something ;-) This can't be that hard

5057 (http://localhost/extJS/ext-debug.js)TypeError: 'undefined' is not an object (evaluating 'name.substring')

Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.layout.container.Anchor',
'Ext.tip.QuickTipManager'
]);


Ext.onReady(function() {
Ext.QuickTips.init();
Ext.define('modelCountry', {
extend: 'Ext.data.Model',
idProperty: 'idCountry',
fields: [
{ name: 'idCountry', type: 'int' },
{ name: 'country' }

],
proxy: {
type: 'ajax',
actionMethods: 'POST',
api: {
read: 'country.php',
create: 'save_product.php',
update: 'save_product.php',
destroy: 'delete_product.php' // not in use
},
reader: {
type: 'json',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message',
root: 'data'
},


writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
root: 'data'
},
listeners: {
/*
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
*/
}
}
});


storeCountry = new Ext.data.Store({
autoLoad: true,
type: 'json',
model: 'modelCountry',
// pageSize: 25,
sorters: {
property: 'idCountry',
direction: 'ASC'
}
});



var bd = Ext.getBody();


var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';


var simple = new Ext.form.Panel({
layout: 'anchor',
collapsible: true,

url: 'save-form.php',
frame: true,
title: 'Registration',
bodyPadding: '5 5 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
name: 'first',
allowBlank: false,
tooltip: 'Enter your first name'
},{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
name: 'last',
allowBlank: false,
tooltip: 'Enter your last name'
}, {
fieldLabel: 'Address',
afterLabelTextTpl: required,
name: 'address',
allowBlank: false,
tooltip: 'Enter your street address'
},
{


label: 'Country',
xtype: 'selectfield',
id:'country',
store: storeCountry,
displayField: 'country',
valueField: 'country',

tooltip: 'Country of Residence'

},
{
fieldLabel: 'Email',
afterLabelTextTpl: required,
name: 'email',
allowBlank: false,
vtype:'email',
tooltip: 'Enter your email address'
}, {

fieldLabel: 'Confirm Email',
afterLabelTextTpl: required,
name: 'email1',
allowBlank: false,
vtype:'email',
tooltip: 'Enter your email address',
/**
* Custom validator implementation - checks that the value matches what was entered into
* the password1 field.
*/
validator: function(value) {
var password1 = this.previousSibling('[name=password]');
return (value === password1.getValue()) ? true : 'Email do not match.'
}
}, {
fieldLabel: 'Username',
afterLabelTextTpl: required,
name: 'username',
allowBlank: false,
tooltip: 'Enter your username'
}, {
fieldLabel: 'Password',
afterLabelTextTpl: required,
name: 'password',
allowBlank: false,
vtype: 'password',
tooltip: 'Enter your password'
}, {
fieldLabel: 'Confirm Password',
afterLabelTextTpl: required,
name: 'password1',
allowBlank: false,
vtype: 'password',
tooltip: 'Confirm Password',
/**
* Custom validator implementation - checks that the value matches what was entered into
* the password1 field.
*/
validator: function(value) {
var password1 = this.previousSibling('[name=password]');
return (value === password1.getValue()) ? true : 'Passwords do not match.'
}
}

],


buttons: [{
text: 'Save',
handler: function() {
this.up('form').getForm().isValid();
}
},{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
}
}]
});


Ext.create('Ext.container.Viewport', {


layout:'border',
closable: false,
resizable: false,
border: false,
defaults: {
collapsible: true,
split: true,
bodyPadding: 15
},
items: [{
title: 'Footer',
region: 'south',
height: 100,
minHeight: 50,
maxHeight: 100

},{
title: 'header',
region: 'north',
id: 'header',
height: 300,
minHeight: 75,
maxHeight: 300,
bodyStyle: "background:#ffffff url('img/lock.jpg') no-repeat center top;"
},{
title: 'Navigation',
region:'west',
floatable: false,
margins: '5 0 0 0',
width: 175,
minWidth: 100,
maxWidth: 250
},{
title: 'Main Content',
collapsible: false,
region: 'center',
id: 'center',
margins: '5 0 0 0'
}]
}).show();
var wp = Ext.getCmp("center");
wp.add(simple);
wp.doLayout();
});

keckeroo
23 Oct 2013, 3:08 PM
Same post - same answer. You should be using xtype: 'combobox' - not 'selectfield' :-)

avishnev
24 Oct 2013, 6:27 AM
sorry. i dupped the question here. thanks for answering. I will continue on the other thread. this can be closed