2013-03-23 5 views
0

Я newbe в додзё, я просто создать макет index.php с вкладки контейнера и вкладка вызывает list.php:Dojo 1.8 сетки внутри вкладки

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Demo: Progammatic Layout</title> 

     <link rel="stylesheet" href="style.css" media="screen"> 
     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen"> 
       <link rel="stylesheet" href="js/dojox/grid/resources/claroGrid.css" media="screen"> 
    </head> 
    <body class="claro"> 
     <div id="appLayout" class="demoLayout"></div> 
     <!-- load dojo and provide config via data attribute --> 
     <script src="js/dojo/dojo.js"></script> 
     <script> 
      require(["dijit/layout/BorderContainer", 
       "dijit/layout/TabContainer", 
       "dijit/layout/ContentPane", 
       "dijit/layout/AccordionContainer", 
       "dijit/layout/AccordionPane", 
       "dojox/grid/DataGrid", 
       "dojox/grid/cells", 
       "dojo/ready", 

       ], 
      function(BorderContainer, TabContainer,ContentPane, AccordionContainer, AccordionPane, DataGrid, gridCells, ready){ 
       ready(function(){ 
        // create the BorderContainer and attach it to our appLayout div 
        var appLayout = new BorderContainer({ 
         design: "headline" 
        }, "appLayout"); 


        // create the TabContainer 
        var contentTabs = new TabContainer({ 
         region: "center", 
         id: "contentTabs", 
         tabPosition: "bottom", 
         "class": "centerPanel" 
        }); 

        // add the TabContainer as a child of the BorderContainer 
        appLayout.addChild(contentTabs); 

        // create and add the BorderContainer edge regions 
        var header= new ContentPane({ 
         region: "top", 
         "class": "edgePanel", 
         content: "Header content (top)", 
         splitter: true 
        }); 



        /* Menú */ 
        var contentMenu = new ContentPane({ 
         region: "left", 
         id: "leftCol", 
         "class": "edgePanel", 
         content: "", 
         padding:0, 
         splitter: true 
        }); 

        var aContainer=new AccordionContainer({style:"height: 300px"}, "markup"); 
         aContainer.addChild(new ContentPane({ 
          title: "Contact", 
          content: "Hi!" 
         })); 
         aContainer.addChild(new ContentPane({ 
          title:"Work", 
          content:"Hi how are you?" 
         })); 
        contentMenu.addChild(aContainer); 



        **var tabs=new ContentPane({ 
         href: "list.php", 
         title: "Lista" 
        });** 
        contentTabs.addChild(tabs); 



        appLayout.addChild(header); 
        appLayout.addChild(contentMenu); 

        appLayout.addChild(contentTabs); 






         //aContainer.startup(); 
        /*contentAcordion= new AccordionContainer({ 
         min-size:20, 
         region:'leading, 
         splitter:true, 
         id:'leftAccordion' 
        });*/ 

        // start up and do layout 
        appLayout.startup(); 










        var cells = [ 
         [ 
         new gridCells.RowIndex({ width: "10%" }), 
         { name: "Column 1", field: "col1", width: "30%" }, 
         { name: "Column 2", field: "col2", width: "30%" }, 
         { name: "Column 3", field: "col3", width: "30%" } 
         ] 
        ]; 

        gridLayout = [{ 
          type: "dojox.grid._CheckBoxSelector" 
         }, 
         cells 
        ]; 

        var data = [ 
         { id: 0, col1: "normal", col2: false, col3: "new", col4: "But are not followed by two hexadecimal"}, 
         { id: 1, col1: "important", col2: false, col3: "new", col4: "Because a % sign always indicates"}, 
         { id: 2, col1: "important", col2: false, col3: "read", col4: "Signs can be selectively"}, 
         { id: 3, col1: "note", col2: false, col3: "read", col4: "However the reserved characters"}, 
         { id: 4, col1: "normal", col2: false, col3: "replied", col4: "It is therefore necessary"}, 
         { id: 5, col1: "important", col2: false, col3: "replied", col4: "To problems of corruption by"}, 
         { id: 6, col1: "note", col2: false, col3: "replied", col4: "Which would simply be awkward in"} 
        ]; 

        var grid = new DataGrid({ 
        //store: test_store, 
        structure: cells, 
        rowSelector: "20px", 
        "class": "grid" 
        }, "grid"); 
        grid.startup(); 
       }); 
      }); 
     </script> 
    </body> 
</html> 

Он работает успешно, и загрузите list.php.

В list.php У меня есть код для создания сетки, если я выполнить индивидуально работает и успешно показывают сетки:

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Demo: Progammatic Layout</title> 

     <link rel="stylesheet" href="style.css" media="screen"> 
     <link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen"> 
       <link rel="stylesheet" href="js/dojox/grid/resources/claroGrid.css" media="screen"> 
    </head> 
    <body class="claro"> 
     <div id="grid" class="demoLayout"></div> 

     <!-- load dojo and provide config via data attribute --> 
     <script src="js/dojo/dojo.js"></script> 
     <script> 
      require([ 
       "dojox/grid/DataGrid", 
       "dojox/grid/cells", 
       "dojo/store/Memory", 
       "dojo/data/ObjectStore", 
       "dojo/_base/array", 
       "dojo/_base/lang", 
       "dojox/grid/_CheckBoxSelector", 
       "dojo/domReady!" 
      ], function(DataGrid, gridCells, Memory, ObjectStore, baseArray, lang, _CheckBoxSelector){ 
       var cells = [ 
        [ 
         new gridCells.RowIndex({ width: "10%" }), 
         { name: "Column 1", field: "col1", width: "30%" }, 
         { name: "Column 2", field: "col2", width: "30%" }, 
         { name: "Column 3", field: "col3", width: "30%" } 
        ],[ 
         { name: "Column 4", field: "col4", colSpan: 4 } 
        ] 
       ]; 

       gridLayout = [{ 
        // First, our view using the _CheckBoxSelector custom type 
         type: "dojox.grid._CheckBoxSelector" 
        }, 
        cells 
       ]; 

       var data = [ 
        { id: 0, col1: "normal", col2: false, col3: "new", col4: "But are not followed by two hexadecimal"}, 
        { id: 1, col1: "important", col2: false, col3: "new", col4: "Because a % sign always indicates"}, 
        { id: 2, col1: "important", col2: false, col3: "read", col4: "Signs can be selectively"}, 
        { id: 3, col1: "note", col2: false, col3: "read", col4: "However the reserved characters"}, 
        { id: 4, col1: "normal", col2: false, col3: "replied", col4: "It is therefore necessary"}, 
        { id: 5, col1: "important", col2: false, col3: "replied", col4: "To problems of corruption by"}, 
        { id: 6, col1: "note", col2: false, col3: "replied", col4: "Which would simply be awkward in"} 
       ]; 

       var objectStore = new Memory({data:data}); 

       var test_store = new ObjectStore({objectStore: objectStore}); 

       // create the grids. 
       var grid = new DataGrid({ 
        store: test_store, 
        structure: cells, 
        rowSelector: "20px", 
        "class": "grid" 
       }, "grid"); 
       grid.startup(); 

      }); 
     </script> 
    </body> 
</html> 

Но index.php сетка не отображается, если я позвоню, как я могу это сделать? почему причина, ни один javascript не выполняется?

ответ

1

Я собираюсь отойти от «как вы решаете текущую проблему» и попытаетесь ответить «как вы удовлетворите свое требование».

Для этого я предполагаю, что содержимое вашей сетки в конечном итоге будет динамичным и будет поставляться по требованию. Если это так, поместите весь код построения сетки в исходную загрузку страницы и используйте xhrGet для извлечения только данных для заполнения объекта данных (но см. Более поздний абзац, чтобы сохранить ненужное кодирование).

данные должны быть доставлены из вашего кода PHP в JSON строковой объект (построить массив для доставки из PHP затем использовать json_encode(utf8_encode(data_array))

IIRC (его было какое-то время) Вы просто должны быть в состоянии пройти URL-адрес в качестве параметра к объекту данных, который обслуживает сетку, и если данные возврата находятся в правильном формате, он должен загружать и отображать его автоматически.

посмотреть на itemFileReadStore - dojotoolkit.org/reference-guide/1.8/dojo/data /ItemFileReadStore.html

Вы прекрасно разбираетесь в exsmpl e примерно на полпути вниз по странице с использованием сетки. Если вы намерены отправить данные обратно на сервер или someghow разрешить его изменение в клиенте, вы можете вместо этого использовать itemFileWriteSore. Лично я всегда использовал его, на всякий случай, когда он мне нужен. Накладные расходы минимальны.

Если ваш код, вероятно, захочет перечитать данные с сеткой после загрузки страницы, вам нужно будет пропустить еще пару обручей, но это все еще довольно легко сделать.

Предостережение .. Я думаю в Zend 1.11, dojo 1.4 здесь ... но принципы будут одинаковыми ... его основополагающим для dojo, поэтому я сомневаюсь, что они значительно изменили хранилища данных объектов :)

+0

Я пытаюсь сделать бэкэнда. В будущем мне понадобится загрузить с сервера MySQL, но теперь это не вопрос Моя проблема заключается в том, как я могу структурировать программу. У меня есть различные разделы в этом бэкэнде для администрирования различных объектов БД. Эти объекты имеют список и форму элемента редактирования с вкладками. Моя идея загружает файл для любого раздела, например: contacts.php. В этом файле я хотел бы поместить код для списка этих контактов и форму для редактирования одного элемента при выборе одного из этих элементов. Это неверный способ? Как вы это делаете? Вы знаете сайт, чтобы рассказать, как структура сайта Dojo? – David

+0

Это гораздо более широкий вопрос, выходящий за рамки исходной программы. Я боюсь, что все, на что я наклонился, произошло, сделав это и уточнив мою технику, поэтому я не очень рекомендую рекомендовать учебные сайты, но документация Dojo (http://dojotoolkit.org/documentation/) очень хороша, и сайт заполненные учебными пособиями и примерами.Я предлагаю вам начать работу и работать наружу. – Radiotrib

+0

David - посмотрите на list.php - начиная с определения objectStore. Для заполнения хранилища используются локально сгенерированные данные, но с помощью itemFileWriteStore можно указать URL вместо исходных данных. Для тестирования URL-адрес может быть только текстовым файлом, содержащим предварительно определенный json, который извлекается хранилищем. Магазин будет получать данные, вызывая URL. Позже в разработке вы можете заменить вызов json-файла вызовом php-файла, который динамически генерирует json ... Надеюсь, это имеет смысл, иногда мои объяснения немного смущены. – Radiotrib