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

image

将自己廷加的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")  确定了,只用找个结果中的第一个

原文地址:https://www.cnblogs.com/qqloving/p/3099345.html