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") 确定了，只用找个结果中的第一个
