??xml version="1.0" encoding="utf-8" standalone="yes"?>亚洲人成电影网站,亚洲欧美成aⅴ人在线观看,久久久亚洲精品蜜桃臀http://www.tkk7.com/szhswl/category/27929.html宋针q的个hI间zh-cnSun, 09 Dec 2007 16:01:50 GMTSun, 09 Dec 2007 16:01:50 GMT60学习YUI.ExtW七?View&JSONView Part Two-一个画室网站的案例http://www.tkk7.com/szhswl/articles/166320.html宋针q?/dc:creator>宋针q?/author>Sat, 08 Dec 2007 11:13:00 GMThttp://www.tkk7.com/szhswl/articles/166320.htmlhttp://www.tkk7.com/szhswl/comments/166320.htmlhttp://www.tkk7.com/szhswl/articles/166320.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166320.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166320.html之前在Part 1单介l了Veiw和JSONView。今天这里小弟ؓ大家说说应用的案例，原本Jack的Image Chooser是一个非常好的案例，当中包含Jack大量的奇技淫yQ不q正因ؓq样Q过于深奥，弟我亦不能全盘吃透，只挑?#8220;勃大茎深”之处Q与君共勉之Q?br /> 本文包含四大知识点：1.?font face="Arial">LayoutDialog中加入TabsQ?.View的用方式；3.JSONView的用方?4.获取XML/JSON的fieldsg分页

?strong>View之定?/strong>?br />   A View is generally used to build a quick template-based display of datamodel, rather than building a more complex grid. I thnk there's a blog post that illustrates doing this with JSON data. Templates can be used for any repetitious html creation, not necessarily tied to a datamodel.
主要的意思是View用于展示DataModel的数据，Part 1已经说过。这里是来自fourm某君的补充?/font>

代码点评Q?/strong>

1.先看一D늮单的

//用yui.ext做翻转按? super easy(工最??^^)
showBtn = getEl('showIntro');
showBtn.on('click', this.showDialog, this, true);
showBtn.applyStyles("cursor:pointer");
showBtn.on('mouseover', function(){showBtn.dom.src='images/over_10.gif'}, this, true);
showBtn.on('mouseout', function(){showBtn.dom.src='images/btn_10.gif'}, this, true);


//左边动画效果,createDelegate()负责轮换效果
var luo=getEl("left_pic");
luo.move('right', 250, true, .1, function(){
luo.dom.src='images/'+who+".gif";
luo.move('left', 250, true, .15, null, YAHOO.util.Easing.easeOutStrong);
}.createDelegate(this));

2.在LayoutDialog中加入Tabs

LayoutDialong分两个区域：west & center。而center之中我们要加入tabsQƈ逐一附加active的事?/p> 

var center = layout.getRegion('center');
var tab1 = new YAHOO.ext.ContentPanel('luo', {title: '|老师作品'});
center.add(tab1);
center.add(new YAHOO.ext.ContentPanel('chen', {title: '陈老师作品'}));


//center.on('panelactivated',function(){
//  alert(center.titleTextEl);
//}, this, true);
//center.showPanel('center');
/*two ways to activate the tabs.and tabs= many CPs
如果在BasicDialog中，只需要dialog本n可以获取getTabs,因ؓDialog本n是
唯一的一个Region;
但在LayoutDialog中，Region是多个的Q所有要指明哪个一个Region才行
*/


// stoe a refeence to the tabs 获取TABS集合
var tabs = layout.getRegion('center').getTabs();//逐一加入事g
tabs.getTab('center').on('activate', function(){this.show_thumb('student')}, this, true);
tabs.getTab('luo').on('activate', function(){this.show_thumb('luo')}, this, true);
tabs.getTab('chen').on('activate',function(){this.show_thumb('chen')}, this, true);
//center.showPanel('chen'); //用RegionȀzM可以
/*Tips:不能立即ȀzMӞ会点延时Q经q多行代码的延时便ok Q用addbufferlistener理论上也可以*/
layout.getRegion('center').getTabs().activate('center');

3.View的用方?/strong> 

//XML:index方式讉K字段QJSONQ直接用字D名
var tpl = new YAHOO.ext.Template(
'<div class="thumb">'+
'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+
' src=userfiles/image/lite_'+who+'/{0}></div>' +
'<div>文g大小: {1}</div>'+
'</div>'
);
tpl.compile(); //“~译DOM”加?
var schema = {
tagName: 'row',//Item?
id: 'id',//ID如不需要时Q设|空白字W串Q不能取消！
fields: ['filename','filesize','width','height']//d的字D?
};
var dm = new YAHOO.ext.grid.XMLDataModel(schema);
var mainView = new YAHOO.ext.View('pic_'+who,
tpl,
dm, {
singleSelect: true,//If JSON,q需指定一个config:jsonRoot
emptyText : '<div style="padding:10px;">没有匚w的内容！</div>'
});
dm.on('load',function(){}, this, true);
mainView.on('click', function(vw, index, node, e){
//alert('Node "' + node[] + '" at index: ' + index + ' was clicked.')
},this, true);
mainView.prepareData = function(data){
// prepare,用于自定义格?
//如JSON方式直接属性名讉KQe.g data.sizeString = formatSize(data.size);
data[1] = formatSize(data[1]);
return data;
};
//用DataModel加蝲文gQ如果是JSONViewQ这个服务由JSONView本nQUpdateManagerQ提?
dm.load('xml.asp?who='+who);

4.JSONView的用方?/strong>

var dh = YAHOO.ext.DomHelper;
dh.append(document.body, {tag: 'div', id: 'editUserDialog-user'});
//XML:index方式讉K字段QJSONQ直接用字D名
var tpl = new YAHOO.ext.Template('

Username: {username}

' +
'

Birthday: {birthday}

' +
'

Member Since: {join_date}

' +
'

Last Login: {last_login}

');
tpl.compile();
var mainView = new YAHOO.ext.JsonView('pic',
tpl, {
singleSelect: true,
jsonRoot: 'user',
emptyText : '

No images match the specified filter

'
});
mainView.load("test.asp", "id=2");
//JSONViewҎ的异怺?
mainView.on('loadexception', function(){onLoadException()}, this, true);
var onLoadException= function(v,o){
alert('Error');
};

5.获取XML/JSON的fieldsg分页

q两个问题放在一赯论的原因是至今我q不能实现。如果按照jack的办法：

mainView.on('click', function(vw, index, node, e){
alert('Node "' + node.id + '" at index: ' + index + ' was clicked.');
});
可得到index但node.id无法获取。我只好用较丑陋的方式实玎ͼ 
//在Domhelper?#8220;?#8221;输出click事g
var tpl = new YAHOO.ext.Template( 

'<div class="thumb">'+

'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+

' src=userfiles/image/lite_'+who+'/{0}></div>' + 

'<div>文g大小: {1}</div>'+

'</div>'

);

分页Q?br /> View的分视乎应该通过DataModel?/p>
本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20070239

]]>学习YUI.Ext W七?-关于View&JSONViewhttp://www.tkk7.com/szhswl/articles/166319.html宋针q?/dc:creator>宋针q?/author>Sat, 08 Dec 2007 11:11:00 GMThttp://www.tkk7.com/szhswl/articles/166319.htmlhttp://www.tkk7.com/szhswl/comments/166319.htmlhttp://www.tkk7.com/szhswl/articles/166319.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166319.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166319.html展现一条一条的二维关系的数据，我们可以使用GIRDlg?但有些场合，如品展C，dQ我们可以用ViewlgQ来展示“矩阵”式的数据?View的数据源来自DataModel对象Q即包含XMLDataModel和JSONDataModel。尽View支持JSON,但如果不是用于DataModelQView的子cJSONView更适用Q因为它提供更多的事件和Ҏ。一般来_View用于XML数据源；JSONView用于JSON数据源?/p>

View如何工作Q?/strong>

记得以前如何输出一个记录吗Q以|上商店Z子；以前是这栯Z个商品的Q?

<%
.....
//下列服务端代码ؓASP using JScriptQ依然是JSQI'm a big JS Fan^^Q?
var str ="";
str+="<td><div id='title'>";
str+=rs("title")+"<\/div>";
str+="<img src="+rs("thumb_image")+">";
str+="<\/td>"
Resposne.Write(str);
.....
%>

很明显，我们最l目的还是要输出HTML,为浏览器渲染(Render)服务。View工作原理也一P只不q把以前Sever做的事情搬到Cilent来，依靠View来处理（实质上是Domhelper的模版）Q让览器最l渲染输出?/p>

需要你的帮忙：Domhelper

如上qͼView的工作离不开DomHelpr。DomHelpr在这里提?模版Template",q将其编译。见下面代码Q?



//新徏一个Template对象
var tpl = new YAHOO.ext.Template(

'<div class="entry">' + 

'<a class="entry-title" href="{link}">{title}</a>' +

'<h4>{date} by {author} | {comments} Comments</h4>{description}' +

'</div><hr />'

);
tpl.compile(); //compile()的方法，可带来DOM性能的增?
var moreView = new YAHOO.ext.JsonView('entry-list', tpl, {
jsonRoot: 'posts'
});
//又或者隐式创建Template对象
var view = new YAHOO.ext.View('my-element',
'<div id="{0}">{2} - {1}</div>', // auto create template
dataModel, {
singleSelect: true,
selectedClass: 'ydataview-selected'
});

 

加蝲数据

VIEW加蝲数据的方式与JSONView的有所不同QVIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重点说说JSONView的load()ҎQ?

 view.load({ url: 'your-url.php',

params: {param1: 'foo', param2: 'bar'}, // 可以是URL encoded字符

callback: yourFunction,

scope: yourObject, //(optional scope) 

discardUrl: false, 

nocache: false,

text: 'Loading...',//loading之提C文?br />
timeout: 30,//时

scripts: false

});

只有url参数是不可缺省的Q其它如 nocache, text and scripts都是可选的?text和scripts是与UpdateManger实例兌的参?

  • params : String/Object
    (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
  • discardUrl : Boolean
    (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.

JSONView使用Ҏ

a.有一个gird和JSONView,两者如何同时调用一个数据源Q?br /> 1.改变jsonData属? 2.Call refresh(); ?a target="_blank">http://www.yui-ext.com/forum/viewtopic.php?t=1968

b.分页
分页视乎q没有什么好的方案，JACK只提供下面的思\Q?br /> JsonView extends View. View supports using a JSONDataModel. It won't render a paging toolbar for you, but it will loadPage() and standard DataModel functionality. The view will automatically update when you load new data. If you want named template parameters (like JsonView), you will need to remap the indexes (DataModel style) to named parameters. See the YAHOO.ext.View docs for more info on that.
http://www.yui-ext.com/forum/viewtopic.php?t=2340

c.如何JSONView的获取整个DataModel而不是字D？我每ơ用alert(mainView.jsonData); l果?#8220;undefined”
如果是获取DataModelQ那应该用View对象。出现undefined的原因是load()是异步的Q你必须先等待数据load完。如Q?/p> 

mainView.el.getUpdateManager().on('update', function(){
alert(mainView.jsonData);
});

详见http://www.yui-ext.com/forum/viewtopic.php?t=1209

 

d.学习例子。范?a target="_blank">Image Chooser本n是一个好的学习例?/p>

JSON Format

您可能认为服务输LJSONQ?/p> 

{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}

是正无误的。但不对Q它是不能被处理的。正的格式应该是：

{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}

注意Ҏ号内声明的是数组cdQView渲染方式实际是与DataModel一致的


本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20070209

]]>学习YUI.Ext W六?-关于树TreePanel(Part 2异步获取节点)http://www.tkk7.com/szhswl/articles/166318.html宋针q?/dc:creator>宋针q?/author>Sat, 08 Dec 2007 11:10:00 GMThttp://www.tkk7.com/szhswl/articles/166318.htmlhttp://www.tkk7.com/szhswl/comments/166318.htmlhttp://www.tkk7.com/szhswl/articles/166318.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166318.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166318.html下面介l如何异步取一|的所有节点，具体做法与官方同步取节点有很大不同，其在json的id属性上Q下面是我一些摸索，可能不是最x案，有待大家一LI?/p>

异步取节点的思\是这LQ?br /> 1、先定义一个初始化节点Q也可以不定义，看个人需求）
2、yui-extҎ该节点idh服务器，获得子节点各属?br /> 3、@?br />
特点Q可以在上一U目录中Q在服务器端预先该节点是否有子节点dQjson中的isLeaf属性）Q虽然但数据库将多承担一些压力，但用个count(*)不会造成太大负担Q除非查询条件异常复杂）Q也可以不读Q即把所有isLeaf讄为false?br />

问题Q?/strong>
1、目前还无法q行reloadQ即每次打开节点都重新读取一?br /> 2、样式还有些问题Q无法通过node. childNodes[i]讄子节点的styleQ所以无法改变最后一U元素的styleQ也许是通过别的途径改变style的？Q?/p>

 

CZQ?/strong>
先给ZDjs代码Q可以结合官方的demoQ?a target="_blank">http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.htmlQ看看：

//定义根id的变?
var rootId = 1;
var TreeTest = function(){
// shorthand
var Tree = YAHOO.ext.tree;
return {
init : function(userName){
var tree = new Tree.TreePanel('detailTree', {
animate:true,
//q个dataUrl是初始化树所用的urlQ你也可以不写或定义一个静态json文gQ还可以什么都不写全部依赖于第二个url自动产生Q视具体需求而定
loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}),
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'yui-ext',
draggable:false,
id:rootId
});
tree.setRootNode(root);
//Ҏ当前节点idQ动态拼求服务器的\?
//每生一个节点，指向一个事件的引用Q将新徏loader.dataUrlQ具体事件的机制q需要再研究Q?
//注意调用函数是beforeload
tree.on('beforeload', function(node){
tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id;
});
//q里演示一个自定义json的用?description定义json的key)
//以及如何定义某节点的style(node.ui.textNode.style.title)
//具体可以看uiq个c?
tree.on('beforeexpand', function(node){
node.ui.textNode.style.title = ‘red’;
alert(node.attributes.description);
});
// render the tree
tree.render();
// false for not recursive (the default), false to disable animation
root.expand();
}
};
}();

同时再分析一个jsonQ?br /> [{"text":"衣服c?, 
"id":"5",     //注意Q这里是该节点的idQ拼q接时要用到Q与官方的json有所不同
"leaf":true,
"cls":"file",
"description":"q里是衣服类"}]   //自定义只需要这样就可以?

l出java产生json的代码逻辑片断Q?

 

……
//list为由传入的id所求的category集合
List list=
findBy("parentId", new Long(parentId.toString()));
StringBuffer JSONStr = new StringBuffer();  //声明json
JSONStr.append("[");
for(CostCategory i : list){
boolean isLeaf = isLeaf(i.getId());  //isLeaf()为判断是否有以该id为parentId的节点，具体没有l出
String icon = isLeaf?"file":"folder";
String description = i.getCategoryDescription()==null?"":i.getCategoryDescription();
//{"text":"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"},
JSONStr.append("{\"text\":\""+
i.getCategoryName()+"\",\"id\":\""+
i.getId()+"\",\"leaf\":"+
isLeaf+",\"cls\":\""+
icon+"\",\"description\":\""+
description+"\"},");
}
JSONStr.deleteCharAt(JSONStr.lastIndexOf(","));
JSONStr.append("]");
System.out.println(JSONStr);
out.print(JSONStr);   //输出json
……
本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20070241


]]>学习YUI.Ext W六?-关于树TreePanel(Part 1)http://www.tkk7.com/szhswl/articles/166317.html宋针q?/dc:creator>宋针q?/author>Sat, 08 Dec 2007 11:09:00 GMThttp://www.tkk7.com/szhswl/articles/166317.htmlhttp://www.tkk7.com/szhswl/comments/166317.htmlhttp://www.tkk7.com/szhswl/articles/166317.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166317.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166317.html

一、加载一个同步Tree:

var TreeTest = function(){

var Tree = YAHOO.ext.tree;// 快捷方式



return {

init : function(){

var tree = new Tree.TreePanel('tree_div', {//需要一个tree_div的holder

animate:true, //是否动画

loader: new Tree.TreeLoader({dataUrl:'get_nodes.asp'}), //调用一个JSON

enableDD:false,// 是否支持拖放

containerScroll: true

});



// 讄根节?br />
var root = new Tree.AsyncTreeNode({

text: 'Frank的作?,  //根节Ҏ?br />
draggable:false, //根节Ҏ否可拖放

id:'source'

});

tree.setRootNode(root);
// 渲染 tree

tree.render(false,false);

// false for not recursive (the default), false to disable animation

root.expand(false,false);

}

};

}();



YAHOO.ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

通过XHR调用q个get_nodes.asp文gQ假设服务器q回q样一个JSON(有关JSON的介l?http://www.json.org/json-zh.html)Q?/p> 

[{
"text":"yui-ext.js","id":"\/yui-ext.js","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1118.php","id":"\/yui-ext-1118.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1228.php","id":"\/yui-ext-1228.php","leaf":true,"cls":"file"
} ,{
"text":"build","id":"\/build","cls":"folder"
} ,{
"text":"source","id":"\/source","cls":"folder"
} ,{
"text":"yui-ext-1123.php","id":"\/yui-ext-1123.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1203.php","id":"\/yui-ext-1203.php","leaf":true,"cls":"file"
} ]
Server端JSON的输出（ASP JScriptQ? 
var goods = new dbOpen();
goods.GetSQL ="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str+="[";
do{
str+='{"text":"'+rs("BigClassName")+'","id":"\/yui-ext.js","leaf":true,"cls":"file","href":"?b_id='+rs("BigClassID")+'"},';
rs.MoveNext();
}while(!rs.EOF);
str+="]";
Response.Write(str);
Close();
}
goods= null;

解释Q?br /> “text”-->昄的文?br /> "id"-->id?
“leaf”-->Boolean|如果“叶子”是真的话Q则不能包含子节点Children nodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的urlQ还有一?#8221;hrefTarget“的属?br /> 另外Q除了以上的属性，您还可以在JSON加入M的属性，作ؓ节点的属性，见Jack原话Q?br /> The href attribute is called "href", there's also an "hrefTarget" attribute. For capturing node clicks, you can listen on individual nodes or you can listen for "click" on the tree which will pass you the node that was clicked. FYI, you can put any attributes you want in the json config for the node and it will be available as node.attributes. FAQ.4会l解释这个问题?br /> FQA常见问题Q?/p>

1.Tree支持XML数据交换吗？
A:暂不支持Q据FOURM上的话，以后会提供支持，见：
can I use xml instead of json for sending nodes hirerachy Q?br /> Correct me if I'm wrong but I think the answer is no here. But that doesn't mean it won't be supported later on.

2.我想用单M替双d开子节点，可以吗？
A:可以Q见Q?

tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});

 

3.事g处理的几U情形：
A: a.当加入某个节ҎQؓ其增加事?

tree.on('append', function(tree, node){
if(node.id == 'foo'){
// q里加入你的事gQ如clickQ侦听器QaddListener()Q?
}
});

b.针对某个节点的单M?

tree.on('click', function(node){
if(node.id == 'foo'){
// do something
}
});

c.针对某个区域Q集合）的事?

// fires any time the selection in the tree changes
tree.getSelectionModel().on('selectionchange', function(sm, node){
if(node && node.id == 'foo'){
// do something
}
});

 

4.如何获取JSON中的自定义字D（或称作参?parametersQ?br /> A:JSON对象已经被构建函?construction传递到TreeNode中，作ؓnode.attributes 出现Q所以调用属性node.attributes 便可获取。详见：http://www.yui-ext.com/forum/viewtopic.php?t=2253

tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});

 本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20070206



]]>学习EXTW五?-Gridlg的简易分?/title><link>http://www.tkk7.com/szhswl/articles/166316.html</link><dc:creator>宋针q?/dc:creator><author>宋针q?/author><pubDate>Sat, 08 Dec 2007 11:07:00 GMT</pubDate><guid>http://www.tkk7.com/szhswl/articles/166316.html</guid><wfw:comment>http://www.tkk7.com/szhswl/comments/166316.html</wfw:comment><comments>http://www.tkk7.com/szhswl/articles/166316.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.tkk7.com/szhswl/comments/commentRss/166316.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/szhswl/services/trackbacks/166316.html</trackback:ping><description><![CDATA[<p>Grid的分必M靠服务端QServer SideQ来划分好每一늚数据才可以完成?</p> <p>本例中的服务端语a是PHP,数据库是MySQLQ用来导Z些随机的数据。下列脚本的作用是，获取我们惌的数据，同时q些数据是已分好늚数据。分늚参数是由Page Toolbar传入的变量limit和start所军_的?</p> <pre><code> $link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") or die("Could not connect"); mysql_select_db("test") or die("Could not select database"); $sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data"; $sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit']; $rs_count = mysql_query($sql_count); $rows = mysql_num_rows($rs_count); $rs = mysql_query($sql); while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; } Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})'; </code> </pre> <p>׃每个后台开发的环境都不相同，所以这里的服务端代码就不细I了?/p> <h2>怎么做一个分늚Grid</h2> <p>本例采用的是<em>ScriptTagProxy</em>Q原因是 范例代码 ?服务端代?不是在同一个服务器上（译注Q即“跨域”Q，而大多数的情冉|Q在同一个服务器上得到数据，直接用HttpProxy可以了?/p> <p>使用DataStore与^时唯一不同的地方，便是需要设|?em>totalProerty</em>属性。本例中Q我们从服务端的脚本计算?#8220;total”q个|告诉DataStored有多个记录Q这里指的是所有的记录数?/p> <pre><code> var ds = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php' }), reader: new Ext.data.JsonReader({ root: 'results', totalProperty: 'total', id: 'id' }, [ {name: 'employee_name', mapping: 'name'}, {name: 'job_title', mapping: 'title'}, {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'}, {name: 'is_active', mapping: 'active'} ]) }); </code> </pre> <h2>分页栏Toolbar</h2> <p>q里加入一个分|到Grid的面板中Q?-差不多完成喽?/p> <pre><code> var gridFoot = grid.getView().getFooterPanel(true); var paging = new Ext.PagingToolbar(gridFoot, ds, { pageSize: 25, displayInfo: true, displayMsg: 'Displaying results {0} - {1} of {2}', emptyMsg: "No results to display" }); </code> </pre> <p>最后传?em>start</em>?em>limit</em>参数以初始化数据?/p> <pre><code> ds.load({params:{start:0, limit:25}}); </code> </pre> <p>花时间较多的地方是，在后台如何生成数据，以配合Grid的运作，一旦这些工作OK后，分页Grid再不是一仉事了?br /> <br /> 本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20076012</p> <img src ="http://www.tkk7.com/szhswl/aggbug/166316.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/szhswl/" target="_blank">宋针q?/a> 2007-12-08 19:07 <a href="http://www.tkk7.com/szhswl/articles/166316.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>学习YUI.Ext W四?-开始用Gridhttp://www.tkk7.com/szhswl/articles/166315.html宋针q?/dc:creator>宋针q?/author>Sat, 08 Dec 2007 11:05:00 GMThttp://www.tkk7.com/szhswl/articles/166315.htmlhttp://www.tkk7.com/szhswl/comments/166315.htmlhttp://www.tkk7.com/szhswl/articles/166315.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166315.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166315.html 本教E将以XML为数据源Q带你进入Grid的世界?/p>

本文涉及的范例代码，可以在这里下载。一个完成好的例子可在这里找到?/p>

步骤一 定义数据(Data Definition)

首先要让Grid知道XML文档定义了每一行是什么数据。正如所见，我们命名?item"在下面的XMLh中?/p>

单行的XMLh数据 

<Item>
<ASIN>0446613657</ASIN>
<DetailPageURL>http://www.amazon[*SNIP*]JVQEG2</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Are You Afraid of the Dark?</Title>
</ItemAttributes>
</Item>

接着需要定义某一列ؓ“l一标识QUnique IdentifierQ?#8221;,即ID,Ҏ“id"所讄的那个节Ҏd|h代码W九行）。本例中的样本数据是”ASIN"列?/p>

数据定义的最后部分就是指定你需要显C的字段(Fields),把这些字D|C个数l之中，q保证这些字D与你的XML数据中元素名U是一致的Q而且q要注意先后序Q这里的序不需要和XML文g中顺序一致?/p> 

    var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN'
}, [
'Author', 'Title', 'Manufacturer', 'ProductGroup'
])
});

 

 

步骤?列模型（Column ModelQ?/h3>

下一步便是定义Column Model 列模型。简单地_是通过一些属性的讄Q决定每一列怎么控制或怎么昄Q这是一个由每列的配|参数组成的数组。注意，出现的顺序应该与刚才定义“字段”的数l一致。较常见的参数通常是header和widthQ所以你会觉得这两项是必要讄的，然而宽度（widthQ其实不L需要的Q因为稍后我们将使用autoWidth/Height来代ѝ?/p>

列模型样?/strong> 

	var colModel = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'Author'},
{header: "Title", width: 180, dataIndex: 'Title'},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
]);

最后是DataStore和Column Model两样东西传入到GridQ渲染结果，然后加蝲来自DataStore的数据，q些是你让Grid工作h的所有因素！

q行渲染Q?/strong> 

    var grid = new Ext.grid.Grid('mygrid', {
ds: dataStore,
cm: colModel
});
grid.render();
dataStore.load();

本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20075866


]]>学习YUI.Ext W三?EXT:Menulghttp://www.tkk7.com/szhswl/articles/166019.html宋针q?/dc:creator>宋针q?/author>Fri, 07 Dec 2007 05:29:00 GMThttp://www.tkk7.com/szhswl/articles/166019.htmlhttp://www.tkk7.com/szhswl/comments/166019.htmlhttp://www.tkk7.com/szhswl/articles/166019.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166019.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166019.html 讲讲如何使用Ext菜单器g

q篇教程中，我们学习用Ext的菜单器ӞMenu Widgets)。假设读者已l阅读过Ext介一文，q懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成Q得创Z个菜单只需若干代码块（Block of codeQ?/p>

开始！

W一步要做的是，下蝲本教E的CZ文g。Zip文g包括三个文gQ?strong>ExtMenu.html,?strong>ExtMenu.js?strong>ExtMenu.css?/strong>?strong>list-items.gif。解包这四个文g到Ext的安装目录中Q例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新徏目录“menututorial”。双?strong>ExtMenu.htmQ接着你的览器打开启动面Q应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误Q请按照面上的指引操作?/p>

在你常用的IDE中或文本~辑器中Q打开ExtMenu.js看看Q?/p> 

Ext.onReady(function() {
alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
});

在Ext的介l中Q我们讨使用Ext的原因和Ext.onReady()函数的功能?/p>


创徏易的菜单

先看看怎么做一个基本的菜单Q然后再讨论代码中的各个lg和知识点。加入下列代码到onReady函数?

var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到按?
}
]);
function clickHandler() {
alert('Clicked on a menu item');
}
function checkHandler() {
alert('Checked a menu item');
}

OK 仔细看看q里的代码，首先实例化一个MenucMؓ变量“menu”。然后Menu的构建函数接受一串的Object Literal作ؓ参数Q在先前的Ext教程中我们已l讨对ObjectLiteralq行了解。当前的ObjectLiteral包含了我们菜单中想要的属性。第一个属性是我们分配的IDQ稍后我们可用ID来获取Menu的引用?

 


各种Item的类?/h2>

属?#8220;items”可能是最重要的属性当中的一个。留意一下语法其实我们是一个数l作为|value)传到属性中厅R数l里的数据就是我们想要在菜单中出现的每一V每本例中我们放了六个菜单项Q但何解每项的语法（SyntaxQ都不尽相同呢？W一Ҏ一串Object LiteralQ包含一l我们可配置的name/value。Ext的底层库会ؓq串Object Literal按其配置默认地创建item对象。接着W二ҎItem对象本nQ后面跟着分隔W，最后两个是单选框V整个过E演CZExt Widget如何动态的q行。下例各可填入到数l中Q?/p> 

{text: 'Foo'}                       // Ext 转换q个配置对象到menu item
'Straight Text'                     //文本或原始html (U文?
'-'                                 // 创徏分隔W?
new Ext.menu.Item({text: 'Foo'})    // 创徏一个标准item (同{text: 'Foo'})
new Ext.menu.CheckItem()            // 创徏单选框item
new Ext.menu.DateItem()             // 创徏menu内置的日历控?
new Ext.menu.ColorItem()            //创徏一个颜色采集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允许你加入Q何元?

Item属?/h2>

Item接受什么类型的属性呢Q本例中我们使用了这两属性：

text: 'An item',
handler: clickHandler

W一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函敎ͼevent handler functionQ。本例中我们函数clickHandler()和checkHandler()定义在代码的最后。作为演C用途，q仅仅是用alert()通知你有一个单ȝ消息?br /> 其它有用的属性是Q?/p> 

cls: 'a-class-name'  ,       // 为标准Item手动讄样式和图标ICON
icon: 'url',                 // 如不想用CSS,可直接设|图标的URL
group: 'name of group',      //只适用多选项Q保证只有一被选中

完整的item属性列表在Menu Item文档中?/p>

在UI中摆放菜?/h2>

So,创徏好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆攑ֈ面中呢?在UI中一个menu可以分配到多个位|（同一个对象，不同位置多次使用Q，q正是Ext如此强大的原因：每一个器ӞwidgetQ切?#8220;一块一?#8221;的类Q来构徏整个面向对象的动态结构（StructureQ。这意味着menu可用于不同的场合。我们可menu攑ֈ有按钮的toolbar中，或用面中的一个按钮来展开menuQ甚臛_在Ext的其它器件中QwidgetsQ用menu作ؓ上下文菜单（Context MenuQ?/p>

本例中分配一个menu到toolbar中：

var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到toolbar
}
]);

Ext.Toolbar构徏函数接受两个参数Q第一个是指定toolbar的容器（contrainerQ；W二个参数是包含全部按钮的数l。这?我们只用一个按?正如所见，按钮实质上是一串由数组l成的Object Literal,同时q个Object Litetal亦包含了不同的属性。下面是一l按钮对象的Object Litetal属性：

cls: 'a-class-name'  ,      //手动讄样式和图标ICON
icon: 'url',                // 如不想用CSS,可直接设|图标的URL
text:'Our first Menu',      // 按钮提示之文?
menu: menu                  // 可以是menu之id或配|对?

Menu的分配方式：

刚才谈到如何分配Menu到工h中（toolbarQ，l而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因ؓmenu属性可以以不同方式地分配，x可以赋予一个menu对象Q或是已l徏好的menuIDQ或直接是一个menu config对象。你应该有机会就试一下以多种方式创徏menuQ因为类似的方式Ҏ在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一L效果Q唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单M。可以的话，把下面的代码也加入到onReady函数中，亲n体验一下：

var dateMenu = new Ext.menu.DateMenu({
handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu', // the menu's id we use later to assign as submenu
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu, // assign the dateMenu we created above by variable reference,
handler: date
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}

注意Q?/strong>留意几种不同的方法加入子菜单Q还有even handing函数和Coloritem、DataMenu匿名函数之间的区别?/p>


上文提及menu可摆攑֜UI的Q何位|，q里ؓ你演Cmenu如何与Toolbars、MeneuButtons、Context Menus's配合工作Q包括一些有用的Ҏ和动态添加的功能?/h2> MenuButton 
new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

动态添加菜单按钮到Toolbar

q条Toolbar有两个按钮。一个分隔符Q和一个纯图标的按钮（附QuicktipsQ。你可尝试这样做Q把zip文g?gif加入 

Ext.QuickTips.init();
tb.add('-', {
icon: 'list-items.gif', //图标可单行显C?
cls: 'x-btn-icon',      // U图?
tooltip: 'Quick Tips

提示文字'
});

更方便的?/h2>

一些代码片D，有助你提高效率，留意注释Q?

// Menus更多的API内容
// 动?增、减元素
menu.addSeparator(); //动态加入分隔符
var item = menu.add({
text: 'Dynamically added Item'
});
// items 完整支持Observable API
item.on('click', onItemClick);
// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe'  // <-- 讄ID便于查找lookup
// disabled: true   <-- 先不disabled 而采用下面的方式
});
// ?id ?index讉K
menu.items.get('disableMe').disable();
 
本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20075196


]]>学习YUI.Ext W二?EXT介（二）http://www.tkk7.com/szhswl/articles/166001.html宋针q?/dc:creator>宋针q?/author>Fri, 07 Dec 2007 03:42:00 GMThttp://www.tkk7.com/szhswl/articles/166001.htmlhttp://www.tkk7.com/szhswl/comments/166001.htmlhttp://www.tkk7.com/szhswl/articles/166001.html#Feedback0http://www.tkk7.com/szhswl/comments/commentRss/166001.htmlhttp://www.tkk7.com/szhswl/services/trackbacks/166001.html使用Widgets

(Widget原意?#8220;器?#8221;Q现指页面中UI控g)

除了我们已经讨论q的核心JavaScript库，现在的Ext亦包括了一pd的最前端的JavaScirptUIlg库。文本以一个最常用的widgetZ子，作简单的介绍?/p>

MessageBox

比v略ؓ沉闷?#8220;HelloWolrd”消息H口Q我们做许变化Q前面我们写的代码是Q单L个段落便会高亮显C，现在是单L落，在消息窗口中昄D落内容出来?br /> 在上面的paragraphClicked的function中，这行代码： 

Ext.get(e.target).highlight();

替换为：

var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});

q里有些新的概念讨论一下。在W一行中我们创徏了一个局部变量（Local VariableQ来保存某个元素的引用，卌单击的那个DOM节点Q本例中Q我们LD落paragrah,事因我们已经定义该事件与<p>标签发生兌的了Q。ؓ什么要q样做呢Q嗯...观察上面的代码，我们需要引用同一元素来高亮显C，在MessageBox中也是引用同一元素作ؓ参数使用?br /> 一般来_多次重复使用同一|ValueQ或对象Q是一个不好的方式Q所以，作ؓ一个好的OOP开发者，应该是将其分配到一个局部变量中Q反复用这变量Q?/p>

现在Q观察MessageBox的调用，准备作ؓ阐述新概늚演示用。乍一看，q像一q串的参C入到Ҏ中，但仔l看Q这是一个非常特别的语法。实际上Q传入到MessageBox.show的只有一个参敎ͼ一个Object literal,包含一l属性和属性倹{在Javascript中，Object Literal是动态的Q你可在M时候用{和}创徏一个典型的对象(object)。其中的字符׃pd的name/valuel成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经帔R到这U模式的语法Q因此你应该消耗掉q知识！
使用Object Literal的原因是什么呢Q主要的原因?#8220;韧性（flexibilityQ?Q随时可新增、删除属性，亦可不管序地插入。而方法不需要改变。这也是多个参数的情况下Qؓ最l开发者带来不的方便Q本例中的MessageBox.show())。例如，我们说这儿的foo.actionҎQ有四个参数Q而只有一个是你必M入的。本例中Q你惛_中的代码可能会是q样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写Q却是这P foo.action({ param4: 'hello' })Q这更易用和易读?/p>

Gird

Gird是Ext中h们最惛_睹ؓ快的Widgets之一Q也是最行之一。好Q让我们看看怎么L地创Z个Girdq运行。用下列代码替换ExtStart.js中全部语句：

Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
});

q看上去很复杂，但实际上加v来，只有七行代码。第一行创建数lƈ作ؓ数据源。实际案例中Q你很可能从数据库、或者WebService那里得到动态的数据。接着Q我们创建ƈ加蝲data storeQ?data store会告诉Ext的底层库接手处理和格式化q些数据。接着Q我们定义一个column模型Q用来轻村֜调配Gird的每一列参数。最后我们生成这个Gird,传入data store和column模型两个对象Q进行渲染ƈ选好W一行。不是太困难吧？

当然Q你可能对这D代码的某些l节Qƈ不完全掌握其中的含义Q像MemoryProxyI竟是什么？Q但先不要紧Q这个例子的目的是告诉你Q用量的代码，创徏一个富界面的多功能的UIlg而已——这是完全可能的Q更多细节的内容Q留l读者你自己学习吧。这儿有许多学习Grid的资源?a target="_blank">Ext Grid教程?a target="_blank">交叉Gird演示?a target="_blank">Gird API文档?

q有更多?.

q只是冰׃角。还有一打的UI Widgets可以供调用，?layouts, tabs, menus, toolbars, dialogs, tree view{等。请参阅API文档?a >范例演示?

使用Ajax

在弄好一些页面后Q你已经懂得在页面和脚本之间的控制原理（interactQ。接下来Q你想知道的是，怎样与后台服务器Qremote serverQ交换数据，常见的是从数据库加蝲数据QloadQ或是保存数据（saveQ到数据库中。通过JavaScript异步无刷C换数据的q种方式Q就是所谓的Ajax。Ext内徏卓越的Ajax支持Q例如，一个普遍的用户操作是Q异步发送一些东西到服务器，然后QUI元素Ҏ回应QResponseQ作出更新。这是一个包含text input的表单，一个div用于昄消息Q注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器Q：

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />

接着Q我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js?用下面的代码覆盖)Q?/p> 

Ext.onReady(function(){
Ext.get('oKButton').on('click', function(){
var msg = Ext.get("msg");
msg.load({
url: [server url], //换成你的URL
params: "name=" + Ext.get('name').dom.value,
text: "Updating..."
});
msg.show();
});
});

q种模式看v来已l比较熟悉了吧！先获取按钮元素，加入单击事g的监听。在事g处理器中Qevent handlerQ，我们使用一个负责处理Ajaxh、接受响应（ResponseQ和更新另一个元素的Ext内徏c，UCUpdateManager。UpdateManager可以直接使用Q或者和我们现在的做法一P通过Element的loadҎ来访问（本例中该元素?#8220;msg“的divQ。当使用Element.loadҎQ请求（request)会被加工处理后发送，{待服务器的响应QResponseQ，来自动替换元素的innerHTML。简单传入服务器url地址Q加上字W串参数Q便可以处理q个hQ本例中Q参数值来?#8220;name”元素的value),而text值就是请求发送时提示的文本，完毕后显C那个msg的divQ因为开始时默认隐藏Q。当Ӟ和大多数Extlg一PUpdateManager有许多的参数可选，不同的Ajaxh有不同的Ҏ。而这里仅演示最单的那种?/p>

PHP 
<? if(isset($_GET['name'])) {

echo 'From Server: '.$_GET['name'];

}

?>
ASP.Net 
protected void Page_Load(object sender, EventArgs e)

{

if (Request["name"] != null)

{

Response.Write("From Server: " + Request["name"]);

Response.End();

}

}
Cold Fusion 
<cfif StructKeyExists(url, "name")>

<cfoutput>From Server: #url.name#</cfoutput>

</cfif>

最后一个关于Ajax的谜题就是，服务器实际处理请求和q回QResposneQ的具体q程。这个过E会是一个服务端面Q一个ServletQ一个Http处理器，一个WebService,甚至是Perl或CGI脚本Q即M一个服务器都可以处理httph。无法预料的是，服务器返回什么是服务器的事情Q无法给一个标准的例子来覆盖所有的可能性?q段代码输出刚才我们传入'name'的那个值到客户端，卛_送什么，q回什么）?/p>

使用Ajax的真正挑战，是需l过适当处理q的手工代码Qƈ相应格式化ؓ服务端可用接受的数据l构。有几种格式供h们选择Q最常用为JSON/XML)。正因Ext是一U与服务器中立的语言Q得其它特定语a的库亦可用于Ext处理Ajax服务。只要页面接受到l果是合适的数据格式QExtl不会过问服务器的事情！要全面讨个问题，已超出本文的范围?br />
本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20072736



]]>学习YUI.Ext W一?EXT?/title><link>http://www.tkk7.com/szhswl/articles/165945.html</link><dc:creator>宋针q?/dc:creator><author>宋针q?/author><pubDate>Fri, 07 Dec 2007 01:05:00 GMT</pubDate><guid>http://www.tkk7.com/szhswl/articles/165945.html</guid><wfw:comment>http://www.tkk7.com/szhswl/comments/165945.html</wfw:comment><comments>http://www.tkk7.com/szhswl/articles/165945.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.tkk7.com/szhswl/comments/commentRss/165945.html</wfw:commentRss><trackback:ping>http://www.tkk7.com/szhswl/services/trackbacks/165945.html</trackback:ping><description><![CDATA[译QFrank <p>无论你是Ext库的新手Q抑或是想了解Ext的hQ本文章的内容都适合你。本文将单地介绍Ext的几个基本概念，和如何快速地做出一个动态的面q运行v来，假设读者已具备了一些JavaScriptl验和初U了解HTML Dom。否则的话，请从阅读<a target="_blank">初学JavaScript资源</a>开始?</p> <h2>下蝲Ext</h2> <p>如果你未曾下载过Q那应从q里下蝲最新版本的Ext <a target="_blank">http://www.extjs.com/downloads</a>?/p> <p>针对你的下蝲需求，有几个不同的Ҏ选项。通常圎ͼ最E_的版本，是较多h的选择。下载解包后Q那个example文g夹便是一个探索Ext的好地方Q?/p> <h2>开始！</h2> <p>我们用ExtQ来完成一些JavaScriptd?/p> <p>W一步要做的是，下蝲本教E的<a title="CZ文g" href="http://www.tkk7.com/Files/szhswl/IntroToExt.zip">CZ文g</a>。Zip文g包括三个文gQ?strong>ExtStart.html</strong>, <strong>ExtStart.js</strong>?strong>ExtStart.css</strong>。解包这三个文g到Ext的安装目录中Q例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新徏目录“tutorial”。双?strong>ExtStart.htm</strong>Q接着你的览器打开启动面Q应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误Q请按照面上的指引操作?/p> <p>在你常用的IDE中或文本~辑器中Q打开ExtStart.js看看Q?/p> <p>Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加蝲完毕后，保证面内的所有元素能被Script引用QreferenceQ。你可删除alert()那行Q加入一些实际用途的代码试试Q?/p> <pre>Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!"); }); </pre> <h2>ElementQExt的核?/h2> <p>大多数的JavaScript操作都需要获取页面上的某个元素（referenceQ?好让你来做有的事情。传l的JavaScriptҎQ是通过ID获取Dom节点的：</p> <pre>var myDiv = document.getElementById('myDiv');</pre> <p>q毫无问题，不过q样单单q回一个对象（DOM节点Q，用v来ƈ不是太强大和好用。ؓ了要用那节点q点事情Q你会要写不少自定义的代码Q另外，对于不同cd览器之间的差异Q要你处理v来可真头大了?/p> <p>q入<a target="_blank">Ext.element</a>对象。元素（elementQ的的确是Ext的心脏地带，--无论是访问元素（elementsQ还是完成一些动作，都要涉及它。Element的API是整个Ext库的基础Q如果你旉不多Q只想了解Ext中的一个类的话QElement一定是首选！</p> <p>由ID获取一个Ext Element如下Q首ExtStart.htm包含一个divQID名字?#8220;myDiv”Q然后，在ExtStart.js中加入下列语句）Q?/p> <pre>Ext.onReady(function() {var myDiv = Ext.get('myDiv');});</pre> <p>再回头看看Element对象Q发C么有的东东呢？</p> <ul> <li>Element包含了常见的DOMҎ和属性，提供一个快L、统一的、跨览器的接口Q若使用Element.dom的话Q就可以直接讉K底层DOM的节炏V）Q? <li>Element.get()Ҏ内置~存处理QCache)Q多ơ访问同一对象效率上有极大优势Q? <li>内置常用的DOM节点的动作，q且是跨览器的定位的位|、大、动甅R拖攄{（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/dropQ?</li> </ul> <p>q意味着你可用最的代码来做各种各样的事情，q里仅仅是一个简单的例子Q完整的列表?a target="_blank">ElementAPI</a>中）?/p> <p>l箋在ExtStart.js中，在刚才我们获取好myDiv的位|中加入Q?/p> <pre>myDiv.highlight(); //黄色高亮昄然后渐退 myDiv.addClass('red'); // d自定义CSSc?(在ExtStart.css定义) myDiv.center(); //在视图中元素居? myDiv.setOpacity(.25); // 使元素半透明 </pre> <h2>获取多个DOM的节?/h2> <p>通常情况下，不能由ID获取多个DOM的节点，有可能因为没讄ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这U情况下Q你会不用ID来作取元素的依据Q可能会用属性（attributeQ或CSS Classname代替。基于以上的原因QExt引入了一个功能异常强大的Dom Selector库，叫做<a target="_blank">DomQuery</a>?/p> <p>DomQuery可作为单独的库用，但常用于ExtQ你可以在上下文环境中（ContextQ获取多个元素，然后通过Element接口调用。幸q的是，Element对象本n便有<a target="_blank">Element.selcect</a>的方法来实现查询Q即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干D落Q?/p> <p>标签Q，没有一个是有ID的，而你惌村֜通过一ơ操作马上获取每一D，全体执行它们的动作，可以q样做：</p> <pre>// 每段高亮昄 Ext.select('p').highlight(); </pre> <p>DomQuery的选取参数是一D较长的数组Q其中包括W3C CSS3 Dom选取器、基本XPath、HTML属性和更多Q请参阅<a target="_blank">DomQuery API文档</a>以了解这功能强大的库的细节?/p> <h2>响应事g</h2> <p>到这范例为止Q我们所写的代码都是攑֜onReady中，卛_面加蝲后M立即执行Q功能较单一——这L话，你便知道Q如何响应某个动作或事g来执行你希望做的事情Q做法是Q先分配一个functionQ再定义一个event handler事g处理器来响应。我们由q个单的范例开始，打开ExtStart.htmQ编辑下列的代码Q?/p> <pre>Ext.onReady(function() { Ext.get('myButton').on('click', function(){ alert("You clicked the button"); }); }); </pre> <p>加蝲好页面，代码依然会执行，不过区别是，包含alert()的function是已定义好的Q但它不会立卛_被执行，是分配到按钮的单M件中。用显的文字解释，是Q获取ID?myDottom'元素的引用，监听M发生元素被单ȝ情况Qƈ分配一个function,以准备Q何单d素的情况?/p> <p>正\来说QElement.select也能做同L事情Q即作用在获取一l元素上。下一例中Q演CZ面中的某一D落被单dQ便有弹出窗口：</p> <pre>Ext.onReady(function() { Ext.select('p').on('click', function() { alert("You clicked a paragraph"); }); }); </pre> <p>q两个例子中Q事件处理的function均是单几句，没有函数的名Uͼq种cd函数UCؓ“匿名函数Qanonymous functionQ?#8221;Q即是没有名的的函数。你也可以分配一个有名字的event handler,q对于代码的重用或多个事件很有用。下一例等效于上一例：</p> <pre>Ext.onReady(function() { var paragraphClicked = function() { alert("You clicked a paragraph"); } Ext.select('p').on('click', paragraphClicked); }); </pre> <p>到目前ؓ止，我们已经知道如何执行某个动作。但当事件触发时Q我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢Q要明确q一炚w常简单，<a target="_blank">Element.on</a>Ҏ传入到even handler的function中（我们q里先讨论第一个参敎ͼ不过你应该浏览API文档以了解even handler更多的细节）。在我们之前的例子中Qfunction是忽略这些参数的Q到q里可有许的改变，——我们在功能上提供了更深层次的控制。必d说明的是Q这实际上是Ext的事件对象（event objectQ?一个跨览器和拥有更多控制的事件。例如，可以用下列的语句Q恢复这个事件的指定的DOM节点Q?br /> </p> <pre>Ext.onReady(function() { var paragraphClicked = function(e) { Ext.get(e.target).highlight(); } Ext.select('p').on('click', paragraphClicked); }); </pre> <p>注意指定的是DOM节点Q所以我们首先将其恢复成为适当的元素，然后执行Ʋ完成的事gQ这个例子中Q我们看见段落是高亮昄的?br /> <br /> 本文转自:http://www.ajaxjs.com/yuicn/article.asp?id=20071683</p> <img src ="http://www.tkk7.com/szhswl/aggbug/165945.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.tkk7.com/szhswl/" target="_blank">宋针q?/a> 2007-12-07 09:05 <a href="http://www.tkk7.com/szhswl/articles/165945.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss> <footer> <div class="friendship-link"> <p>лǵվܻԴȤ</p> <a href="http://www.tkk7.com/" title="亚洲av成人片在线观看">亚洲av成人片在线观看</a> <div class="friend-links"> </div> </div> </footer> վ֩ģ壺 <a href="http://hkcp168.com" target="_blank">ֱѹۿ</a>| <a href="http://fenxiangceo.com" target="_blank">߹ۿר</a>| <a href="http://1314xxx.com" target="_blank">޾ƷAv߹ۿ</a>| <a href="http://leeszewan.com" target="_blank">ҹ޾ƷƬ </a>| <a href="http://www-75044.com" target="_blank">ҹһ</a>| <a href="http://www-993789.com" target="_blank">޳߹ۿ</a>| <a href="http://jnyygs.com" target="_blank">ۺϼ޵һҳ</a>| <a href="http://25v8.com" target="_blank">ëƬƵ</a>| <a href="http://cykj-tech.com" target="_blank">aɻ߹ۿ</a>| <a href="http://hylaowu.com" target="_blank">ɫ</a>| <a href="http://sdzntg.com" target="_blank">ר˿</a>| <a href="http://ttays.com" target="_blank">avҹһƬѿþ</a>| <a href="http://bjymt.com" target="_blank">ҹѸƵ</a>| <a href="http://www-840012.com" target="_blank">޾þһح </a>| <a href="http://sxhnyl.com" target="_blank">Aһ</a>| <a href="http://gsonlinet.com" target="_blank">50Ů˵ëƬѹۿ</a>| <a href="http://9akk.com" target="_blank">ѹaƬ</a>| <a href="http://4husese.com" target="_blank">AVרAv</a>| <a href="http://appmofun.com" target="_blank">ɫͼƬС˵</a>| <a href="http://jpvv8.com" target="_blank">ĻӰѹۿ</a>| <a href="http://by8847.com" target="_blank">ŵ</a>| <a href="http://lswqn.com" target="_blank">ŮſȸͰƵ</a>| <a href="http://sdnuoyuan.com" target="_blank">޾ƷAAAƬ</a>| <a href="http://ww99w.com" target="_blank">þҹ</a>| <a href="http://sanyoumiaomu.com" target="_blank">߻ɫַ</a>| <a href="http://saohuo7.com" target="_blank">Ƶվ߿</a>| <a href="http://singbomb.com" target="_blank">Av뾫Ʒɫҹ</a>| <a href="http://wankufan.com" target="_blank">ִֻļƵ߹ۿƵ </a>| <a href="http://xinyuanmy.com" target="_blank">AVƬ߹ۿ</a>| <a href="http://kingleadsw.com" target="_blank">СƵ߹ۿ</a>| <a href="http://6123fa.com" target="_blank">xxxx</a>| <a href="http://www84847.com" target="_blank">Ƭѿ</a>| <a href="http://rhacu.com" target="_blank">ѹ߹ۿӰԺ</a>| <a href="http://chaoxung.com" target="_blank">һһһëƬëƬ</a>| <a href="http://uu313.com" target="_blank">޾Ʒ99þþþĻ</a>| <a href="http://www-70074.com" target="_blank">aëƬѿ</a>| <a href="http://28896543.com" target="_blank">Ʒ˳</a>| <a href="http://lyaa17.com" target="_blank">99߾ƷѲ6</a>| <a href="http://1314c.com" target="_blank">AVպAVŸ߹ۿ</a>| <a href="http://by6635.com" target="_blank">йëƬѹۿƵ</a>| <a href="http://zblinghang.com" target="_blank">ƵĻ</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body>