Ext 3.4.0之学习之路

1. 关于Extjs 3.4.0中提供的xtype以及对应的类：

以下是所有的'xtype'和类的对应关系 
xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
buttongroup      Ext.ButtonGroup
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
flash            Ext.FlashComponent
grid             Ext.grid.GridPanel
listview         Ext.ListView
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
spacer           Ext.Spacer
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components
---------------------------------------
paging           Ext.PagingToolbar
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button        (过时的；使用 button)
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton   (过时的；使用 splitbutton)
tbtext           Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu             Ext.menu.Menu
colormenu        Ext.menu.ColorMenu
datemenu         Ext.menu.DateMenu
menubaseitem     Ext.menu.BaseItem
menucheckitem    Ext.menu.CheckItem
menuitem         Ext.menu.Item
menuseparator    Ext.menu.Separator
menutextitem     Ext.menu.TextItem

Form components
---------------------------------------
form             Ext.form.FormPanel
checkbox         Ext.form.Checkbox
checkboxgroup    Ext.form.CheckboxGroup
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
displayfield     Ext.form.DisplayField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
radiogroup       Ext.form.RadioGroup
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Chart components
---------------------------------------
chart            Ext.chart.Chart
barchart         Ext.chart.BarChart
cartesianchart   Ext.chart.CartesianChart
columnchart      Ext.chart.ColumnChart
linechart        Ext.chart.LineChart
piechart         Ext.chart.PieChart

Store xtypes
---------------------------------------
arraystore       Ext.data.ArrayStore
directstore      Ext.data.DirectStore
groupingstore    Ext.data.GroupingStore
jsonstore        Ext.data.JsonStore
simplestore      Ext.data.SimpleStore      (过时的；使用 arraystore)
store            Ext.data.Store
xmlstore         Ext.data.XmlStore

2. 下面是一个简单的分页查询的页面js代码：

 2.1 先是首页显示查询的gridpanel的页面代码：

/**
 * @author: JohnLiu
 * @Date: 13-2-21
 * @Time: 4:52 pm
 */

Ext.MembershipMStream = function(config)
{
    
    var mStore = new Ext.data.JsonStore({
    	autoDestroy: true,
    	proxy: new Ext.data.HttpProxy({
    		method: 'post',
    		url: '../sitestatistics/membershipListData.json'
    	}),
    	root: 'grid.data',
    	totalProperty: 'grid.total',
    	fields: [
    		{name: 'id' ,type: 'float'},
    		'portalData',
    		'province',
    		'area',
    		{name: 'countTime', type: 'date',dateFormat: 'time'},
    		{name: 'yearUv', type: 'float'},
    		{name: 'additionUv', type:'float'},
    		{name: 'spid', type: 'float'}
    		]
    });
    mStore.load();

Ext.MembershipMStream.superclass.constructor.call(this, {
	region:'center',
    loadMask : true,
    store: mStore,
    ddGroup: 'gridToTreeDDGroup',
    enableDragDrop: true,
    columns:[
        {header: '序号',  width: 60,fixed: true ,
        	                          renderer: function(value, metaData ,record , rowIndex, colIndex, store){
        	                          	return store.reader.jsonData.grid.start+rowIndex+1;
         }},
         {header: '门户', dataIndex: 'portalData', sortable: true},
      	 {header: '省份', dataIndex: 'province'},
         {header: '市区', dataIndex: 'area'},
         {header: '时间', dataIndex: 'countTime',
        	                         renderer: Ext.util.Format.dateRenderer('Y-m-d'), width:160 },
         {header: '年度', dataIndex: 'yearUv'},
         {header: 'additionUv', dataIndex: 'additionUv'},
         {header: 'spid', dataIndex: 'spid'}
        ],
        stripeRows: true,
        border:false,
        tbar: new Ext.MembershipMStreamTopToolbar(this),
        bbar: new Ext.PagingToolbar({
        	pageSize: 100,
        	store: mStore,
        	displayInfo: true,
        	listeners: {
        		beforechange  : function(){
        			mStore.setBaseParam('startTime', me.startTime || '');
        			mStore.setBaseParam('endTime', me.endTime || '');
        			mStore.setBaseParam('province', me.province || '');
        			mStore.setBaseParam('portalData', me.portalData || '');
        		}
        	}
        })
    });
};

Ext.extend(Ext.MembershipMStream, Ext.grid.GridPanel);

 2.2 为首页添加的topToolBar的代码：

 

/**
 * @author: 
 * @Date: 13-2-21
 * @Time: 4:52 pm
 */
Ext.MembershipMStreamTopToolbar = function(oGrid)
{
    var me = this;
    var nowDate = new Date();
    var startDate = new Date(nowDate.getFullYear(), nowDate.getMonth()-1, nowDate.getDay()) ;
    
    Ext.MembershipMStreamTopToolbar.superclass.constructor.call(this, {
        enableOverflow: true,
        items: [
            {
                xtype: 'tbtext',
                text: '<span style="color: red;"> *</span>开始年月：'
            },
            {
                xtype: 'datetimefield' , format: 'Y-m-d', 
                maxValue: nowDate, allowBlank: false
                ,value:startDate, id: '_startTime'
            },{xtype: 'tbspacer', width: 10},
            {
                xtype: 'tbtext',
                text: '<span style="color: red;"> *</span>结束年月：'
            },
            {
                xtype: 'datetimefield' , format: 'Y-m-d', 
                maxValue: nowDate, allowBlank: false,
                value: nowDate   ,id: '_endTime'
            },{xtype: 'tbspacer', width: 10},
            {
                xtype: 'tbtext',
                text: '省份：'
            },
            {
            	xtype : 'singleProvinceCombo',
                id:'provinceId'
            },{xtype: 'tbspacer', width: 10},
            {
            	text: '门户',
                cmpId: 'home',
                xtype: 'portalCombox'
            } ,{xtype: 'tbspacer', width: 10},
             {
            	xtype: 'tbtext',
            	text: '渠道ID：',
            	value:"请输入渠道ID" 
            	},
             {
             	xtype: 'textfield'
             },{xtype: 'tbspacer', width: 10},
            {
                text: '查询',
                iconCls: 'search',
                handler: function(oButton, oEvent)
                {
                	var aComponents = me.findByType('textfield');
                    var startTime = aComponents[0].getRawValue();
                    var endTime = aComponents[1].getRawValue();
                    var province = Ext.getCmp('provinceId').getRawValue();
                    var portalData = aComponents[3].getValue();
                    var spidData = aComponents[4].getValue();
                    
                    oGrid.startTime = startTime;
                    oGrid.endTime = endTime;
                    oGrid.province = province;
                    oGrid.portalData = portalData;
                    
                     oGrid.getStore().load({params: {
                    	startTime: startTime,
                    	endTime: endTime,
                    	province: province,
                    	portalData: portalData
                    }});
                    
                }
            }
            ,{xtype: 'tbspacer', width: 10},
            {
            	text:     '图形分析',
            	iconCls:  'search',
                handler: function(oButton, oEvent)
            	{
                  //var parentWindow = new parent.Window.Ext.MembershipMChartTab();
                  var win = new parent.Ext.MembershipMChartTab();
                  win.show();
            	}
            },
            '->',
            {
                text: '帮助',
                iconCls: 'help'
            }
        ]
    });
};

Ext.extend(Ext.MembershipMStreamTopToolbar, Ext.Toolbar);

以上是一个基本的Ext.form.GridPanel的实例显示，还有topToolBar的使用：