Ext5.1.0的data例子改写读数据

jhui123456

于 2018-10-10 11:49:42 发布

阅读量440

点赞数

文章标签： extjs

本文链接：https://blog.csdn.net/jhui123456/article/details/82994864

版权

#extjs5的例子改写
##背景
xmapp ，win7 32位，使用php7 有mysql ，extjs5.1
##原例子是\ext-5.1.0\build\examples\data\meta-config-basic.html
meta-config-basic.html 原来使用meta-config-basic.php
动态变化里面的列表和行数。
##改写操作
我的改写是使用mysql的数据内容，所以第一步，导入sql文件到mysql
操作一、打开XAMPP的面板，使用Shell命令行，输入

#mysql -uroot -p 
#source F:\xampp\htdocs\examples\ch08\data.sql;
//有时候要下面的反斜杠
#source F:/xampp/htdocs/examples/ch08/data.sql;

其中data.sql文件的内容是。

drop DATABASE if exists extjsinaction;
CREATE DATABASE extjsinaction;

USE `extjsinaction`;

DROP TABLE IF EXISTS `departments`;
CREATE TABLE `departments` (
  `id` mediumint(8) unsigned NOT NULL auto_increment,
  `name` varchar(255) default NULL,
  `active` varchar(255) default NULL,
  `dateActive` varchar(50) default NULL,
  `dateInactive` varchar(50) default NULL,
  `description` varchar(255) default NULL,
  `director` int(5) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=16 DEFAULT CHARSET=latin1;


LOCK TABLES `departments` WRITE;
INSERT INTO `departments` VALUES (1,'Accounting','1','12/01/2001',NULL,NULL,NULL),(2,'Advertising','1','12/01/2001',NULL,NULL,NULL),(3,'Asset Management','1','12/01/2001',NULL,NULL,NULL),(4,'Customer Relations','1','12/01/2001',NULL,NULL,NULL),(5,'Customer Service','1','12/01/2001',NULL,NULL,NULL),(6,'Finances','1','12/01/2001',NULL,NULL,NULL),(7,'Human Resources','1','12/01/2001',NULL,NULL,NULL),(8,'Legal Department','1','12/01/2001',NULL,NULL,NULL),(9,'Media Relations','1','12/01/2001',NULL,NULL,NULL),(10,'Payroll','1','12/01/2001',NULL,NULL,NULL),(11,'Public Relations','1','12/01/2001',NULL,NULL,NULL),(12,'Quality Assurance','1','12/01/2001',NULL,NULL,NULL),(13,'Sales and Marketing','1','12/01/2001',NULL,NULL,NULL),(14,'Research and Development','1','12/01/2001',NULL,NULL,NULL),(15,'Tech Support','1','12/01/2001',NULL,NULL,NULL);
UNLOCK TABLES;

DROP TABLE IF EXISTS `employees`;
CREATE TABLE `employees` (
  `id` mediumint(8) unsigned NOT NULL auto_increment,
  `firstName` varchar(255) default NULL,
  `lastName` varchar(255) default NULL,
  `middle` varchar(255) default NULL,
  `title` varchar(255) default NULL,
  `street` varchar(255) default NULL,
  `city` varchar(50) default NULL,
  `state` varchar(50) default NULL,
  `zip` varchar(10) default NULL,
  `departmentId` int(5) default NULL,
  `dateHired` varchar(50) default NULL,
  `dateFired` varchar(255) default NULL,
  `dob` varchar(50) default NULL,
  `rate` varchar(50) default NULL,
  `officePhone` varchar(255) default NULL,
  `homePhone` varchar(255) default NULL,
  `mobilePhone` varchar(255) default NULL,
  `email` varchar(255) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=601 DEFAULT CHARSET=latin1;

LOCK TABLES `employees` WRITE;
/*!40000 ALTER TABLE `employees` DISABLE KEYS */;
INSERT INTO `employees` VALUES (1,'Louis','Klein','Teagan','Mr.','147-8927 Nonummy Ave','Cedar Falls','UT','32321',5,'05/23/2001',NULL,'04/04/1942','63','710-427-4977','499-368-8219','555-732-8813','dapibus.gravida.Aliquam@enim.edu'),(2,'Gillian','Fry','Destiny','Mrs.','P.O. Box 773, 1323 Leo. Road','Peekskill','SC','69702',3,'06/19/2007',NULL,'10/26/1945','48','544-183-6676','381-996-7045','818-376-6056','felis.orci@Sedmolestie.com'),(3,'Shoshana','Chaney','Kalia','Ms.','2511 Morbi Avenue','Fallon','FL','87474',7,'09/28/2004',NULL,'10/13/1960','82','138-755-9887','180-916-9243','593-279-5102','arcu.Vestibulum@cubiliaCurae;.ca'),(4,'Bernard','Gilbert','Carla','','Ap #618-1126 Egestas, Av.','Peabody','MT','63351',14,'08/05/2001',NULL,'03/05/1978','53','638-164-9084','871-630-7983','205-590-3918','Phasellus.at@ultricesiaculisodio.org'),(5,'Ingrid','Santiago','Maryam','Mr.','7522 At, St.','Waterloo','OR','48335',13,'08/30/2004',NULL,'12/26/1965','121','855-278-6302','960-164-6606','260-416-8892','eros@Nullaaliquet.com'),(6,'Quon','Clarke','Kim','Ms.','1561 Sem Rd.','Steubenville','CT','08912',14,'01/15/2008',NULL,'08/02/1958','83','765-651-3761','704-161-2891','285-853-4436','Donec.sollicitudin@est.com'),(7,'Bert','Barker','Samuel','Mr.','541-7646 Pede. Rd.','Aberdeen','MN','50468',8,'03/31/2006',NULL,'07/20/1945','118','947-376-7489','910-274-3741','230-860-9314','Mauris@velit.org'),(8,'Jordan','Dunn','Whitney','Ms.','484-4101 Sed Av.','Rockville','VA','30691',2,'10/15/2000',NULL,'06/23/1986','100','633-809-6712','247-708-4167','587-780-7118','montes.nascetur.ridiculus@nonenim.org'),(9,'Maris','Wilkerson','Dara','Mrs.','6316 Nisl. Avenue','Roseville','DC','99363',8,'10/04/2002',NULL,'07/02/1961','57','132-409-3488','638-587-9892','434-950-4727','Proin.vel@Integersem.org'),(10,'Vernon','Gilmore','Moana','Dr.','P.O. Box 864, 4093 Consequat Av.','Belleville','OR','90080',6,'03/08/2000',NULL,'11/17/1984','85','360-705-5872','762-852-4198','670-907-4757','vitae.diam@consequatauctornunc.com'),(11,'Daria','Patrick','Rinah','Ms.','Ap #238-225 Metus St.','Sharon','AL','74765',13,'10/20/2002',NULL,'02/02/1963','80','993-263-9219','942-937-2240','321-152-8214','Quisque.nonummy@sed.ca'),(12,'Scarlet','Reed','Brynne','Ms.','P.O. Box 594, 5659 At, Road','Seal Beach','OH','79544',5,'04/20/2006',NULL,'06/06/1945','28','508-250-5376','377-855-7201','103-563-6057','risus.Nulla.eget@magnaet.edu'),(13,'Leo','Mason','Yolanda','','3083 Etiam St.','Laughlin','TX','65632',11,'01/25/2004',NULL,'07/15/1980','132','135-294-5621','183-521-3364','608-416-9057','orci.lobortis.augue@elit.edu'),(14,'Charity','Harrell','Leah','','916-2654 Justo Rd.','Laconia','NC','54019',11,'07/22/2005',NULL,'09/29/1941','82','635-511-7969','677-666-9443','685-652-7661','sit@anteMaecenas.com'),(15,'Karen','Preston','Evan','Mr.','563-5143 Pellentesque. St.','Port Arthur','MA','03167',3,'09/24/2007',NULL,'09/13/1974','121','230-127-8585','127-989-7378','229-128-9808','vitae.diam.Proin@mattis.ca'),(16,'Mari','Snow','Ebony','','8377 Ipsum Rd.','Lynn','DC','87708',3,'07/22/2004',NULL,'03/23/1956','41','534-289-4470','255-306-3240','684-276-3775','sed.sem@nec.org'),(17,'Barbara','Larsen','Jin','Mrs.','1762 Volutpat Avenue','Ontario','MI','92890',11,'04/10/2008',NULL,'02/12/1945','120','592-409-3149','119-661-7969','517-689-4542','neque@euodiotristique.ca'),(18,'Portia','Newman','Chiquita','Dr.','P.O. Box 281, 2020 Donec Av.','Berkeley','DC','53255',2,'11/16/2004',NULL,'12/04/1946','87','796-692-7467','531-402-1756','325-271-5238','urna.Nunc.quis@eu.edu'),(19,'Colin','Carver','Cally','Mrs.','P.O. Box 462, 9418 Vestibulum St.','Dover','NJ','74038',6,'05/05/2001',NULL,'09/02/1971','139','578-441-5132','889-473-9431','713-390-8594','Nullam.nisl@Praesenteu.edu'),(20,'Quail','Winters','Erica','Ms.','P.O. Box 564, 8638 Lobortis Av.','Glens Falls','VA','59824',17,'10/08/2004',NULL,'11/30/1979','103','640-196-7150','868-203-4101','424-963-2705','risus@Inat.org'),(21,'Adele','Williamson','Perry','Mrs.','Ap #133-3134 Metus. Rd.','Watertown','NV','49899',13,'06/09/2005',NULL,'03/24/1986','53','596-140-7905','244-737-8018','493-707-4891','quis.urna@lectusCumsociis.ca'),(22,'Jolie','Keith','Lysandra','','P.O. Box 559, 9254 Facilisis Road','Providence','NE','14953',14,'07/05/2002',NULL,'11/06/1956','92','356-941-2998','681-121-9030','152-791-7951','dignissim@consectetuermaurisid.com'),(23,'Ralph','Franks','David','Dr.','P.O. Box 718, 6494 Nostra, Street','Baytown','GA','78482',7,'11/05/2001',NULL,'09/06/1969','71','585-288-5258','582-471-3361','743-600-2215','nec.urna@semegestasblandit.ca'),(24,'Sawyer','Kemp','Ariana','Mrs.','Ap #880-4070 Faucibus St.','Peru','NV','76544',1,'08/14/2005',NULL,'04/16/1983','61','728-980-8312','498-430-3331','698-130-3775','Phasellus.dolor@sitametlorem.org'),(25,'Patrick','Beck','Illiana','Ms.','P.O. Box 959, 9741 Risus. Av.','Racine','SD','34110',13,'06/11/2001',NULL,'09/05/1958','100','770-754-5497','237-862-3891','839-317-4585','lacinia.Sed@Integertinciduntaliquam.edu'),;
UNLOCK TABLES;

DROP TABLE IF EXISTS `states`;
CREATE TABLE `states` (
  `id` mediumint(9) NOT NULL auto_increment,
  `state` char(2) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=52 DEFAULT CHARSET=latin1;

LOCK TABLES `states` WRITE;
INSERT INTO `states` VALUES (1,'AL'),(2,'AK'),(3,'AZ'),(4,'AK'),(5,'CA'),(6,'CO'),(7,'CT'),(8,'DE'),(9,'DC'),(10,'FL'),(11,'GA'),(12,'HI'),(13,'ID'),(14,'IL'),(15,'IN'),(16,'IA'),(17,'KS'),(18,'KY'),(19,'LA'),(20,'ME'),(21,'MD'),(22,'MA'),(23,'MI'),(24,'MN'),(25,'MS'),(26,'MO'),(27,'MT'),(28,'NE'),(29,'NV'),(30,'NH'),(31,'NJ'),(32,'NM'),(33,'NY'),(34,'NC'),(35,'ND'),(36,'OH'),(37,'OK'),(38,'OR'),(39,'PA'),(40,'RI'),(41,'SC'),(42,'SD'),(43,'TN'),(44,'TX'),(45,'UT'),(46,'VT'),(47,'VA'),(48,'WA'),(49,'WV'),(50,'WI'),(51,'WY');
UNLOCK TABLES;

修改了meta-config-basic.html 的php源，QuertDatabase.php
而php的代码是：

<?php
class Employee
{
  public $id;
  public $firstName;
  public $lastName;
  public $middle;
  public $title;
  public $street;
  public $city;
  public $state;
  public $zip;
  public $departmentId;
  public $departmentName;
  public $dateHired;
  public $dateFired;
  public $dob;
  public $rate;
  public $officePhone;
  public $homePhone;
  public $mobilePhone;
  public $email;

};
 class QueryDatabase {

    private   $_db;
    protected $_result;
    public    $results;

    public function __construct() {
        $this->_db = new mysqli('127.0.0.1', 'root' ,'root', '');

        $_db = $this->_db;

        if ($_db->connect_error) {
            die('Connection Error: ' . $_db->connect_error);
        }

        return $_db;
    }

    public function getResults($params) {
        $_db = $this->_db;

        $_result = $_db->query("SELECT company, price, change1, pctChange, lastChange FROM heroes") or
                   die('Connection Error: ' . $_db->connect_error);

        $results = array();

        while ($row = $_result->fetch_assoc()) {
            array_push($results, $row);
        }

        $this->_db->close();

        return $results;
    }
	public static function read ($param) {
    $link1 = mysqli_connect("127.0.0.1", "root", "root",'extjsinaction') ;
	if(mysqli_connect_errno()){
		die ("could not connect:" . mysqli_connect_error());
	}
	 $SQL = "select e.id, e.firstName, e.lastName, e.middle, e.title, e.street, e.city, e.state, e.zip, e.departmentId,	 d.name as departmentName , e.dateHired, e.dateFired, e.dob, e.rate, e.officePhone, e.homePhone, e.mobilePhone,	 e.email 
	 from employees e, departments d where e.departmentId=d.id";

     if (isset($param["id"])) {
        $SQL = $SQL . " and e.id=".$param["id"] ;
     }

     if (isset($param["parent"])) {
        $SQL = $SQL . " and e.departmentId=".$param["parent"];
     }

     $SQL = $SQL ." order by lastname,firstname asc";

     $res = mysqli_query($link1,$SQL) ;
     $employees = array();
     while ($row = mysqli_fetch_array($res)) {
       $employee = new Employee();

       $employee->id = $row['id'];
       $employee->firstName = $row['firstName'];
       $employee->lastName = $row['lastName'];
       $employee->middle = $row['middle'];
       $employee->title = $row['title'];
       $employee->street = $row['street'];
       $employee->city = $row['city'];
       $employee->state = $row['state'];
       $employee->zip = $row['zip'];
       $employee->departmentId = $row['departmentId'];
       $employee->departmentName = $row['departmentName'];
       $employee->dateHired = $row['dateHired'];
       $employee->dateFired = $row['dateFired'];
       $employee->dob = date("m/d/Y", strtotime($row['dob']));
       $employee->rate = $row['rate'];
       $employee->officePhone = $row['officePhone'];
       $employee->homePhone = $row['homePhone'];
       $employee->mobilePhone = $row['mobilePhone'];
       $employee->email = $row['email'];
       array_push($employees, $employee);
     }
	 mysqli_close($link1);
	 
    return $employees;
  }

 }

    $date_format = 'Y-j-m';
   
    function generateData() {
        global $date_format;
        $types = array();
        $data['data'] = array();
        $fields = array();
        $columns = array();
        $defineFields = true;
        $selcol = array('id', 'firstName', 'lastName', 'middle', 'title', 'street', 'city', 'state', 'zip', 'departmentId',	'departmentName' , 'dateHired', 'dateFired', 'dob', 'rate', 'officePhone', 'homePhone', 'mobilePhone','email' );
        for($j=0;$j<19;$j++)
            {
                    $type =  array('data' => 'string', 'editor' => array(
                    'xtype' => 'textfield',
                    'allowBlank' => false));
                    array_push($types, $type);
                    $field = array(
                        'name' => $selcol[$j],
                        'type' => $type['data']
                    );
                    // add any type-specific field attributes
                    if ($type['data'] === 'date') {
                        $field['dateFormat'] = $date_format;
                    }
                    // add the field to the fields list
                    array_push($fields, $field);
                    
                    $col = array(
                        'dataIndex' => $selcol[$j]
                    );
                    // add in column-specific attributes
                    if ($j === 0) {
                        // special config for the id column, fixed width and non-editable
                        $col['text'] = 'ID';
                        $col['width'] = 50;
                    }
                    else {
                        $col['text'] = $selcol[$j].' ('.$type['data'].')';
                        $col['editor'] = $type['editor'];
                        $col['flex'] = 1;
                    }
                    // add in type-specific column attributes
                    switch ($type['data']) {
                        case 'date':
                            $col['xtype'] = 'datecolumn';
                            $col['format'] = $date_format;
                            break;
                        case 'float':
                            $col['xtype'] = 'numbercolumn';
                            $col['format'] = '$0.00';
                            break;
                        case 'bool':
                            //$col['xtype'] = 'checkcolumn';
                            break;
                    }
                    // finally, add the column to the columns list
                    array_push($columns, $col);

            }
        
        $a=new QueryDatabase();
        $data['data'] = $a->read(0);
        // assemble the metadata
        $meta = array();
        $meta['fields'] = $fields;
        //$meta['columns'] = $columns;
        $meta['columns'] = array($columns[0],$columns[1],$columns[2],$columns[3],$columns[4],$columns[5]);//显示的列
        $meta['root'] = 'data';
        $meta['idProperty'] = 'ID';
        $meta['messageProperty'] = 'msg';
        
        // assemble the top-level data object being returned.
        // the data is already in $data['data'] at this point.
        $data['metaData'] = $meta;
        $data['total'] = 50;
        $data['msg'] = 'Success!';
        
        return $data;
    }
 echo json_encode(generateData());

关键是看最后的echo json_encode(generateData()); 这个是把我们的内容json格式了。如果你想了解具体内容是怎么样的，可以在浏览器输入
http://127.0.0.1/ext-5.1.0/build/examples/data/QueryDatabase.php
查看内容。如果没问题，你就使用
http://127.0.0.1/ext-5.1.0/build/examples/data/meta-config-basic.html
看看效果吧。
grid from mysql

jhui123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext5.1.0的data例子改写读数据

#extjs5的例子改写##背景xmapp ，win7 32位，使用php7 有mysql ，extjs5.1##原例子是\ext-5.1.0\build\examples\data\meta-config-basic.htmlmeta-config-basic.html 原来使用meta-config-basic.php动态变化里面的列表和行数。##改写操作我的改写是使用mysql...
复制链接

扫一扫