|
开始... Ext.onReady(function() { alert('hello world!'); }); 上面的代码将在页面加载完毕后弹出一对话框,打印出'hello world!'字样. 获取元素 还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素: var myDiv = Ext.get('myDiv'); 会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象. 在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的 标签,则可以使用: var ps = Ext.select('p'); 这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的节点进行遍历: ps.each(function(el) { el.highlight(); }); 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如: ps.highlight(); 或是: Ext.select('p').highlight(); 当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML属性等,详细情况,可以查看DomQuery API的文档,来了解细节. 事件响应 获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应: Ext.onReady(function() { Ext.get('myButton').on('click', function() { alert('You clicked the button!'); }); }); 当然,你可以把事件的响应加到通过select()方法获取到的元素上: Ext.select('p').on('click', function() { alert('You clicked a paragraph!'); }); Widgets ExtJS还提供了丰富的UI库来供大家使用. 消息窗口 将前面的alert()方法替换一种ExtJS提供的方案: Ext.onReady(function() { Ext.get('myButton').on('click', function() { alert('You clicked the button!'); }); }); |