ext 基本知识

来源：互联网发布：linux管理面板编辑：程序博客网时间：2024/06/06 03:11

inc

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>供应商产品信息信息</title>
  <%@include file="/common/public.inc"%>
  <script type="text/javascript" src='<%=request.getContextPath()%>/console/baseProduct/js/baseProduct.js?a = <%= new java.util.Date().getTime()%>'></script>

</head>
</body>
</html>

var limit = 20;

BaseOrgMgtPanel = Ext.extend(Ext.Panel,{
constructor : function (){
  var baseOrgGrid = new BaseOrgGrid();
  BaseOrgMgtPanel.superclass.constructor.call(this,{
   title:'经销商产品管理'
   ,frame: true
   ,renderTo: Ext.getBody()
   ,height:705
         ,loadMask: true
   ,layout: 'column'
   ,items:[
    {
     columnWidth:1
     ,height:640
     ,layout: 'fit'
     ,items:[baseOrgGrid]
    }
   ]
   ,tbar:[
   {
    text:'新增'
        ,tooltip : '新增'
        ,iconCls: 'icon-add'
        ,pressed: true
        ,handler: function(btn){
         orgSaveOrUpdate(baseOrgGrid.getStore());
        }
   }
   ,'->'
   ,'供应商名称：'
   ,{
    xtype: 'combo'
       ,fieldLabel: '供应商名称'
       ,id:'orgname_id'
          ,hiddenName: 'orgId'
          ,store: baseOrgName
       ,valueField : 'orgId'
    ,displayField : 'orgName'
       ,triggerAction: 'all'
    ,forceSelection: true
    ,allowBlank: true
    ,editable: true
    ,mode: 'local'
   }
   ,'产品名称：',{id:"productName",xtype:'textfield',width:135}
   ,{
    text:"清空",
    iconCls:'icon-query',
    pressed:true,
    style:'padding:1px 2px;margin-left:5px;',
    handler:function(){
     Ext.getCmp('productName').setValue('');
     Ext.getCmp('orgname_id').setValue('');
    }
   },{
    text:'查询',
    iconCls:'icon-query',
    pressed:true,
    handler:function(){
     baseOrgGrid.getStore().load();
    }
   }
   ]
  });
}
});

/**
* grid控件
*/
BaseOrgGrid = Ext.extend(Ext.grid.GridPanel,{
constructor : function(){
  var store;
  var grid = this;
    BaseOrgGrid.superclass.constructor.call(this,{
      bodyStyle:'border:1px solid #99BBE8;'
   ,loadMask:true
   ,id :'BaseProductGridID'
   ,stripeRows:true
   ,store: store = new Ext.data.GroupingStore({
      url:path+'/baseProductAction!getSplitData.htm'
      ,autoLoad: true
      ,autoDestroy: true
      ,autoSave: false
      ,baseParams: {'limit': limit,'start':0}
      ,pruneModifiedRecords:true
          ,reader: new Ext.data.JsonReader({
           root:'root'
           ,totalProperty:'totalProperty'
        ,fields : [
         {name:'id'},{name:'name'},{name:'code'}
      ,{name:'memo'},{name:'price'},{name:'spec'},{name:'day'},{name:'orgId'}
        ]
      })
      ,sortInfo: {field: 'name', direction: 'DESC'}
      ,listeners : {
        'beforeload': function(store,options){
         Ext.apply(store.baseParams,{
       'product.name': Ext.fly('productName').getValue(),
       'product.orgId':Ext.getCmp('orgname_id').getValue()

      });
        }
      }
      })
      ,columns:[
      new Ext.grid.RowNumberer()
    ,{header:'产品名称',sortable:true,dataIndex:'name',width:80}
    ,{header:'产品编码',sortable:true,dataIndex:'code',width:140}
    ,{header:'规格',sortable:true,dataIndex:'spec',width:50}
    ,{header:'备注',sortable:true,dataIndex:'memo',width:50}
    ,{header:'到货天数',sortable:true,dataIndex:'day',width:50}
    ,{header:'价格',sortable:true,dataIndex:'price',width:50}
    ,{header:'企业ID',sortable:true,dataIndex:'orgId',width:50}
    ,{header:'操作',sortable:true,dataIndex:'id'
     ,renderer : function(value, p, record,rowIndex, colIndex, store) {
      return '<a href="#none" onclick=updateBaseOrg('+rowIndex+')>修改</a>    ' +
        '<a href="#none" onclick=removeBaseOrg('+value+');>删除</a>';
     }
    }
      ]
      ,sm: new Ext.grid.RowSelectionModel({
                singleSelect: true
            })
      ,bbar:new Ext.PagingToolbar({
      pageSize: limit,
          store:store,
          displayInfo: true,
          displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
          emptyMsg: "没有记录"
   })
   ,view: new Ext.grid.GroupingView({
          forceFit:true
      })
    });
    }
});

/**
* 新增/修改Form
*/
BaseOrgForm = Ext.extend(Ext.form.FormPanel,{
constructor: function(product){
  if(!product)product = {};
  var formPanel = this;
  BaseOrgForm.superclass.constructor.call(this,{
   region: 'center'
   ,buttonAlign:'center'
   ,labelAlign:'right'
   ,frame: true
   ,autoDestroy:true
   ,labelWidth : 85
   ,baseCls: 'x-plain'
   ,bodyStyle : 'padding-top:10px;'
   ,border: false
   ,bodyBorder : false
   ,defaults:{width:200,allowBlank:false}
   ,autoScroll: true
   ,scrollToNum : 0
   ,url:path+'/baseProductAction!saveOrUpdate.htm'
   ,getWindow : function (){
    return parentWindow = this.findParentByType('window');
   }
   ,submitAction: function(){
    if(!this.getForm().isValid()){
     Ext.Msg.alert('系统提示', "<b>表单不完整</b>");
     return;
    }
    this.getForm().submit({
     url:this.url
     ,waitMsg:'请等待'
     ,waitTitle:'正在保存数据...'
     ,method :'post'
     ,success: function (form, action){
      formPanel.getForm().findField('product.id').setValue('');
      var parentWindow = formPanel.getWindow();
      if(parentWindow.gridStore)parentWindow.gridStore.load();
      parentWindow.close();
     }
     ,failure: function (form, action){
      if(action.result)
       Ext.MessageBox.show({title: '系统提示',msg: "<b>" + action.result.msg + "</b>",buttons: Ext.MessageBox.OK,icon: 'ext-mb-error'});
      else
       Ext.MessageBox.show({title: '系统提示',msg: "<b>" + (action.response.responseText).substring(0,1000) + "</b>",buttons: Ext.MessageBox.OK,icon: 'ext-mb-error',width :400});
     }
    });
   }
   ,items:[
    {xtype:'hidden',name:'product.orgId',value:product.orgId}
    ,{xtype:'hidden',name:'product.id',value:product.id}
    ,{
     xtype: 'combo'
        ,fieldLabel: '供应商名称'
        ,id:'orgnamea_id'
           ,hiddenName: 'orgId'
           ,store: baseOrgName
        ,valueField : 'orgId'
        ,value:product.orgId
     ,displayField : 'orgName'
        ,triggerAction: 'all'
     ,forceSelection: true
     ,allowBlank: true
     ,editable: true
     ,mode: 'local'
    }
    ,{xtype:'textfield',maxLength:100,readOnly: false,allowBlank: false,fieldLabel:'产品名称'
     ,name:'product.name',value:product.name}
    ,{xtype:'textfield',maxLength:100,readOnly: false,allowBlank: false,fieldLabel:'产品编码'
     ,name:'product.code',value:product.code}
    ,{xtype:'textfield',maxLength:100,readOnly: false,allowBlank: true,fieldLabel:'备注'
     ,name:'product.memo',value:product.memo}
    ,{xtype:'textfield',maxLength:100,readOnly: false,allowBlank: true,fieldLabel:'规格'
     ,name:'product.spec',value:product.spec}
    ,{xtype:'textfield',maxLength:100,readOnly: false,allowBlank: true,fieldLabel:'到货天数'
     ,name:'product.day',value:product.day}
    ,{xtype:'textfield',maxLength:100,readOnly: false,allowBlank: true,fieldLabel:'价格'
     ,name:'product.price',value:product.price}

   ]
   ,buttons:[
    {
     text:'保存'
         ,tooltip : '保存'
         ,iconCls: 'icon-add'
         ,handler: function(btn){
          formPanel.submitAction();
         }
       }
    ,{
     text:'取消'
         ,tooltip : '关闭窗口'
         ,iconCls: 'x-icon-delete'
         ,handler: function(btn){
          formPanel.getWindow().close();
         }
       }
   ]
  });
}
});

/**
* 新增/修改窗口
*/
function orgSaveOrUpdate(gridStore,record){
var title;
if(!record){
  title = '新增产品';
}else{
  title = '修改产品';
}

var win=new Ext.Window({
  title: title+'--网页对话框'
  ,layout: 'fit'
     //子容器全部占满也可是border
  ,width:350
  ,height:240
  ,modal:true
  ,plain:true
  //,iconCls:'bogus'
  ,resizable : true
  ,closable :true
  ,gridStore: gridStore
  ,items: [{
   xtype: 'panel'
   ,layout: 'border'
   ,border: false
   //,region: 'center' 由于formpanel的 fit 无效所以必须加一层
   ,items: [
    new BaseOrgForm(record)
   ]
  }]
});
win.show();
}

function updateBaseOrg(rowIndex){
var gridStore = Ext.getCmp('BaseProductGridID').getStore();
var record = gridStore.getAt(rowIndex);
orgSaveOrUpdate(gridStore,record.json);
}

0 0