Сенча: применение стилей с помощью DomHelper и DomQuery - PullRequest
Новая
       1

Сенча: применение стилей с помощью DomHelper и DomQuery

1 голос
/ 15 сентября 2011

Я пытаюсь создать простое приложение в стиле Sencha Touch. В частности, я думаю, что это сделает изображение с id = "piece-5" непрозрачным: 

Ext.DomHelper.applyStyles(Ext.DomQuery.selectNode('img#piece-5'), 'opacity: 1');

Но это не так. DomQuery, похоже, передает объект, который не связан с фактическим элементом DOM.

Что я здесь не так делаю?

UPDATE

Прежде всего, я понимаю, как работает прозрачность CSS. И да, IMG прозрачен, и я пытаюсь сделать его непрозрачным, как я уже говорил в вопросе. [Это было в ответ на ответ, который с тех пор был удален.]

Я всего лишь несколько недель в Сенче, поэтому я подумал, что неправильно понял, как работает Ext.DomQuery, но, видимо, проблема в другом месте моего кода, поэтому вот некоторые подробности.

У меня есть панель с некоторыми изображениями в элементах <li>. На <li> установлены фоновые изображения, поэтому при создании прозрачного img (opacity: 0) фоновое изображение открывается. Это работает нормально. Теперь я пытаюсь «спрятать» фоновое изображение, установив непрозрачность элемента img обратно в 1.

На панели есть этот слушатель: 

listeners: {
    el: {
        tap: this.imgFlip,
        delegate: 'img'
    }
}

Который вызывает эту функцию: 

imgFlip: function (item) {
    if(typeof this.flipped == 'undefined'){
        this.flipped = new Array();
    }

    Ext.DomHelper.applyStyles(item.target, 'opacity: 0');

    this.flipped.push(item.target.id);

    if(this.flipped.length > 1){
        console.log(this.flipped);
        for(var i=0; i<this.flipped.length; i++){
            var el = Ext.DomQuery.selectNode('img#' + this.flipped[i]);
            Ext.DomHelper.applyStyles(el, 'opacity: 1');
            console.log(el);
        }
        this.flipped = [];
    }
}

На данный момент идея состоит в том, чтобы просто позволить пользователю коснуться одного изображения, чтобы «раскрыть» то, что находится под ним, а затем, когда они касаются другого изображения, оно ненадолго скрывает второе, а затем снова показывает оба.

После нажатия на 2 элемента, я вижу это в консоли: 

["piece-6", "piece-5"]
<img src=​"img/​jadelogo.jpg" style=​"width:​ 80px;​ opacity:​ 1;​ " id=​"piece-6" class=​"artifact-2">​
<img src=​"img/​jadelogo.jpg" style=​"width:​ 80px;​ opacity:​ 1;​ " id=​"piece-5" class=​"artifact-1">​

Но изображения остаются прозрачными, и я, если я просматриваю их в DOM, вижу: 

<img src="img/jadelogo.jpg" style="width: 80px; opacity: 0; " id="piece-6" class="artifact-2">

Надеюсь, это проясняет вопрос.

...