-1

extjsグリッドとツリーをレイアウトで表示しようとしています-ブラウザu、ツリー応答データはextjsグリッドとグリッド更新ダイナミクルに表示されます、、私の目的は、ツリーリーフをクリックすると、リーフデータがextjsグリッドに表示されてからグリッドに表示されることです自動マチクルを更新しますこれは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ですplseは私を助けます

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 に答える