Un modèle de données est une définition qui s'apparente à une définition UML. On peut voir ça comme un DataObjectDataObject. 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
});

Dans l'utilisation des stores, par exemple avec une grille de données (DataGrid ou GridPanel), il est parfois nécessaire de demander au store d'envoyer ses requêtes Ajax avec des paramètres particuliers. Par exemple, vous avez un store qui est relié à une DataGrid et vous avez besoin de faire une recherche filtrée sur certains de ses champs de données.
Il y a une différence notable pour faire cela entre Ext JS 3.x et Ext JS 4.x.

En Ext JS 3.x

L'objet qui permet la définition des paramètres à passer dans la requête Ajax d'un store s'appelle baseParams. Il peut se définir dans la déclaration du store :

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

Où filtId et filtName sont des variables connues au moment de la déclaration du store.

Notez que la propriété baseParams est une propriété du store lui-même.

On peut aussi le déclarer dynamiquement :

myStore.baseParams = {"filter_id":filtId,"filter_name":filtName};

ou

myStore.baseParams.filter_id = filtId;
myStore.baseParams.filter_name = filtName;

En Ext JS 4.x

La gestion des paramètres de requête Ajax d'un store est différente. La propriété s'appelle maintenant extraParams, et elle n'est plus rattachée au store mais à son proxy. Cela donne :

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

On peut toujours les définir dynamiquement :

myStore.proxy.extraParams = {"filter_id":filtId,"filter_name":filtName};

ou

myGrid.getStore().proxy.extraParams.filter_id = filtId;
myGrid.getStore().proxy.extraParams.filter_name = filtName;