ExtJS基本操作
Ext.onRedy(function(){//1.id选择器 var myDiv = Ext.get('myDiv'); //id选择器,JQuery:var myDIv=$("#myDiv"); myDiv.highlight(); //黄色高亮显示后渐退 myDiv.addClass('red'); //添加CSS，JQuery:myDiv.addClass('red'); myDiv.center(); //元素居中 myDiv.setOpacity(.25); //是元素半透明//2.标签选择器 Ext.select('p').highlight(); //每段高亮显示//3.事件 Ext.get('myButton').on('click',function(){ alert("Test button click"); }); Ext.select('p').on('click',function(){ alert("Test click <p></p>"); }); var pClicked = function(e){ Ext.get(e.target).highlight(); //获取目标 var paragraph = Ext.get(e.target); Ext.Message.show({ title: 'P clicked!', msg: p.dom.innerHTML, width: 400, buttons: Ext.MessageBox.OK, animEl: paragraph//注意最后一个不能用逗号 }); } Ext.select('p').on('click',pClicked);//4.Grid表格 //a.创建数据源 var myData =[ ['Meizu',29.89,0.24,0.81,'1/1 8:00am'], ['Huawei',80.19,0.24,0.81,'1/1 8:00am'], ['Zte',52,0.24,0.81,'1/1 8:00am'] ]; //b. var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(myData); reader: new Ext.data.ArrayReader({id:0},[ {name: 'company'}, {name: 'price'}, {name: 'change'}, {name: 'pctChange'}, {name: 'lastChange'}, ]) }); 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.utildataRender('m/d/y'), dataIndex: 'lastChange'} ]); var grid = Ext.grid.Grid('grid-example',{ds: ds,cm: colModel}); grid.render(); grid.getSelectionModel().selectFirstRow(); //第一行选中//5.Ajax异步 Ext.get('okButton').on('click', function(){ var msg = Ext.get('msg'); msg.load({ url: ['www.test.com'], params: 'name=' + Ext.get('name').dom.value, text: 'Updating...' }); });});
页:
[1]