IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Organisation du framework > Éléments de base > DOM et navigateur
        Comment récupérer un objet du DOM ?
        Comment insérer des éléments dans le DOM ?
        Pourquoi DOMHelper utilise-t-il JSON et non HTML ?
        Comment modifier un objet du DOM ?
        Puis-je récupérer un élément du DOM ?
        Puis-je animer une modification d'un objet du DOM ?



Comment récupérer un objet du DOM ?
auteur : sekaijin
L'objet Ext fournit une méthode get qui permet de retrouver toute sorte d'objets. Si le paramètre fourni est l'ID d'un objet du DOM, cette méthode retourne un objet Ext.core.Element.

L'objet Ext.DomQuery permet de sélectionner des éléments du DOM en utilisant des sélecteurs CSS3 ou XPATH.


Comment insérer des éléments dans le DOM ?
auteur : sekaijin
L'objet Ext.DomHelper fournit tous les services nécessaires à la création d'éléments dans le DOM.
Il se base sur une description JSON des éléments à créer : 
{
    id: 'my-ul',
    tag: 'ul',
    cls: 'my-list',
    // append children after creating
    children: [
        // may also specify 'cn' instead of 'children'
        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'}
    ]
};

Pourquoi DOMHelper utilise-t-il JSON et non HTML ?
auteur : sekaijin
Cela permet de faciliter l'usage des variables. Les variables sont directement placées dans la spécification, là où il faudrait concaténer plusieurs chaines : 
var length='45px' ;
var spec={
  tag : 'li',
  width :length
} ;

Comment modifier un objet du DOM ?
auteur : sekaijin
Ext.core.Element permet de manipuler un objet du DOM : 
var el = Ext.get("my-div");
el.setWidth(100);
warning La méthode Ext.get retourne toute sorte d'objets. Si la valeur passée est l'ID d'un composant Ext-JS, c'est celui-ci qui sera retourné. Si l'ID est celui d'un élément du DOM, c'est une instance de Ext.core.Element référençant l'élément du DOM qui est retournée. Cet objet permet de manipuler l'élément du DOM. Mais ce n'est pas l'élément du DOM.
lien : Puis-je récupérer un élément du DOM ?

Puis-je récupérer un élément du DOM ?
auteur : sekaijin
La méthode Ext.getDom est faite pour cela : 
var el = Ext.getDom("my-div");
lien : Comment modifier un objet du DOM ?

Puis-je animer une modification d'un objet du DOM ?
auteur : sekaijin
Les méthodes de l'objet Ext.core.Element permettent de manipuler avec des animations un objet du DOM : 
var el = Ext.get("my-div");
// Element animation options object
var opt = {
    duration: 1,
    easing: 'elasticIn',
    callback: this.foo,
    scope: this
};
// animation with some options set
el.setWidth(100, opt)


Consultez les autres F.A.Q.

Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.