Ext.js 4 Fenster mit Formular-Cals-Servlet, das JSON zurückgibt, aber das Gridpanel nicht füllen kann

Question

Ich verwende Ext.js 4 mit MVC. Ich habe ein Fenster, das erscheint, und fragt den Benutzer nach einigen Kriterien. Dieses Fenster ruft ein Servlet auf, das die Daten als JSON zurückgibt und dann ein Gitter auffüllen sollte. Ich kann durch Firefly sehen, dass das JSON-Objekt zurückgegeben wird. Das Raster wird jedoch nicht ausgefüllt. Der Grund ist, dass ein nachfolgender Aufruf an das Servlet gemacht wird. Dies liegt daran, dass ich die URL an zwei Stellen angegeben habe. Ich weiß, das ist falsch, aber wenn einer der beiden weggelassen wird, erhalte ich Fehlermeldungen.

Dies ist app/controller/PSLocators.js

Ext.define('MyApp.controller.PSLocators', { 
    extend: 'Ext.app.Controller', 
    stores: [ 'PSLocators' ], 
    models: [ 'PSLocator' ], 
    views : [ 'pslocator.List' ] 
}); 

Dies ist app/Modell/PSLocator.js

Ext.define('MyApp.model.PSLocator', 
{ 
    extend: 'Ext.data.Model', 
    fields: 
    [ 
     'id', 
     'name', 
     'address', 
     'city', 
     'state', 
     'zip', 
    ] 
}); 

Dies ist app/store/PSLocators.js. Dies hat die erste der URLs. Dies ist der, der keine Daten zurückgibt. Ich glaube nicht, dass ich den Proxy haben {} hier, aber wenn ich den Proxy löschen {} Ich erhalte die Fehlermeldung

uncaught exception: [Exception... "'You are using a ServerProxy but have not supplied it with a url.' when calling method: [nsIDOMEventListener::handleEvent]" 
nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" 
location: "JS frame :: chrome://firebug/content/net/spy.js :: callPageHandler :: line 812" data: no]" 


Ext.define('MyApp.store.PSLocators', { 
    extend: 'Ext.data.Store', 
    model: 'MyApp.model.PSLocator', 
    autoLoad: false, // see also activate() in grid panel 
    sortOnLoad: false, // sorted by SAS 
    proxy: 
    { 
     type: 'ajax', 
     url: MyGlobalData.contextPath + '/PSLocator', 
     reader: 
     { 
      type: 'json', 
      root: 'data', // the name of the array within the JSON dataset 
      totalProperty: 'results', 
      successProperty: 'success' 
     } 
    } 
}); 

Dies ist app/view/pslocator/List.js. Dies hat die zweite der URLs. Diese URL gibt die Daten korrekt als JSON zurück. Wenn ich die URL löschen erhalte ich die Fehlermeldung „abgefangene Ausnahme: keine URL angegeben“

Ext.define('MyApp.view.pslocator.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias : 'widget.pslocatorlist', 
    store : 'PSLocators', 
    title : 'Store Locator', 
    id : 'pslocator.List', 

    autoScroll: true, 
    height: 400, 
    columnLines: true, 

    initComponent: function() 
    { 
     this.columns = [ 
      {header: 'ID'   , dataIndex: 'id'  , flex: .05 , align: 'center' }, 
      {header: 'Name'  , dataIndex: 'name'  , flex: .20 , align: 'left' }, 
      {header: 'Address'  , dataIndex: 'address' , flex: .20 , align: 'left' }, 
      {header: 'City'  , dataIndex: 'city'  , flex: .10 , align: 'left' }, 
      {header: 'State'  , dataIndex: 'state'  , flex: .05 , align: 'center' }, 
      {header: 'Zip'   , dataIndex: 'zip'  , flex: .05 , align: 'center' } 
     ]; 

     this.callParent(arguments); 
    }, 

    listeners: 
    { 
     activate: function() 
     { 
      this.un('activate', arguments.callee); 
      var win = new Ext.Window(
      { 
       id: 'id-pslocator-window', 
       title: 'Show locations near which store?', 
       items: [ 
       { 
        xtype  : 'form', 
        id   : 'id-pslocator-form', 
        bodyPadding: 5, 
        width  : 500, 
        height  : 125, 
        autoScroll : false, 

        // The form will submit an AJAX request to this URL when submitted 
        url: MyGlobalData.contextPath + '/PSLocator', 

        layout: 'auto', 

        defaults: 
        { 
         anchor: '100%' 
        }, 

        items: [ 
        { 
         xtype  : 'textfield', 
         fieldLabel : 'Store number', 
         name  : 'pStoreNumber', 
         labelWidth : 200, 
         width  : 300, // includes labelWidth 
         allowBlank : false, 
         regex  : /^([0-9]+)([ ]*)$/, 
         regexText : 'Must be a single unsigned integer.', 
        } 
       ], 

       // Reset and Submit buttons 
       buttons: [ 
        { 
         text: 'Reset', 
         handler: function() 
         { 
          this.up('form').getForm().reset(); 
         } 
        }, 
        { 
         text: 'Submit', 
         formBind: true, //only enabled once the form is valid 
         disabled: true, 
         handler: function() 
         { 
          var form = this.up('form').getForm(); 
          if (form.isValid()) 
          { 
           form.submit(
           { 
            success: function(form, action) 
            { 
             console.log('In success function'); 
             var myGrid = Ext.getCmp('id-pslocator-panel'); 
             console.log('myGrid = ' + myGrid); 
             var myStore = myGrid.getStore(); 
             console.log('myStore = ' + myStore); 
             myStore.load(); /* requires store be defined as above */ 
             myGrid.getView().refresh(); 

             var myPopup = Ext.getCmp('id-pslocator-window'); 
             myPopup.destroy(); 

            } // end success function 
           }); // end form submit 
          } // end if is valid 
         } // end handler 
        } // end submit 
       ] // end buttons 
       }] // end items 
      }); // end win 

      win.show(); 
      // this.store.load(); 
     } 
    } 
}); // Ext.define 

Kann jemand bitte helfen, oder zeigen Sie mir ein Arbeitsbeispiel (zur Erinnerung:. Ich bin versucht, die Verwendung der MVC-Architektur)

Answer 1

Sie sollten die Proxy-Konfiguration im Modell und nicht in ExtJS4 speichern. Es sieht auch so aus, als wollten Sie nur die Suche in Ihren Geschäften auf eine bestimmte Filialnummer beschränken. Sie sollten dazu keine POST-Anfrage über das Formular senden müssen. Sie sollten Ihrem Geschäft einen Filter hinzufügen, damit der Server die korrekten Daten zurückgeben kann.

HAFTUNGSAUSSCHLUSS: Ich habe diesen Code nicht getestet, aber es sollte ausreichen, um Sie in Gang zu bringen.

app/Modell/PSLocator.js

Ext.define('MyApp.model.PSLocator', 
{ 
    extend: 'Ext.data.Model', 
    fields: 
    [ 
     'id', 
     'name', 
     'address', 
     'city', 
     'state', 
     'zip', 
    ], 
    proxy: 
    { 
     type: 'ajax', 
     url: MyGlobalData.contextPath + '/PSLocator', 
     reader: 
     { 
      type: 'json', 
      root: 'data', // the name of the array within the JSON dataset 
      totalProperty: 'results', 
      successProperty: 'success' 
     } 
    } 
}); 

app/store/PSLocators.js

Ext.define('MyApp.store.PSLocators', { 
    extend: 'Ext.data.Store', 
    model: 'MyApp.model.PSLocator', 
    autoLoad: false, // see also activate() in grid panel 
    sortOnLoad: false, // sorted by SAS, 
    remoteFilter: true // Needed so filter changes will go to the server 
}); 

app/view/pslocator/List.js

Ext.define('MyApp.view.pslocator.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias : 'widget.pslocatorlist', 
    store : 'PSLocators', 
    title : 'Store Locator', 
    id : 'pslocator.List', 

    autoScroll: true, 
    height: 400, 
    columnLines: true, 

    initComponent: function() 
    { 
     this.columns = [ 
      {header: 'ID'   , dataIndex: 'id'  , flex: .05 , align: 'center' }, 
      {header: 'Name'  , dataIndex: 'name'  , flex: .20 , align: 'left' }, 
      {header: 'Address'  , dataIndex: 'address' , flex: .20 , align: 'left' }, 
      {header: 'City'  , dataIndex: 'city'  , flex: .10 , align: 'left' }, 
      {header: 'State'  , dataIndex: 'state'  , flex: .05 , align: 'center' }, 
      {header: 'Zip'   , dataIndex: 'zip'  , flex: .05 , align: 'center' } 
     ]; 

     this.callParent(arguments); 
    } 
}); // Ext.define 

app/view/pslocator/Window.js

Ext.define('MyApp.view.pslocator.Window', { 
    extend: 'Ext.Window', 
    alias: 'widget.storeselector', 
    id: 'id-pslocator-window', 
    title: 'Show locations near which store?', 
    items: [ 
    { 
     xtype  : 'form', 
     id   : 'id-pslocator-form', 
     bodyPadding: 5, 
     width  : 500, 
     height  : 125, 
     autoScroll : false, 

     // The form will submit an AJAX request to this URL when submitted 
     url: MyGlobalData.contextPath + '/PSLocator', 

     layout: 'auto', 

     defaults: 
     { 
      anchor: '100%' 
     }, 

     items: [ 
     { 
      xtype  : 'textfield', 
      fieldLabel : 'Store number', 
      name  : 'pStoreNumber', 
      labelWidth : 200, 
      width  : 300, // includes labelWidth 
      allowBlank : false, 
      regex  : /^([0-9]+)([ ]*)$/, 
      regexText : 'Must be a single unsigned integer.', 
     } 
    ], 

    // Reset and Submit buttons 
    buttons: [ 
     { 
      text: 'Reset', 
      handler: function() 
      { 
       this.up('form').getForm().reset(); 
      } 
     }, 
     { 
      text: 'Submit', 
      formBind: true, //only enabled once the form is valid 
      disabled: true, 
      handler: function() 
      { 
       var form = this.up('form').getForm(); 
       if (form.isValid()) 
       { 
        this.fireEvent('storeselected', form.getValues().pStoreNumber); 
        this.destroy(); 
       } // end if is valid 
      } // end handler 
     } // end submit 
    ] // end buttons 
    }] // end items 
}); 

app/Controller/PSLocators.js

Ext.define('MyApp.controller.PSLocators', { 
    extend: 'Ext.app.Controller', 
    stores: [ 'PSLocators' ], 
    models: [ 'PSLocator' ], 
    views : [ 'pslocator.List' ], 
    init: function() { 
     this.control({ 
      'pslocatorlist': { 
       activate: this.showStoreSelector 
      }, 
      'storeselector': { 
       storeselected: this.updatePSLocatorStore 
      } 
     ); 
    }, 

    showStoreSelector: function() 
    { 
     var win = Ext.create('MyApp.view.pslocator.Window'); 
     win.show(); 
    }, 

    updatePSLocatorStore: function(storeId) { 
     this.getPSLocationsStore().filter('id', storeId); 
     this.getPSLocationsStore().load(); // I can't remember if this step is needed. 
    } 
}); 

Ich denke, das ist etwa so gut ich es aus der Lektüre über den Code bekommen . Es sollte Ihnen eine Vorstellung davon geben, wie Sie die MVC-Technik zu Ihrem Vorteil nutzen können und Sie hoffentlich auf den richtigen Weg bringen.