I am trying to bind combo from php code, but somehow its not showing any items.
HTML file:
HTML Code:
<html>
<head>
<title>Ext Form</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="comboTest.js"></script>
</head>
<body>
<div id="formContainer"></div>
</body>
</html>
PHP File - data.php:
PHP Code:
<?php
$categories = "{'categories':[";
$categories .= "{'id':'1', 'name':'Category 1'},";
$categories .= "{'id':'2', 'name':'Category 2'},";
$categories .= "{'id':'3', 'name':'Category 3'},";
$categories .= "{'id':'4', 'name':'Category 4'},";
$categories .= "{'id':'5', 'name':'Category 5'},";
$categories .= "{'id':'6', 'name':'Category 6'}";
$categories .= "]}";
echo $categories;
?>
Javascript Code - comboTest.js:
Code:
function init()
{
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
/** ******* */
/* Create the store for the combo "application" */
/** ******* */
var application = new Ext.data.JsonStore({
url: 'data.php',
fields: [
{name: 'id'},
{name: 'name'}
]
});
application.load();
var combo = new Ext.form.ComboBox
(
{
fields: ['id', 'name'],
id: 'idjs_application',
store: application,
fieldLabel: 'Country ',
hiddenName:'idjs_appli',
valueField:'id',
displayField:'name',
typeAhead: true,
triggerAction: 'all',
emptyText:'Select country',
selectOnFocus:true,
blankText:'Select Country',
anchor:'50%'
}
)
var dataForm = new Ext.form.FormPanel
(
{
width: '60%',
labelAlign: 'right',
buttonAlign: 'left',
frame:true,
title:'ComboTest',
items:
[
combo
]
}
);
dataForm.render('formContainer');
}
Ext.onReady
(
init
);
Thanks in advance.