EXT入门(一)

news/2024/7/4 3:43:53 标签: ext, function, stylesheet, button, html, div
<div id="article_content" class="article_content clearfix"> <div id="content_views" class="htmledit_views"> 今天看了下html" title=ext>ext的 桌面效果,感觉是很漂亮的UI,心动拉,决定好好学学,不过好像没那么简单,呵呵
看下入门教程,整理下,希望可以和一些朋友一起学习(wully)
1    更新body

<div style="border: 0.5pt solid windowthtml" title=ext>ext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"> <div> < html >
< head >
< meta http - equiv = " Content-Type "  content = " thtml" title=ext>ext/html; charset=iso-8859-1 " >
< title > test </ title >

    
< link rel = " html" title=stylesheet>stylesheet "  type = " thtml" title=ext>ext/css "  href = " js/html" title=ext>ext/resources/css/html" title=ext>ext-all.css "   />
    
<!--  GC  -->
     
<!--  LIBS  -->
     
< script type = " thtml" title=ext>ext/javascript "  src = " js/html" title=ext>ext/adapter/html" title=ext>ext/html" title=ext>ext-base.js " ></ script >
     
<!--  ENDLIBS  -->

    
< script type = " thtml" title=ext>ext/javascript "  src = " js/html" title=ext>ext/html" title=ext>ext-all.js " ></ script >
    
    
    
< script type = " thtml" title=ext>ext/javascript " >
     html" title=function>function update()
html" title=ext>ext">{
        Ext.
get(document.body).update('<div id="test">update</div>');
     }

    
</ script >
  
</ head >
< body id = " body " >
< div > init </ div >
< input type = " html" title=button>button "  value = " sumbit "  onclick = " update() " >
</ body >
</ html >
div> div>
2 添加面板

<div style="border: 0.5pt solid windowthtml" title=ext>ext; padding: 4px 5.4pt; background: rgb(230, 230, 230) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 95%;"> <div> < html >
< head >
< meta http - equiv = " Content-Type "  content = " thtml" title=ext>ext/html; charset=iso-8859-1 " >
< title > test </ title >

    
< link rel = " html" title=stylesheet>stylesheet "  type = " thtml" title=ext>ext/css "  href = " js/html" title=ext>ext/resources/css/html" title=ext>ext-all.css "   />
    
<!--  GC  -->
     
<!--  LIBS  -->
     
< script type = " thtml" title=ext>ext/javascript "  src = " js/html" title=ext>ext/adapter/html" title=ext>ext/html" title=ext>ext-base.js " ></ script >
     
<!--  ENDLIBS  -->

    
< script type = " thtml" title=ext>ext/javascript "  src = " js/html" title=ext>ext/html" title=ext>ext-all.js " ></ script >
    
    
    
< script type = " thtml" title=ext>ext/javascript " >
     html" title=function>function addPanel()
html" title=ext>ext">{
        
new Ext.Panel(html" title=ext>ext">{
            renderTo: 
'test',
            width: 
'200px',
            title: 
'My Title',
            html
'My HTML content'
        }
);
     }

     addPanel();
    
</ script >
  
</ head >
< body id = " body " >
< input type = " html" title=button>button "  value = " addPanel "  onclick = " addPanel() " >
< div id = " test " ></ div >
</ body >
</ html >
div> div> 3 剩下的应该就是照着这俩个例子,打开 http://127.0.0.1/html" title=ext>ext/docs/(呵呵,这个要安装html" title=ext>ext)
去看API拉 。GO ON!!!!!

4  EXT的一些基本方法
    Ext. onReady()
会在DOM加载全部完毕后,保证页面内的所有元素能被Script引用(reference)之后调用,应该在上面添加些初始化的方法。
   

对一个建立的DIV进行操作(<div id=myDiv>test</div>)
myDiv = Ext.get('myDiv');
myDiv.highlight(); //黄色高亮显示然后渐退
myDiv.addClass('red'); // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center(); //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明
/* 每段高亮显示
<p>parmgraph</p>

Ext. select ( 'p' ). highlight ( );
//Element对象本身有Element.selcect的方法来实现查询(返回多个对象)
*/

5 事件的响应
对按钮点击事件
<input type="html" title=button>button" id="myButton" value="My Button" />
Ext.onReady(html" title=function>function() {
Ext.get('myButton').on('click', html" title=function>function(){
alert("你单击了按钮");
});
});
对段落的点击事件

Ext.onReady(html" title=function>function() {
Ext.select('p').on('click', html" title=function>function() {
alert("你单击了一段落;");
});
});
或者

Ext.onReady(html" title=function>function() {
var paragraphClicked = html" title=function>function() {
alert("你单击了一段落;");
}
Ext.select('p').on('click', paragraphClicked);
});

或者
Ext.onReady(html" title=function>function() {
var paragraphClicked = html" title=function>function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
e.target是DOM节点

div> div> <div id="treeSkill">div>

http://www.niftyadmin.cn/n/1153095.html

相关文章

Nordic nRF52832/nRF51822 GPIOTE

1、GPIOTE 简单介绍 Nordic 的GPIO中断是通过 GPIOTE这个外设模块来实现的。 GPIOTE 使用task 和event的方式来控制GPIO&#xff0c;GPIO做为输出可以通过 GPIOTE task 来控制IO输出高电平、低电平、或者翻转电平&#xff0c;GPIO做为输入在IO发生变化&#xff08;Rising edge、…

html5学习笔记(4)

XHTML可扩展的超文本标记语言文档声明&#xff1a;DTD&#xff1a;html5与html4的区别html5新增的元素&#xff1a;结构元素&#xff1a;section &#xff0c;article&#xff0c; aside&#xff0c; header&#xff0c;hgroup&#xff0c;footer, nav, figure其他元素&#xf…

JS中的一维数组和二维数组

一维数组&#xff1a; 对于一维数组的声明有以下几种&#xff1a; 1.var fruitnew Array(); 2.var fruit new Array(3); 3.var fruit new Arrat(3, 4); 二维数组的声明&#xff1a; 1.var arraynew Array(new Arrat(3, 4),new Arrat(a, c)); 2.var array new Array[[1,2,4,6]…

EXT入门(二)---UI

1 MessageBox&#xff08;消息提示框&#xff09; Ext.onReady(function() {var paragraphClicked function(e) {var paragraph Ext.get(e.target);paragraph.highlight();Ext.MessageBox.show({title: Paragraph Clicked,msg: paragraph.dom.innerHTML,width:400,buttons: …

java 标识符

java 标识符 java 所有的组成部分都需要名字。类名、变量名以及方法名都被称为标识符。 java 标识符 1、所有的标识符都应该以字母&#xff08;A-Z或者a-z&#xff09;&#xff0c;特殊符号&#xff08;美元符$&#xff09;、或者下划线&#xff08;_&#xff09;开始 2、首字母…

关于在smarty中实现省市区三级联动

刚开始接触php&#xff0c;&#xff0c;其实对于一些比较深入的东西还不是很了解&#xff0c;就像是这次的省市区联动&#xff0c;都是用三张表为基础编码的&#xff0c;原谅我的无知&#xff0c;谢谢。 接下来就是编码部分了&#xff1a; <?php require(./smarty/Smarty.c…

异步上传文件

这里我写的有点重复了 不太简洁 整体可以再优化 formData 是DOM对象 不是jquery对象 var formData new FormData($("#file")[0]); 对象.append() 可以追加表单内所有信息上传服务器 Jquery的对象是 不能处理file serialize() 序列化表单&#xff0c;用于 Ajax 请求…