Un modèle de données est une définition qui s'apparente à une définition UML. On peut voir ça comme un DataObject. Le but est de stocker et transporter des données structurées. Il ne s'agit pas ici de définir une classe avec des méthodes de manipulations mais juste un accès aux données. Contrairement à un simple objet JavaScript, un objet défini à partir d'un modèle est conforme à la définition de ce modèle.

Un DataStore est un espace de stockage de données conforme à un modèle. Il permet la lecture et l'écriture de données. Associé à un proxy, il permet les échanges entre le client et le serveur.

Jusqu'à la version 3.x, il existe plusieurs types de DataStore en fonction de la façon dont les données sont lues. ArrayStore, JsonStore, XmlStore,...

À partir de la version 4, il n'existe que des DataStores. Le DataReader associé au DataStore est spécifique à une méthode de lecture.

Le rôle du DataStore est de faire la liaison entre un modèle, un stockage (Array, Ajax ...), un Reader et un Writer.

Il permet à tous les composants de vos applications d'avoir accès à des données de façon uniforme.
Les composants vont lire et écrire dans les DataStores quel que soit le type de stockage. Si votre application évolue ou change de protocole, mais que la définition des données ne change pas, seuls le Writer et le Reader ou le Proxy changeront.

Un bon moyen de commencer un développement est d'utiliser un Stockage local dans un Array avec un proxy LocalStorage. Les données sont alors écrites en dur dans le tableau. Une fois l'application suffisamment avancée, on peut développer la partie serveur et changer de proxy (principe de séparation des couches).

Le proxy est là pour faire l'interface entre la zone réelle de stockage et le DataStore. Il va ainsi relayer vers les serveurs les demandes de lecture ou d'écriture des données. Les proxy de Ext-JS supportent de nombreux protocoles.

var myStore = new Ext.data.Store({
    model: 'User',
    proxy: {
        type: 'ajax',
        url : '/users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    },
    autoLoad: true
});