carousel组件是个非常不错的东东,自带可滑动的效果,效果如下图 上面部分可以左右滑动,下面部分可以上下滑动,效果还是不错的,app程序中很有用的布局 代码如下: Ext.application({ name:'itKingApp', /** * Carousel 组件 */ launch:function(){ var carousel1=Ext.create('Ext.Carousel',{ ui:'dark', flex:1, direction:'horizontal', items…

现在来说说sencha touch中的表单,举个简单的login的例子,相关的说明我都放在了注释中,看下面代码 Ext.application({ id:'itKingApp', launch:function(){ var formPanel=Ext.create('Ext.form.Panel',{ id:'formPanel1', // 表示是否可以滑动,vertical=上下滑动 horizontal=左右滑动 both=上下左右都可以 flase=不滑动 scrollable:'ver…

今天记录一下关于sencha touch中的几种布局,其实很简单的,还是直接上代码,一目了然 1:box布局,其实就是vbox和hbox,说白了一个是横着摆放,一个是竖着摆放 Ext.application({ name:'myApp', launch: function(){ var myPanel=Ext.create('Ext.Panel',{ id:'myPanel', layout:{ type:'hbox', pack:'end' }, items:[ { html:'One', f…

有些时候我们需要实现这种效果 上边是一张图片或者一个跑马灯控件,这个布局实现起来比较容易 但是如何让他们共用一个滚动条,来实现以下效果就比较麻烦了. 在官方论坛查找资料得知,可以用以下写法实现: /* *动态 */ Ext.define('app.view.new.Trend', { alternateClassName: 'newTrend', extend: 'Ext.List', requires: ['Ext.carousel.Carousel', 'Ext.plugin.PullRef…

最近在弄senchatouch的项目,所以边学习边开发,边记录,直接记录下test code如下: Panel: Ext.application({ name:'itKingApp', launch: function(){ var panel=Ext.create('Ext.Panel',{ fullscreen:true, id:'myPanel', style:'color:red', html:'主面板' }); Ext.Viewport.add(panel) // Ext.get 取得…

接着上一篇的登陆页面,来一个最简单的注册页面,几乎包含了常用的field Ext.application({ id:'itKingApp', launch:function(){ var formPanel=Ext.create('Ext.form.Panel',{ id:'formPanel1', scrollable:'vertical', style:{ 'padding':'1px' }, items:[{ xtype:'fieldset', title:'用户注册', instruct…

还是直接上代码,都是基本的几个容器控件,没什么还说的 Ext.application({ name:'itkingApp', launch:function(){ var view =Ext.create('Ext.NavigationView',{ items:[ { title:'title1', html:'one' }] }); var panel=Ext.create('Ext.Panel',{ title:'title2', html:'two' }); var panel2=Ext…

常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样就会如果要实现"view"之间的跳转,animateActiveItem()方法将被使用, 但是通过st的源码 animateActiveItem: function(activeItem, animation) { var layout = this.getLayout(), defau…

Sencha Touch 2的有效xtype xtype Class ----------------- --------------------- actionsheet Ext.ActionSheet audio Ext.Audio button Ext.Button component Ext.Component container Ext.Container image Ext.Img label Ext.Label loadmask Ext.LoadMask map Ext.Map m…

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不须要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有很多类似之处.近期在 Ivan Jouikov的这篇博文中对他们进行了具体的分析. 尽管是这样.但非常多Ext JS和Sencha Touch开发者可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最经…