Ext.js Combo Box display data from MySQL Database

Software Used:

  • PHP 7.2
  • MySQL
  • Ext.js 6 with CDN
  • Database Name: hotel, User: root

Wanted:

I want to display data from JSON that had to generate with php and MySQL

The Display Combo

Create JSON Data

Create combobox.php filename and insert this code:

<?php

$mysqli = new mysqli("localhost","root","","hotel");

if ($mysqli -> connect_errno) {
  echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
  exit();
}

$sql = "SELECT idclass, title from class ORDER BY idclass";
 $myArray = array();
if ($result = $mysqli -> query($sql)) {
	$tempArray = array();
  while ($obj = $result -> fetch_object()) {
 
	 $tempArray = $obj;
        array_push($myArray, $tempArray);
  }
  echo json_encode($myArray);
  $result -> free_result();
}

$mysqli -> close();

?>

Create HTML Form

Create a form.html filename and insert this code

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.form.Panel', {
               id: 'newForm',
               renderTo: 'formId',
               border: true,
	       bodyStyle: 'padding: 10px;',
               width: 300,
               
               items: [{
             
			xtype:          'combobox',

              
                        fieldLabel:     'Hotel Room',

        
                        displayField:   'title',

                        valueField:     'idclass',

                        store:          new Ext.data.JsonStore({
			proxy:   {
				type: 'ajax',
                                url: 'combobox.php',
        reader: {
            type: 'json'
            
        },
       

                     fields : ['idclass', 'title']


           } }),
		   }],
         })
		 });
      </script>
   </head>
   
   <body style="margin:15px 15px">
      <div id = "formId" ></div>
   </body>
</html>

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *