extjs的常用组件语法

extjs是面向组件编程的一个easyUI的jquery框架

主要构成有 conditionForm(里面放一些combox,text,radio,button等查见组件)

grid(展示数据,主要有tbar,bbar (头部工具条,底部工具条))

store(页面数据传递的格式,JsonStore  主要也是映射关系   {a:1,b:2} 大概是这个样子的)

panel面板

tree展示目录列表

var orderStore = new Ext.data.JsonStore({
       root: 'root',
       totalProperty: 'totalCount',
       idProperty: 'id',
       remoteSort: true,
       fields: [
           
{name:'CONSIGN_TIME'},
{name:'DESCRIPTION'}

       ],
       url: '/pfs/tbgx/xxxx'       //这里是请求的control,通过spring注解@RequestMapping("/em/admin/xxxxx")
   });

 var gridSelectionModel = new Ext.grid.CheckboxSelectionModel();
 
var bbar = new Ext.PagingToolbar({
       pageSize: pageSize,
       store: orderStore,
       displayInfo: true,
       emptyMsg:"没有记录" 
   });

这是展示数据的grid

var orderGrid = new Ext.grid.EditorGridPanel({
       stateId:'taobaoOrderGrid',
       ref:'ordergrid',
       region: 'center',
       store: orderStore,
       trackMouseOver:false,
       loadMask: true,
       stripeRows:true,
       height:240,
       columns:[
         new Ext.grid.RowNumberer(),          //前面多一列来显示行号
 gridSelectionModel,
         {header:"订单ID",dataIndex:"TB_GX_ID",align:'center' ,hidden:true, sortable: true},   ///展示数据的列标题,根据dataindex从jsonstore中取数据
         
         {header:"分销方式",dataIndex:"TRADE_TYPE",align:'center',sortable: true ,align:'center' ,renderer:function(val){
        if(val == 'AGENT'){
         return "代销";
         }else if(val == 'DEALER'){    //在页面上对数值进行简单判断然后展示结果
         return "经销";
         }else {
         return null;
         }
         }},
         {header:"下单时间",dataIndex:"CREATED",align:'center'#*,renderer:function(val){
           if(null==val || ""==val){
               return null; //在页面上对取出来的时间展示成对应的形式
           }else{
               return Ext.util.Format.date(new Date(parseInt(val)),'Y-m-d H:i:s');
           }
         }*#},
         return "<font color='red'>推送失败,需人工处理</font>"; //类似html中给文字添加一定的式样
       
         ],
 
sm: gridSelectionModel,
       viewConfig: {forceFit:true},
 
       tbar:[ //在顶部添加一些按钮
{text: '刷新', handler:function(){
orderGrid.fireEvent('refresh');}, 
scope : this
}, '|',

],
       bbar:bbar
   });

//调用按钮的方法

orderGrid.on("orderDetail",function(){
      var sm = orderGrid.getSelectionModel();
      if(sm.hasSelection()){
var feixiaoId = sm.getSelected().data.FENXIAO_ID;
//alert(feixiaoId);
    Ext.Ajax.request({
    url: '/pfs/tbgx/orderTaxxxxxxxxxx,
    method : 'post',
    dataType : 'json',
    params : {'feixiaoId' : feixiaoId},
    success: function(response, opts){
    default_ajax_request_success_callback(response, opts);
    },
    failure: default_ajax_request_failure_callback
    });
}else{
alert('请选择要查看的订单！');
}
},orderGrid);
   
//给一个触发事件.
   orderGrid.addListener('cellclick', function(gd,rowindex,e) {
var sm = gd.getSelectionModel();
if (sm.hasSelection()){
var sel = sm.getSelected();
  ID = sel.data.TB_GX_ID;
  goodStore.load({params:{tbGxId:ID,start:0, limit:pageSize}});
}
});

 var statusCombo =  new Ext.form.ComboBox({
        store : statusStore,
        editable : false,
        valueField : 'val',
        displayField : 'key',
        triggerAction : 'all', 
        hiddenName : 'order_query_status',
        mode : 'remote',
        fieldLabel : '订单状态'
   });*#

 var conditionForm = new Ext.FormPanel({
            region: 'north',
            labelWidth: 100, 
            url:'/pfs/tbgx/getOrderDetails',
            frame:true,
            title:'查询条件',
            collapsible : true,    
            animCollapse:false,
            bodyStyle: 'padding:5px 5px 0',
            defaultType: 'textfield',
            autoHeight:true,
            layout:'column',
            items:[{
            xtype:'panel',
                layout:'form',
                columnWidth: .2,
                defaultType: 'textfield',
                defaults: {anchor:'90%'}, 
                items:[{
fieldLabel: 'xxxxxx',
        allowDecimals: false,
        name: 'tcOrderID',
        id: 'tcOrderID'
},new Ext.form.DateField({ 
                   id:'startTimeOrder', 
                   format:'Y-m-d',
                   maxValue :'12/31/2111',
                   minValue :'01/01/2008',
                   fieldLabel:'下单日期',
                   editable:false
})
]
            },{
            xtype:'panel',
                layout:'form',
                columnWidth: .2,
                defaultType: 'textfield',
                defaults: {anchor:'90%'}, 
                items:[{
fieldLabel: '物流单号',
        allowDecimals: false,
        name: 'logisticsID',
        id: 'logisticsID'
},{
id:'orderStatusSel',
                    hiddenName: 'key',
name :'val',
                    xtype:'combo',
                    mode : 'local',
                    allowBlank: true,
                    fieldLabel:'订单状态',
                    valueField : 'orderStatusId',
                    displayField:'orderStatusName',
                    store: new Ext.data.SimpleStore({
                       fields:[
                          {name: 'orderStatusId', mapping: 'key'},
                          {name: 'orderStatusName', mapping: 'val'}
                       ],
                       data:$orderStatusList
                    }),
                    triggerAction:'all',
                    emptyText:'请选择订单状态',
                    selectOnFocus:'true',
                    editable:false
}
]
            }],
            buttonAlign:'center',
            buttons:[{
                text: '重置',
                listeners:{
click:function(){
                        this.findParentByType('form').getForm().reset();
statusCombo.setValue(null);
                    }
                }
              },{
                text: '查询',
                ref:'../queryBtn',
                listeners:{
click:function(){
                        orderStore.baseParams=Ext.apply({},this.findParentByType('form').getForm().getValues(),orderStore._baseParams);
                        orderStore.load({params:{start:0, limit:pageSize, node : selectedId}});
                    }
                }
            }]
        });

var panel_config = {
id:panel_id,
xtype:'panel',
layout:'border',
closable:true,
title:'xxxxxx订单管理',
items:[conditionForm,orderGrid,goodGrid]
};

var panel = Ext.getCmp('main').add(panel_config).show();
//statusStore.load();
orderStore.baseParams=Ext.apply({},conditionForm.getForm().getValues());
orderStore.load({params:{start:0, limit:pageSize, node : selectedId}});

#set($layout = "/layout/blank.vm")
{
return_type : 'js',
run:function(){
       return panel;
}
}