Ext 3.4.0之学习之路

来源：互联网发布：爱奇艺网络剧合作模式编辑：程序博客网时间：2024/04/30 02:05

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

以下是所有的'xtype'和类的对应关系 xtype            Class-------------    ------------------box              Ext.BoxComponentbutton           Ext.Buttonbuttongroup      Ext.ButtonGroupcolorpalette     Ext.ColorPalettecomponent        Ext.Componentcontainer        Ext.Containercycle            Ext.CycleButtondataview         Ext.DataViewdatepicker       Ext.DatePickereditor           Ext.Editoreditorgrid       Ext.grid.EditorGridPanelflash            Ext.FlashComponentgrid             Ext.grid.GridPanellistview         Ext.ListViewpanel            Ext.Panelprogress         Ext.ProgressBarpropertygrid     Ext.grid.PropertyGridslider           Ext.Sliderspacer           Ext.Spacersplitbutton      Ext.SplitButtontabpanel         Ext.TabPaneltreepanel        Ext.tree.TreePanelviewport         Ext.ViewPortwindow           Ext.WindowToolbar components---------------------------------------paging           Ext.PagingToolbartoolbar          Ext.Toolbartbbutton         Ext.Toolbar.Button        (过时的；使用 button)tbfill           Ext.Toolbar.Filltbitem           Ext.Toolbar.Itemtbseparator      Ext.Toolbar.Separatortbspacer         Ext.Toolbar.Spacertbsplit          Ext.Toolbar.SplitButton   (过时的；使用 splitbutton)tbtext           Ext.Toolbar.TextItemMenu components---------------------------------------menu             Ext.menu.Menucolormenu        Ext.menu.ColorMenudatemenu         Ext.menu.DateMenumenubaseitem     Ext.menu.BaseItemmenucheckitem    Ext.menu.CheckItemmenuitem         Ext.menu.Itemmenuseparator    Ext.menu.Separatormenutextitem     Ext.menu.TextItemForm components---------------------------------------form             Ext.form.FormPanelcheckbox         Ext.form.Checkboxcheckboxgroup    Ext.form.CheckboxGroupcombo            Ext.form.ComboBoxdatefield        Ext.form.DateFielddisplayfield     Ext.form.DisplayFieldfield            Ext.form.Fieldfieldset         Ext.form.FieldSethidden           Ext.form.Hiddenhtmleditor       Ext.form.HtmlEditorlabel            Ext.form.Labelnumberfield      Ext.form.NumberFieldradio            Ext.form.Radioradiogroup       Ext.form.RadioGrouptextarea         Ext.form.TextAreatextfield        Ext.form.TextFieldtimefield        Ext.form.TimeFieldtrigger          Ext.form.TriggerFieldChart components---------------------------------------chart            Ext.chart.Chartbarchart         Ext.chart.BarChartcartesianchart   Ext.chart.CartesianChartcolumnchart      Ext.chart.ColumnChartlinechart        Ext.chart.LineChartpiechart         Ext.chart.PieChartStore xtypes---------------------------------------arraystore       Ext.data.ArrayStoredirectstore      Ext.data.DirectStoregroupingstore    Ext.data.GroupingStorejsonstore        Ext.data.JsonStoresimplestore      Ext.data.SimpleStore      (过时的；使用 arraystore)store            Ext.data.Storexmlstore         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的使用：