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...'      });    });});