-1

我正在尝试在布局浏览器 u 中显示 extjs 网格和树,树响应数据显示在 extjs 网格和网格刷新动态中,我的目标是当我单击树叶时,树叶数据显示在 extjs 网格中然后网格刷新 automaticle 这是 layout-browser.js 代码

        Ext.Loader.setConfig({enabled: true});

        Ext.Loader.setPath('Ext.ux', '../ux');

        Ext.require([
            'Ext.tip.QuickTipManager',
            'Ext.container.Viewport',
            'Ext.layout.*',
            'Ext.form.Panel',
            'Ext.form.Label',
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.tree.*',
            'Ext.selection.*',
            'Ext.tab.Panel',
            'Ext.ux.layout.Center'  
        ]);

        //
        // This is the main layout definition.
        //
        Ext.onReady(function(){

            Ext.tip.QuickTipManager.init();

            // This is an inner body element within the Details panel created to provide a "slide in" effect
            // on the panel body without affecting the body's box itself.  This element is created on
            // initial use and cached in this var for subsequent access.
            var detailEl;

            // Gets all layouts examples
            var layoutExamples = [];
            Ext.Object.each(getBasicLayouts(), function(name, example) {
                layoutExamples.push(example);
            });

            Ext.Object.each(getCombinationLayouts(), function(name, example){
                layoutExamples.push(example);
            });

            Ext.Object.each(getCustomLayouts(), function(name, example){
                layoutExamples.push(example);
            });

            // This is the main content center region that will contain each example layout panel.
            // It will be implemented as a CardLayout since it will contain multiple panels with
            // only one being visible at any given time.
        Ext.define('ImageModel', {
                extend: 'Ext.data.Model',
                fields: ['patent_id', 'Patent_number', 'Title','Abstract','Filing_Year','Assignee']
            });
            var store1 = Ext.create('Ext.data.JsonStore', {
                model: 'ImageModel',
                actionMethods:{read:'GET'},
                proxy: {
                    type: 'ajax',
                    url: 'json.php',
                    reader: {
                        type: 'json',
                        root: 'results'
                    }
                }
            });
            store1.load();


            var store = Ext.create('Ext.data.TreeStore', {
                root: {
                    expanded: true
                },
                proxy: {
                    type: 'ajax',
                    url:'get-nodes.php',
                    actionMethods: 'POST'
                }
            });

            // Go ahead and create the TreePanel now so that we can use it below
             var treePanel = Ext.create('Ext.tree.Panel', {
                id: 'tree-panel',
                title: 'Sample Layouts',
                region:'north',
                split: true,

                minSize: 150,
                rootVisible: false,
                autoScroll: true,
                store: store
            });

            // Assign the changeLayout function to be called on tree node click.
            treePanel.getSelectionModel().on('select', function(selModel, node) {
            var selectedNode = treePanel.getSelectionModel().getSelection();
                if (node.get('leaf')) {
                           // Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');

                        //var bd = Ext.getCmp('details-panel').body;




                   // detailsPanel.update(Ext.getDom(node.getId() ).innerPHP).slideIn('l', {stopAnimation:true,duration: 200});
                Ext.Ajax.request({

                             url: 'http://localhost/Ext.ux/examples/layout-browser/json.php',

                                        method:'GET',

                                        params: {

                                        id : selectedNode[0].data.id
                                        },

                          success: function(response){
                                                            //var store1 = getCustomerDataStoreStore;
                                                            store1.loadData(response);
                                                            detailsPanel.getView().refresh(); 
                                                        },
                                                       // jsonData : Ext.JSON.encode(queryform.getValues())

                             // success: function(response){
                              // var id = response.responseText;

                                                    //detailsPanel.getView().refresh();                  
                                                    // //selectedNode[0].expand();                                  

                                            // }
                                        });

                }
            });

            // This is the Details panel that contains the description for each example layout.

               var detailsPanel = Ext.create('Ext.grid.Panel', {
                width:587,
                height:363,
                collapsible:true,
               id: 'details-panel',
                title: 'Details',
                region: 'center',
                bodyStyle: 'padding-bottom:15px;background:#eee;',
                autoScroll: true,

                store: store1,
                multiSelect: true,
                viewConfig: {
                    emptyText: 'No images to display'
                },

                columns: [{
                    text: 'Patent ID',
                    flex: 50,
                    dataIndex: 'patent_id'
                },{
                    text: 'Patent Number',
                    flex: 50,
                    dataIndex: 'Patent_number'
                },{
                    text: 'TITLE',
                    flex: 50,
                    dataIndex: 'Title'
                },{
                    text: 'Abstract',
                    flex: 50,
                    dataIndex: 'Abstract'
                },{
                    text     : 'Filing Year',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'Filing_Year'
                },{
                    text: 'Assignee',
                    flex: 50,
                    dataIndex: 'Assignee'
                }]
            });


            // Finally, build the main layout once all the pieces are ready.  This is also a good
            // example of putting together a full-screen BorderLayout within a Viewport.
            Ext.create('Ext.Viewport', {
                layout: 'border',
                title: 'Ext Layout Browser',
                items: [{
                    xtype: 'box',
                    id: 'header',
                    region: 'north',
                    html: '<h1> Ext.Layout.Browser</h1>',
                    height: 30
                },{
                    layout: 'border',
                    id: 'layout-browser',
                    region:'west',
                    border: false,
                    split:true,
                    margins: '2 0 5 5',
                    width: 275,
                    minSize: 100,
                    maxSize: 500,
                    items: [treePanel]
                }, 
                    detailsPanel
                ],
                renderTo: Ext.getBody()
            });
        });

这是php代码

    <?php


    //if(isset($_GET['id']))
    //{

        //$node_number = $_GET['id'];
    //}
    //else{

     //$node_number='6';
    //}
    $node_number = $_GET['id'];
    //echo $node_number;
            $conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
            $db = mysql_select_db ("zan") or die (mysql_error ());
          //echo $var = "SELECT * FROM patent_table where patent_id= $node_number";

            $result=mysql_query ("SELECT * FROM patent_table where patent_id in(SELECT patent_id FROM grid_mapping WHERE node_id='" .$node_number. "')") or die (mysql_error ());
            //$result=mysql_query ("SELECT * FROM patent_table where patent_id in(SELECT patent_id FROM grid_mapping WHERE node_id='6')") or die (mysql_error ());
            //$result=mysql_query ("SELECT * FROM patent_table ") or die (mysql_error ());

            $num_rows = mysql_num_rows($result);

            $list_items = array();

            while ($row = mysql_fetch_array($result))
            {

                $item = array(
                'patent_id' => $row['patent_id'],
                'Patent_number' => $row['patent_num'],
                'Title' => $row['title'],
                'Abstract' => $row['abstract'],
                'Filing_Year' => $row['filing_year'],
                'Assignee' => $row['assignee']
                );
               $list_items[] =  $item;
            }

            //echo json_encode($data);
            echo '{total:' . $num_rows . ' , results: ' . json_encode($list_items) . '}';


            // $conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
            // $db = mysql_select_db ("zan") or die (mysql_error ());


             // $iid = isset( $_GET['id'] ) ? $_GET['id'] : '';
            // //$result=mysql_query ("SELECT * FROM grid") or die (mysql_error ());
            // $result=mysql_query ("SELECT id,name,parent FROM node_table WHERE id = '".$iid."'") or die (mysql_error ());

            // $num_rows = mysql_num_rows($result);

            // $list_items = array();

            // while ($row = mysql_fetch_array($result))
            // {
                // $item = array(
                // 'Id' => $row['id'],
                // 'Name' => $row['name'],
                // 'Parent' => $row['parent']

                // );
               // $list_items[] =  $item;
            // }
            // echo $list_items;

            // //echo json_encode($data);
           // // echo '{total:' . $num_rows . ' , results: ' . json_encode($list_items) . '}';
         ?>

在 .php 代码中的“id”是树帖 id 请帮助我

4

1 回答 1

0

下面的代码是 .js 文件

            Ext.Loader.setConfig({enabled: true});

            Ext.Loader.setPath('Ext.ux', '../ux');

            Ext.require([
                'Ext.tip.QuickTipManager',
                'Ext.container.Viewport',
                'Ext.layout.*',
                'Ext.form.Panel',
                'Ext.form.Label',
                'Ext.grid.*',
                'Ext.data.*',
                'Ext.tree.*',
                'Ext.selection.*',
                'Ext.tab.Panel',
                'Ext.ux.layout.Center'  
            ]);

            //
            // This is the main layout definition.
            //
            Ext.onReady(function(){

                Ext.tip.QuickTipManager.init();



                var store1 = Ext.create('Ext.data.JsonStore', {
                    fields: ['patent_id', 'Patent_number', 'Title','Abstract','Filing_Year','Assignee'],
                    autoLoad:false,
                    proxy: {
                        type: 'ajax',
                        reader: {
                            root: 'results'
                        }
                    }
                });



                var store = Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true
                    },
                    proxy: {
                        type: 'ajax',
                        url:'get-nodes.php',
                        actionMethods: 'POST'
                    }
                });

                // Go ahead and create the TreePanel now so that we can use it below
                 var treePanel = Ext.create('Ext.tree.Panel', {
                    id: 'tree-panel',
                    title: 'Sample Layouts',
                    region:'north',
                    split: true,        
                    minSize: 150,
                    rootVisible: false,
                    autoScroll: true,
                    store: store
                    //handler: function(n) {
               // Ext.Msg.alert('Navigation Tree Click');
            //},


                });

                // Assign the changeLayout function to be called on tree node click.
                treePanel.getSelectionModel().on('select', function(selModel, record) {
                var selectedNode = treePanel.getSelectionModel().getSelection();
                    if (record.get('leaf')) {
                                store1.proxy.url='json.php?id=' + selectedNode[0].data.id;
                                store1.load();


                     }
                 });

                // This is the Details panel that contains the description for each example layout.
                var tabPanel = Ext.create('Ext.tab.Panel', {
                id: 'tabs-nested-layouts-panel',
                title: 'TabPanel with Nested Layouts',
                //plain: true,
                     region: 'center',
                     margins: '0 5 5 5',
                     activeTab: 3,
                     items: [{
                         title: 'Insights',
                         bodyStyle: 'padding:10px;',
                            items:[{
                                xtype: 'htmleditor',
                                autoScroll: true,
                                width    : 500,
                                height:500,
                                anchor: '100%'
                                    }]
                     },{
                         title: 'IP Radar',
                         bodyStyle: 'padding:10px;',
                         html: 'Coming Soon.'
                     },{
                         title: 'Compeitor Radar',
                         bodyStyle: 'padding:10px;',
                         html: 'Coming Soon.'
                     },{
                                 // A common mistake when adding grids to a layout is creating a panel first,
                                 // then adding the grid to it.  GridPanel (xtype:'grid') is a Panel subclass,
                                 // so you can add it directly as an item into a container.  Typically you will
                                 // want to specify layout:'fit' on GridPanels so that they'll size along with
                                 // their container and take up the available space.
                                 title: 'Technology Radar',
                                 xtype: 'grid',
                                 layout: 'fit',
                                 store: store1,
                                 viewConfig: {
                                            emptyText: 'No Data to Display'
                                                },
                                 columns: [
                                     {
                        text: 'Patent ID',
                        flex: 50,
                        dataIndex: 'patent_id'
                    },{
                        text: 'Patent Number',
                        flex: 50,
                        dataIndex: 'Patent_number'
                    },{
                        text: 'TITLE',
                        flex: 50,
                        dataIndex: 'Title'
                    },{
                        text: 'Abstract',
                        flex: 50,
                        dataIndex: 'Abstract'
                    },{
                        text     : 'Filing Year',
                        width    : 75,
                        sortable : true,
                        dataIndex: 'Filing_Year'
                    },{
                        text: 'Assignee',
                        flex: 50,
                        dataIndex: 'Assignee'
                    }
                                 ],
                                 stripeRows: true
                             },{
                         title: 'Customize Views',
                         bodyStyle: 'padding:10px;',
                         html: 'Coming Soon.'
                     }
                             ]


                 });

                   // var detailsPanel = Ext.create('Ext.grid.Panel', {
                    // width:587,
                    // height:363,
                    // collapsible:true,
                  // renderTo: 'details-panel',
                    // title: 'Details',
                    // region: 'center',
                    // bodyStyle: 'padding-bottom:15px;background:#eee;',
                    // autoScroll: true,

                    // store: store1,
                    // multiSelect: true,
                    // viewConfig: {
                        // emptyText: 'No images to display'
                    // },

                    // columns: [{
                        // text: 'Patent ID',
                        // flex: 50,
                        // dataIndex: 'patent_id'
                    // },{
                        // text: 'Patent Number',
                        // flex: 50,
                        // dataIndex: 'Patent_number'
                    // },{
                        // text: 'TITLE',
                        // flex: 50,
                        // dataIndex: 'Title'
                    // },{
                        // text: 'Abstract',
                        // flex: 50,
                        // dataIndex: 'Abstract'
                    // },{
                        // text     : 'Filing Year',
                        // width    : 75,
                        // sortable : true,
                        // dataIndex: 'Filing_Year'
                    // },{
                        // text: 'Assignee',
                        // flex: 50,
                        // dataIndex: 'Assignee'
                    // }]
                // });


                // Finally, build the main layout once all the pieces are ready.  This is also a good
                // example of putting together a full-screen BorderLayout within a Viewport.
                Ext.create('Ext.Viewport', {
                    layout: 'border',
                    title: 'Ext Layout Browser',


                    items: [{
                        xtype: 'box',
                        id: 'header',
                        region: 'north',
                        html: '<h1> Ext.Layout.Browser</h1>',
                        height: 30
                    },{
                        layout: 'border',
                        id: 'layout-browser',
                        region:'west',
                        border: false,
                        split:true,
                        margins: '2 0 5 5',
                        width: 275,
                        minSize: 100,
                        maxSize: 500,
                        items: [treePanel]
                    }, 
                        tabPanel
                    ],
                    renderTo: Ext.getBody()
                });
            });

这段代码是 json.php

<?php


//if(isset($_GET['id']))
//{

    $node_number = $_GET['id'];
//}

//$node_number = $_GET['6'];
//echo $node_number;
        $conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
        $db = mysql_select_db ("zan") or die (mysql_error ());
      //echo $var = "SELECT * FROM patent_table where patent_id= $node_number";

        $result=mysql_query ("SELECT * FROM patent_table where patent_id in(SELECT patent_id FROM grid_mapping WHERE node_id='" .$node_number. "')") or die (mysql_error ());
        //$result=mysql_query ("SELECT * FROM patent_table where patent_id in(SELECT patent_id FROM grid_mapping WHERE node_id='6')") or die (mysql_error ());
        //$result=mysql_query ("SELECT * FROM patent_table ") or die (mysql_error ());

        $num_rows = mysql_num_rows($result);

        $list_items = array();

        while ($row = mysql_fetch_array($result))
        {

            $item = array(
            'patent_id' => $row['patent_id'],
            'Patent_number' => $row['patent_num'],
            'Title' => $row['title'],
            'Abstract' => $row['abstract'],
            'Filing_Year' => $row['filing_year'],
            'Assignee' => $row['assignee']
            );
           $list_items[] =  $item;
        }
    // echo  $list_items['href'] = 'layout-browser.php?ptd='.$node_number;
    //  echo $list_items['hrefTarget']='layout-browser.php?ptd='.$node_number;
        //echo json_encode($data);
        echo '{total:' . $num_rows . ' , results: ' . json_encode($list_items) . '}';


        // $conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
        // $db = mysql_select_db ("zan") or die (mysql_error ());


         // $iid = isset( $_GET['id'] ) ? $_GET['id'] : '';
        // //$result=mysql_query ("SELECT * FROM grid") or die (mysql_error ());
        // $result=mysql_query ("SELECT id,name,parent FROM node_table WHERE id = '".$iid."'") or die (mysql_error ());

        // $num_rows = mysql_num_rows($result);

        // $list_items = array();

        // while ($row = mysql_fetch_array($result))
        // {
            // $item = array(
            // 'Id' => $row['id'],
            // 'Name' => $row['name'],
            // 'Parent' => $row['parent']

            // );
           // $list_items[] =  $item;
        // }
        // echo $list_items;

        // //echo json_encode($data);
       // // echo '{total:' . $num_rows . ' , results: ' . json_encode($list_items) . '}';
     ?>

这是上面代码的答案

于 2012-12-15T09:21:05.273 回答