wesDuff
6 Sep 2008, 7:10 PM
Hello, I have been using EXT for about 2 days and been working on this example for a couple hours and go this working quite nicely. I have seen alot of posts on how to get this sort of thing working so I am going to give you a line by line example.
Here we go
Make sure you have WAMP or MAMP running on your local machine.
Make sure it is running after you install it.
Make sure you set up your project in the correct file on the server
We are going to be using PHP5 and MySQL(latest version).
First we are going to build the database.
Open the phpMyAdmin:
create a database called DB_under. (you can call this what ever you want just make sure you change it globaly).
Ok close phpMyAdmin your done with it.
Now we are going to make a new file called DB_build.php.
This is a php script that is going to build our table for us and our fields.
Here is the script
<?php
$mysqli = new mysqli('localhost','root', 'root', 'DB_under');
if(mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
} else {
printf("<div style='margin:10px; color:green; font-weight:bold'><span style='font-weight:normal; margin-right:7px; color:black'>1.</span>Connection Excepted </div>");
}
/*** sql to create a new table ***/
$sql = "CREATE TABLE drug (
id int NOT NULL AUTO_INCREMENT,
name varchar(30) NOT NULL,
price INT NOT NULL,
number INT NOT NULL,
excerpt TINYTEXT NOT NULL,
PRIMARY KEY (id)
)";
if($mysqli->query($sql) === TRUE)
{
echo "<div style='margin:10px; color:green;'><span style='font-weight:normal; margin-right:7px; color:black'>2.</span>New table \"drug\" created successfully</div>";
}
else
{
echo "<div style='margin:10px; color:red;'><span style='font-weight:normal; margin-right:7px; color:black'>2.</span>" . $sql . "<br />" . $mysqli->error;
}
/*** close connection ***/
$mysqli->close();
?>
Ok now you need to go to your localhost and put in DB_build.php
This will build your table and fields.
Yea you can do this in phpMyAdmin but if you want to add a lot of tables and fields and other stuff this is a good way to build your database.
No we are going to create another php file called index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Combo Boxes</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" media="screen"/>
<script type="text/javascript" language="JavaScript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery/ext-all-debug.js"></script>
<script type="text/javascript" language="JavaScript">
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'jsonObj.php'
}),
reader: new Ext.data.JsonReader({
root: 'Root',
}, [
{name: 'Drug', mapping: 'name'},
{name: 'Price', mapping: 'price'},
{name: 'Number', mapping: 'number'},
{name: 'Excerpt', mapping: 'excerpt'}
])
});
// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<h3><span>{Drug}<br />Price: {Price}</span>Id#:Number:{Number} </h3>',
'{Excerpt}',
'</div></tpl>'
);
var search = new Ext.form.ComboBox({
store: ds,
displayField:'Drug',
typeAhead: false,
loadingText: 'Searching...',
width: 570,
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
applyTo: 'search',
itemSelector: 'div.search-item',
onSelect: function(record){ // override default onSelect to do redirect
alert("do something here");
}
});
});
</script>
</head>
<body>
<div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search for Specific Drug</h3>
<input type="text" size="40" name="search" id="search" />
<div style="padding-top:4px;">
Live search requires a minimum of 4 characters.
</div>
</div>
</div>
</body>
</html>
Our JSON Request is calling a page called jsonObj.php. You can name this what ever you want just change it globaly.
This is another php file.
<?php
//query coming from the ext lib. combobox auto complete. The post var is called query.
$submit_query = $_POST['query'];
$build_array = array(Root=>array());
$mysqli = new mysqli('localhost','root', 'root', 'DB_under');
if(mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
} else {
$query = "SELECT * from drug WHERE name LIKE '%$submit_query%'";
if ($result = $mysqli->query($query)) {
if ($result) {
while ($row = $result->fetch_row()) {
array_push($build_array['Root'], array(name=>$row[1], price=>$row[2], number=>$row[3], excerpt=>$row[4]));
}
}
} else {
printf("Query failed: %s\n", $mysqli->errno);
}
}
echo json_encode($build_array);
?>
There you have it.
When you type in 4 charactes that are a match you get the list.
There you have it. Have fun
Here we go
Make sure you have WAMP or MAMP running on your local machine.
Make sure it is running after you install it.
Make sure you set up your project in the correct file on the server
We are going to be using PHP5 and MySQL(latest version).
First we are going to build the database.
Open the phpMyAdmin:
create a database called DB_under. (you can call this what ever you want just make sure you change it globaly).
Ok close phpMyAdmin your done with it.
Now we are going to make a new file called DB_build.php.
This is a php script that is going to build our table for us and our fields.
Here is the script
<?php
$mysqli = new mysqli('localhost','root', 'root', 'DB_under');
if(mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
} else {
printf("<div style='margin:10px; color:green; font-weight:bold'><span style='font-weight:normal; margin-right:7px; color:black'>1.</span>Connection Excepted </div>");
}
/*** sql to create a new table ***/
$sql = "CREATE TABLE drug (
id int NOT NULL AUTO_INCREMENT,
name varchar(30) NOT NULL,
price INT NOT NULL,
number INT NOT NULL,
excerpt TINYTEXT NOT NULL,
PRIMARY KEY (id)
)";
if($mysqli->query($sql) === TRUE)
{
echo "<div style='margin:10px; color:green;'><span style='font-weight:normal; margin-right:7px; color:black'>2.</span>New table \"drug\" created successfully</div>";
}
else
{
echo "<div style='margin:10px; color:red;'><span style='font-weight:normal; margin-right:7px; color:black'>2.</span>" . $sql . "<br />" . $mysqli->error;
}
/*** close connection ***/
$mysqli->close();
?>
Ok now you need to go to your localhost and put in DB_build.php
This will build your table and fields.
Yea you can do this in phpMyAdmin but if you want to add a lot of tables and fields and other stuff this is a good way to build your database.
No we are going to create another php file called index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Combo Boxes</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" media="screen"/>
<script type="text/javascript" language="JavaScript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery/ext-all-debug.js"></script>
<script type="text/javascript" language="JavaScript">
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'jsonObj.php'
}),
reader: new Ext.data.JsonReader({
root: 'Root',
}, [
{name: 'Drug', mapping: 'name'},
{name: 'Price', mapping: 'price'},
{name: 'Number', mapping: 'number'},
{name: 'Excerpt', mapping: 'excerpt'}
])
});
// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<h3><span>{Drug}<br />Price: {Price}</span>Id#:Number:{Number} </h3>',
'{Excerpt}',
'</div></tpl>'
);
var search = new Ext.form.ComboBox({
store: ds,
displayField:'Drug',
typeAhead: false,
loadingText: 'Searching...',
width: 570,
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
applyTo: 'search',
itemSelector: 'div.search-item',
onSelect: function(record){ // override default onSelect to do redirect
alert("do something here");
}
});
});
</script>
</head>
<body>
<div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search for Specific Drug</h3>
<input type="text" size="40" name="search" id="search" />
<div style="padding-top:4px;">
Live search requires a minimum of 4 characters.
</div>
</div>
</div>
</body>
</html>
Our JSON Request is calling a page called jsonObj.php. You can name this what ever you want just change it globaly.
This is another php file.
<?php
//query coming from the ext lib. combobox auto complete. The post var is called query.
$submit_query = $_POST['query'];
$build_array = array(Root=>array());
$mysqli = new mysqli('localhost','root', 'root', 'DB_under');
if(mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
} else {
$query = "SELECT * from drug WHERE name LIKE '%$submit_query%'";
if ($result = $mysqli->query($query)) {
if ($result) {
while ($row = $result->fetch_row()) {
array_push($build_array['Root'], array(name=>$row[1], price=>$row[2], number=>$row[3], excerpt=>$row[4]));
}
}
} else {
printf("Query failed: %s\n", $mysqli->errno);
}
}
echo json_encode($build_array);
?>
There you have it.
When you type in 4 charactes that are a match you get the list.
There you have it. Have fun