Ext JS应用页面空白求助：无法显示视图，需实现数据库网格

Let's walk through the issues causing your blank page and get your app up and running, then we'll cover the next steps for adding your database grid.

First: Fix the Layout Error Breaking Rendering #

The most immediate problem is in your Exemple.View component. You’re using a border layout for the panel, but haven’t assigned a region property to its child item. Ext JS’s border layout requires every direct child to have a region (north/south/east/west/center) to position it correctly—without this, the component fails to render, resulting in a blank page.

Update the Exemple.View Layout #

Either add the required region property, or switch to a simpler layout like fit (which makes the child fill the parent panel):

Ext.define('rgpd.view.Exemple.View', {
    extend: 'Ext.Panel',
    xtype: 'exemple',
    id: "exemple",
    title: "Exemple",
    // Use fit layout for simplicity (child fills the panel)
    layout: 'fit',
    padding:20,
    items: [
        {
            title: 'Hello Ext',
            html: 'Hello! Welcome to Ext JS.'
            // If you still want border layout, uncomment this:
            // region: 'center'
        }
    ]
});

Second: Verify Controller and Component Loading #

Your controller looks mostly correct, but let’s double-check a few key details to ensure components load properly:

• Confirm file paths match your class names:
  • Controller should live at app/controller/cMain.js
  • Models at app/model/mExemple.js, app/model/mCorpsMetier.js, etc.
  • Stores at app/store/sExemple.js, etc.
• Open your browser’s developer tools (F12) and check the Console tab for JavaScript errors, plus the Network tab to ensure all app files (views, controller, models) load without 404 errors.
• To verify the controller is working, add a simple log in the onLaunch method:

  onLaunch: function() {
      console.log('Controller launched successfully!');
  }
  

Next Steps: Adding the Database Grid Component #

Once your page renders correctly, here’s how to implement the grid to display your database table:

1. Define Your Model #

Create app/model/mExemple.js to map your database table fields:

Ext.define('rgpd.model.mExemple', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'columnName1', type: 'string'},
        {name: 'columnName2', type: 'date'},
        // Add all fields from your database table here
    ]
});

2. Set Up the Store #

Create app/store/sExemple.js to fetch data from your backend:

Ext.define('rgpd.store.sExemple', {
    extend: 'Ext.data.Store',
    model: 'rgpd.model.mExemple',
    proxy: {
        type: 'ajax',
        url: '/your-backend-api-endpoint', // Replace with your actual API URL
        reader: {
            type: 'json',
            rootProperty: 'data' // Match the root key of your API's response
        }
    },
    autoLoad: true // Automatically load data when the store initializes
});

3. Update the View to a Grid #

Modify rgpd.view.Exemple.View to use a grid panel instead of a regular panel:

Ext.define('rgpd.view.Exemple.View', {
    extend: 'Ext.grid.Panel',
    xtype: 'exemple',
    id: "exemple",
    title: "Database Table Content",
    store: 'sExemple', // Bind the store to the grid
    columns: [
        {text: 'ID', dataIndex: 'id', width: 70},
        {text: 'First Column', dataIndex: 'columnName1', flex: 1},
        {text: 'Date Column', dataIndex: 'columnName2', formatter: 'date("Y-m-d")', width: 120},
        // Add columns for all your table fields
    ],
    padding: 20,
    // Optional: Add pagination for large datasets
    bbar: {
        xtype: 'pagingtoolbar',
        store: 'sExemple',
        displayInfo: true
    }
});

With these fixes and updates, your app should no longer be blank, and you’ll be on your way to displaying your database data in a fully functional grid.

内容的提问来源于stack exchange，提问作者RomAZE