jQuery MiniUI,快速开发WebUI界面

中文教程

Sencha Touch命名规范

类名

类名只包含字母和数字,但在多数情况下不鼓励使用数字,除非是技术术语,不要使用下划线,连字符,和其他非数字字母的字符,例如:

  • MyCompany.useful_util.Debug_Toolbar is discouraged
  • MyCompany.util.Base64 is acceptable

类名应当分组成包,适当时,使用.进行命名空间划分,至少在类名中应该有一个唯一的命令空间。例如:

MyCompany.data.CoolProxy
MyCompany.Application

Sencha Touch Carousel 去除底栏

Sencha Touch Carousel 去除底栏

[code]
/*global Ext:false */
Ext.application({
launch: function () {
Ext.create('Ext.Carousel', {
defaults: {
styleHtmlContent: true
}, // defaults
indicator: false, //Carousel 去除底栏
fullscreen: true,
items: [
{
html: 'red',
style: 'background-color:#f00;'
}, {
html: 'orange',
style: 'background-color:#ffb600;'
}, {

Sencha架构解读

sencha是移动端的html5框架,可以用来制作跨平台的app应用。sencha内部利用mvc结构,使得整个框架在使用时能够保持代码的整洁,也易于测试和修改。

一个 sencha app是一个由model,controller,view,store,profile,再加上一些静态资源,例如:app的图标,加载页面图片等组成的集合
models:表明了app的类型,比如,电子商务型的app应该有 用户,产品,订单等模块
views:负责想用户展示数据,使用sencha 内部已有的组件
controllers:处理内部各部分之间联系,监听用户的点击、滑动并采取相应行动
store:负责加载数据,增强里内部组件的能力,如Lists和DataViews
Profile:能够在公用尽量多的代码的同时,很便利的优化app在平板和手机的UI

建立一个app通常要做的第一件事就是定义application,如下

Sencha Touch 2 快速入门

什么是Sencha Touch?

Sencha Touch使得你可以便捷地创造一个基于HTML5的手机应用,支持Android、iOS和黑莓等设备,并且在浏览器中创造原生APP般的体验。

你需要准备好

首先,你需要下载免费的Sencha Touch 2 SDK 和 SDK Tools (或者Sencha Cmd ) 。你还需要:
一个本地的web server
现代浏览器;推荐 Chrome 和 Safari (请不要用IE6!!)
如果你是在Windows上使用IIS,请记得添加 application/x-json 这个MIME Type,否则Sencha Touch不能正常工作。你可以从这里知道应该如何做:
http://stackoverflow.com/a/1121114/273985(很抱歉我并不使用IIS,没有对这个链接中的方法进行测试)。

ExtJS入门——开始

认识ExtJS
extjs是使用javascript、css和html等技术实现的主要用于创建用户界面,且与后台技术无关的前端ajax框架。
extjs来源于yui,开发理念来源于传统的桌面软件开发。

1.下载extjs,解压,得到目录结构

  • builds:是extjs压缩后的代码,体积更小,加载更快
  • docs :extjs的文档
  • examples:官方示例
  • locale:多国语言的资源文件
  • overview:extjs的功能简述
  • pkgs:extjs各部分功能的打包文件
  • resource:extjs要用到的图片文件与样式文件。
  • src:未压缩过的代码目录
  • bootstrap.js:extjs库的引导文件
  • ext-all.js :必须引入的核心库
  • ext-all-debug.js:ext-all.js的调试版

在MyEclipse和Tomcat下配置Sencha Touch环境

首先要配置开发环境。这个很简单,只要到官方网站下载Sencha Touch压缩包即可http://www.sencha.com/products/touch/。
开发工具随便一个编辑器,记事本也可以的。
本人用的是MyEclipse+Tomcat,Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我为了以后例子可以跟后台交互)
其实可以直接浏览本地静态html文件的。

ExtJS中layout的用法总结

好久没看过EXT了,最近项目中需要用到就重新复习了下,对于一些知识也都模糊不清,现对Extjs中的layout布局进行总结下:
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种,现一一举例:
1.absolute根据字面意思就知道,是根据具体坐标进行定位的,固不写相应的代码了,其他的如下
2.anchor:其值可以使百分比和数值,数值一般为负数,其代表的意思是如果宽度和长度中有一个设定值了,则anchor代表的是未设置的那个,如果两者都没有设定具体值,则如果需要使用anchor则需要anchro:'ww,hh'

ExtJS中更新html内容以及iframe中内容打印

工作一年多来,最近的开发,虽说前台和后台都有分工,但是大部分经历都放在前台,界面上有太多的东西需要修改和完善,调试程序更是需要更多的时间,最近的工作在用xsl写样式将xml中的内容显示在界面上,而我们的界面是基于Extjs的,这样我们就在panel中使用html属性,获取内容显示,这样就存在一个问题,当我们需要更新panel中的内容时该怎么办,换面板是一个可以实现目标的方法,但是这似乎又是很笨的方法,我们需要放两个panel在这里,在苦思冥想后,发现Extjs中的panel有更新html的方法,具体怎么实践,可以看一下例子。

如下代码:先定义panel,panel中的html是已经有内容的,其中的dataURL是个变量,需要到后台程序中取数据

ExtJs4新发现10_获取复选框(checkboxgroup&checkbox)的值

1.fieldset(checkbox) 获取值

复选框组件定义如下:
{
xtype: 'fieldset',
title: '兴趣',
autoHeight: true,
defaultType: 'checkbox',
hideLabels: true,
id: 'xq',
layout: 'hbox',
defaults: {
flex: 1
},
//vertical: false,
items: [
{ boxLabel: '游泳', name: 'xqn', inputValue: '4', checked: true },
{ boxLabel: '玩儿', name: 'xqn', inputValue: '5' },
{ boxLabel: '游戏', name: 'xqn', inputValue: '6' }
]
}

ExtJs4新发现09_xtype的含义以及对应类

根据我在EXT论坛上的观察,xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。


定义
xtype就是一个代表类(Class)的标识名字。

譬如,你有这个类,名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类(创建类的对象)。

除了类名外,你还可以这样登记类的xtype:

ExtJs4新发现08_改变字体大小提示

Ext.EventManager.onTextResize(function(oldsize,newsize){
//改变字体大小提示
alert('oldsize:'+oldsize+'newsize:'+newsize);
});

ExtJs4新发现07_监听键盘事件

Ext.get('text').on('keypress',function(e){
//监听键盘事件
if(e.charCode==Ext.EventObject.SPACE){
Ext.Msg.alert('info','空格');
}
});

其他还有类似事件,keyup,keydown等

ExtJs4新发现06_改变窗口宽高提示

Ext.EventManager.onWindowResize(function(width,height){ //改变窗口的时候会提示出窗口的宽高 alert('width:'+width+',height:'+height); });

ExtJs4新发现05_grid获取checkbox的值

grid每列前面加checkbox: (我用的而是第一种,后台一个string数组接受就可以了)
一般的grid使用一个Ext.grid.ColumnModel就可以了,要加入一个多选的列,一种方法是加入一个多选列模板Ext.grid.CheckboxSelectionModel:
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel(
[
sm,
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
]
);
另外,实例化EditorGridPanel时还必须指定这个sm为selModel.

ExtJs4新发现04_grid 单击事件

EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据)

grid.addListener('cellclick',cellclick);

function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

ExtJs4新发现03_window 随浏览器大小变化而变化

var win = new Ext.Window({
modal : true,
title : "Ext-Window",
maximizable : true,
monitorResize:true,
draggable:false, // 禁止移动
resizable : false,
maximizable:false, // 禁止最大化
layout : 'fit',
plain:true,
buttonAlign : 'right',
listeners:{
close:function(w){
w.container.removeClass("x-window-maximized-ct"); //显示滚动条
w.restore(); // 关闭窗口前先还原,滚动条才不会消失
},
maximize:function(w){
//最大化后需要将窗口重新定位,否则窗口会从最顶端开始最大化
w.setPosition (document.body.scrollLeft,document.body.scrollTop);
}
}
});

ExtJs4新发现02_event和method的区别配置项和属性的区别

Ext里的属性和配置项有什么区别?
一般属性是相对于“某一实例”、“某一对象”的说法。
配置项(config item)在Ext中多用于初始化时候,传入到组件的配置项情况。
配置项一般传入后则不作变化,也不一定可以访问值是如何。但属性可以读、也可以写。

举例说明,

ExtJS4新发现01_event和method的区别

event和method的区别?
method,可以在程序中直接调用对象的方法, obj.method();
event 是在事件发生时的处理函数,通过监听事件的方式来设置
用配置项

listeners:{
xxx:function(){ .... } 
}


obj.on("xxx", function(){ .... });

要等事件发生时,函数才被调用.

作者: middlekingt
原文: http://blog.csdn.net/middlekingt/article/details/8208280

Sencha Touch 2 Sass自定义图标的使用方法

Sencha Touch 提供的默认图标有限,api上只有这么几个

但为了方便扩展,sencha touch早已经给我们准备了若干的图标文件和sass代码,方便后期的css自定义等。

图标文件在:\resources\themes\images\default\pictos 下面,如果不够用,你可以放置自己的png格式图片。

如何自定义自己的图标呢?

由于我们是window系统,必须先安装ruby环境,因为sass和compass工具依附于ruby。

Extjs 基础篇—— Function基础

这里主要是JS的基础知识,也是深入理解Ext的基础。
1.参数可变长,注意跟Java还是有一点区别的。
例:

function getUser(name,age){
    alert("name: "+name + " age: "+age);
  }

调用方法:getUser(); // 可以不传参数
getUser("cat"); // 可以只传递一个参数
getUser("cat",20); // 传两个参数
getUser("cat",20,2,"dog"); // 传两个以上的参数