EXT.js学习（二）

按钮

使用 listeners 配置添加更多的事件处理器

Ext.create('Ext.Button', {   
    text: 'My Button',   
    renderTo: Ext.getBody(),   
    listeners: {     
        click: {       
            fn: function(){
                //Handle click event         
                alert('click');
            }
        },
        mouseout: {       
            fn: function(){
                //Handle double click event         
                alert('Mouse out');
             }
        }
    }
});

Ext.MessageBox.show({   
    title:'Save Changes?',   
    msg: 'Do you want to save the file?',   
    buttons: Ext.MessageBox.YESNO,   
    // 自定义： 
    buttonText: {yes:'ok?'},
    fn: function(button){     
        if('yes'==button){
 
        }else if('no'==button){
 
        }   
    },
    icon: Ext.MessageBox.QUESTION 
}) ;

---

Store?

下列代码是一个 store 的例子，它使用 RESTful API 请求加载为 JSON 格式数据：

var myStore = Ext.create('Ext.data.Store', {
    model: 'Employee',   
    storeId: 'mystore',   
    proxy: {     
        type: 'rest',     
        url: '/employee',     
        reader: {       
            type: 'json',       
            rootProperty: 'data'
        }
    },   
    autoLoad: true,   
    autoSync: true 
});

store-grid

1. 通过renderer向数据添加HTML,URL,图片，符号
2. 过滤
   通过添加 Ext.grid.filters.Filters (ptype: gridfilters) 插件到 grid 并对列进行配置可以很容易实现过滤功能：

Ext.application({   
    name : 'Fiddle',   
    launch : function() {
        Ext.create('Ext.grid.Panel', {   
            renderTo: Ext.getBody(),   
            store: productStore,
            // gridfilters插件 -- 筛选
            plugins: 'gridfilters',
            width: 600,   
            title: 'Products',   
            columns: [{     
                text: 'Id',     
                dataIndex: 'id',     
                hidden: true
            },{     
                text: 'Name',     
                width:150,
                dataIndex: 'productname',
                // 设置筛选格式
                filter:'string'
            },{
                text: 'Description',     
                dataIndex: 'desc',     
                sortable: false,     
                flex: 1,
                // 设置筛选格式
                filter: {       
                    type: 'string',
                    itemDefaults: {   
                        emptyText: 'Search for…' 
                    }
                }
            },{     
                text: 'price',     
                width: 100,     
                dataIndex: 'price',
                renderer: function(value){
                    // 添加'$'符号
                    return Ext.String.format('${0}',value);
                }
            }]
        });
      }
});

// store数据
Ext.define('Product', {   
    extend: 'Ext.data.Model',
    fields: [ 'id', 'productname', 'desc', 'price' ] 
});

var productStore = Ext.create('Ext.data.Store', {
    model: 'Product',   
    data: [{     
        id: 'P1',
        productname: 'Ice Pop Maker',
        desc: 'Create fun and healthy treats anytime',
        price: '16.33'
    }, {     
        id: 'P2',
        productname: 'Stainless Steel Food Jar',     
        desc: 'Thermos double wall vacuum insulated food jar',
        price: '14.87'
    },{     
        id: 'P3',
        productname: 'Shower Caddy',
        desc: 'Non-slip grip keeps your caddy in place',
        price: '17.99'
    }, {     
        id: 'P4',
        productname: 'VoIP Phone Adapter',
        desc: 'Works with Up to Four VoIP Services Across One Phone Port',
        price: '47.50'
    }] 
});

store-grid