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

});