jQuery MiniUI,Ajax Web开发

中文教程

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"); // 传两个以上的参数

Extjs 基础篇—— Ext.DomQuery

Ext.DomQuery,根据编译请求提供高效的将选择符 / xpath 处理为可复用的函数的方法。可以添加新的伪类和匹配器。该类可以运行于 HTML 和 XML 文档之上(如果给出了一个内容节点)。 简单的说就是选择器。
DomQuery的核心方法就是:CSS选择器和XPath语法。
DomQuery支持4种选择器:元素选择器、属性选择器、伪类、CSS选择器。
1.元素选择器

Extjs 基础篇—— Ext.DomHelper

Ext.DomHelper是处理DOM或模板(Templates)的实用类。其实就是对原生的DOM操作进行封装、改进,让我们更加方便的操作DOM元素。
Ext.DomHelper的主要方法如下:
1.append( String/HTMLElement/Element el, Object/String o, Boolean returnElement )
2.insertHtml( String where, HTMLElement el, String html )
3.overwrite( String/HTMLElement/Element el, Object/String o, Boolean returnElement )
4.createTemplate( Object o )
例子:

Ext.DomQuery.selectValue()

例句:
loginResult.state = Ext.DomQuery.selectValue('/LoginResult/State',response.responseXML);
说明:
1.Ext.DomQuery :根据编译请求提供高效的将选择符 / xpath 处理为可复用的函数的方法。可以添加新的伪类和匹配器。该类可以运行于 HTML 和 XML 文档之上(如果给出了一个内容节点)。

Extjs 基础篇—— Ext操作DOM

一 这里要记住三个核心工具类:Ext.Element, Ext.DomHelper, Ext.DomQuery。

二 说明一下,这里的ExtJs用的是3.x的版本
三 Ext.Element.get(),获取的是Ext.Element的实例,而不是原生的

标签。

Extjs 基础篇—— DOM操作

一 节点的访问
var div = document.getElementById('myDiv');
二 节点的创建

var div = document.createElement('div');
   div.id = 'newDiv';
   document.body.appendChild(div);
   // 指定位置
  document.body.insertBefore(div,document.getElementById('myDiv'));

三 节点的删除

Extjs 基础篇—— js基础

一 变量
1. 使用var声明的是局部变量,不使用var定义的是全局变量。
二 对象和数组
1.对象的定义和操作

Eclipse 部署ExtJs

一个项目要用到EXTJS,从今天开始看EXTjs方面的书,今天了解了Eclipse部署EXTJS,和利用插件实现智能提示,接下来详细阐述一下。

1,在EXTJS官网下载EXTjs,http://extjs.org.cn/ 我下载的版本是ext3.4.0,最新版本4.0.7,但好像eclipse还不支持,所以就放弃了!

2,将ext3.4.0部署到eclipse项目中。即:将ext3.4.0.zip文件解压后,把几个必需的文件或者文件夹导入项目中即可,包括,adapter文件中的ext-base.js,文件夹中ext-all.js文件,以及resources文件夹,即可

3,在html调用extjs时,一定要注意引用的文件的顺序和路径

<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"> </script>