sencha touch 学习笔记 ajax、jsonp、dom查找、组件查找、添加css

除了在store中通过代理获取数据外，还可以通过ajax或jsonp方式获取数据,开始学touch时找了半天也没找见ajax的方式。。

这是 使用aiax api 的地址

ajajx

http://docs.sencha.com/touch/2.2.0/#!/guide/ajax

例如最简单的 发起一个请求

Ext.Ajax.request({
    url: 'http://qqloving.com/Account/getblogsinfo/3099099/',
    callback: function(options, success, response) {
        console.log(response.responseText);
    }
});

其他的ajax相关的可以看官方api的相关实例

jsonp

但是在phonegap中必须使用jsop的方式

这是jsonp的api http://docs.sencha.com/touch/2.2.0/#!/api/Ext.data.JsonP

这是我在博客详情页面获取博客内容的jsonp 的代码

jsonp 其他的设置方式与发起ajax请求的方式相同

具体可以参考 http://docs.sencha.com/touch/2.2.0/#!/guide/ajax

 Ext.data.JsonP.request({
                    //we give it the url to the free worldweatheronline.com api
                    url:'http://qqloving.com/Account/getblogsinfo/3099099/'',
                    callbackKey: 'callback',
                    success: function(result) {
                        aRecord.data.text=result.text;
                        myblog.setData(aRecord.data);
    
                    }
                });

添加自己的css

由于博客园的博客文章和新闻文章中都有比较大的图片，直接在手机上浏览很不方便因此需要定义样式，缩小图片在页面上的尺寸，

添加自己的样式到sencha touch

将自己廷加的css写在这里在打包的时候才能打包上，写在其他地方打包时候可能就打包不上了

dom查找和组建查找

现在在手机页面上显示的是小图，我要实现点击图片查看大图的功能，因此需要在博客内容被添加到页面上查找图片

在sencha touch 中查找分两种

第一种查找：是sencha touch 中的组件 例如Panel组件

                  这样查找出来的对象会有sencha touch 很多属性方法事件、例如触摸、拖拽等

第二种查找：是查找页面上的dom ，例如我要查找的的图片

                 这样查找出来的对象只有dom原生的一些点击等事件和方法

                 这个时候可以用 Ext.get(***) 方法将结果转化为 sencha touch 对象，就可以有很多方法和事件可以用了

（PS：官方的文档在这里似乎不太准确，当然也可能是我理解有误，欢迎专家告诉我正确答案）

这是官方和查找相关的api（我对这几个类理解也是模模糊糊的。。。。。。）

• Ext.dom.CompositeElement             这个里面的方法给我的感觉是侧重修改dom本身的一些东西，例如修改css、修改属性等，个人感觉是修改组建 的
• Ext.dom.CompositeElementLite     这个我感觉和上面的差不多，是上面的简化版的样子
• Ext.dom.Element                        dom相关的，方法和上面一样多
• Ext.DomHelper                         这个侧重于增删改 ，里面的方法比上面几个少多了
• Ext.DomQuery                  这个看官方文档主要用于查询也就是里面的select方法
• Ext.Ajax3                     发起ajajx请求

我平时比较喜欢用这几个方法

1： Ext.dom.Element.select("#imgvewtag")  如果不确定要用找到的结果中一个还是多个，就用这个

     通常这个方法配合一个遍历方法 Ext.Array.each   用来遍历 结果集中的elements

   例如：

  Ext.Array.each(Ext.dom.Element.select("#imgvewtag").elements, function(name, index, countriesItSelf) {

});

2： Ext.dom.Element.down("#imgvewtag")  确定了，只用找个结果中的第一个