Extjs单独定义各组件的实例代码

  网上看到的一个事例,其中包含了组件的定义拷贝下来供大家参考:

  

复制代码 代码如下:

  Ext.onReady(function(){

  var dtCategory=[

  ['all','所有种类'],

  ['1','Beverages'],

  ['2','Condiments'],

  ['3','Confections'],

  ['4','Dairy Products'],

  ['5','Grains/Cereals'],

  ['6','Meat/Poultry '],

  ['7','Produce'],

  ['8','Seafood']

  ];

  var stCategory=new Ext.data.SimpleStore({

  fields:['value','text'],

  data:dtCategory

  });

  var cbCategory=new Ext.form.ComboBox({

  id:"cbCategory",

  store:stCategory,

  displayField:"text",

  valueField:"value",

  typeAhead:true,

  mode:"local",

  triggerAction:"all",

  emptyText:"请选择商品种类...",

  editable:false,

  allowBlank:false,

  blankText:"商品种类必须选择",

  autoSelect:true,

  selectOnFoucus:true,

  value:'',

  dfval:''

  });

  cbCategory.setValue("all");

  var tfName=new Ext.form.TextField({

  id:'tfName'

  });

  var btnSearch=new Ext.Button({

  id:'btnSearch',

  iconCls:'btn_search',

  text:'搜索',

  handler:function(){

  stProduct.load({params:{start:0,limit:10,categoryName:Ext.getCmp("cbCategory").getValue(),productName:Ext.getCmp("tfName").getValue()}});

  }

  });

  var btnHelp=new Ext.Button({

  text:'帮助',

  iconCls:'btn_help'

  })

  var tb=new Ext.Toolbar({

  id:'tb',

  items:[

  '商品种类:',

  cbCategory,

  '-',

  '商品名称:',

  tfName,

  btnSearch,

  '->',

  btnHelp

  ]

  });

  var pnNorth=new Ext.Panel({

  id:'pnNorth',

  region:'north',

  autoHeight:true,

  items:[

  tb

  ]

  });

  var url="Default.aspx";

  var stProduct=new Ext.data.Store({

  id:"st",

  proxy:new Ext.data.HttpProxy({url:url}),

  reader:new Ext.data.JsonReader({totalProperty:"totalProperty",root:"root",fields:[{name:"ProductID"},{name:"ProductName"},{name:"CategoryName"},{name:'UnitPrice'},{name:'Discontinued'},{name:'QuantityPerUnit'},{name:'CompanyName'}] })//ProductID作为隐藏列,不显示在gridpanel中

  });

  stProduct.load({params:{start:0,limit:10,categoryName:Ext.getCmp("cbCategory").getValue(),productName:Ext.getCmp("tfName").getValue()}});

  var cmProduct=new Ext.grid.ColumnModel([

  new Ext.grid.RowNumberer(),

  {header:"产品名称",dataIndex:"ProductName",sortable:true},

  {header:"产品种类",dataIndex:"CategoryName",sortable:true},

  {header:"单价",dataIndex:"UnitPrice",sortable:true},

  {header:"是否停产",dataIndex:"Discontinued",sortable:true},

  {header:"规格",dataIndex:"QuantityPerUnit",sortable:true},

  {header:"供货商",dataIndex:"CompanyName",sortable:true}

  ]);

  var pgtbProduct=new Ext.PagingToolbar({

  id:"pgtbProduct",

  displayInfo:true,

  emptyMsg:"没有数据要显示!",

  displayMsg:"当前为第{0}--{1}条,共{2}条数据",

  store:stProduct,

  pageSize:10

  });

  var grdProduct=new Ext.grid.GridPanel({

  id:"grdProduct",

  title:"商品信息",

  cm:cmProduct,

  store:stProduct,

  autoWidth:true,

  selModel:new Ext.grid.RowSelectionModel({single:true}),

  height: screen.availHeight-190,

  frame: true,

  pageSize:20,

  bbar:pgtbProduct,

  //autoExpandColumn:6,

  loadMask:true,

  viewConfig:{

  forceFit:true

  }

  });

  var stSupplier = new Ext.data.Store({

  id: "stSupplier",

  autoLoad:true,

  proxy: new Ext.data.HttpProxy({ url: "ProductInfo.aspx?type=getSupplierInfo" }),

  reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "root", fields: [{ name: "sID" }, { name: "cName"}] })

  });

  var pnProduct=new Ext.Panel({

  id:'pnProduct',

  title:'商品信息',

  autoHeight:true,

  items:[

  new Ext.Panel({

  id:'pnProductRowOne',

  border:false,

  bodyStyle:'padding-top:10px;',

  layout:'column',

  items:[

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'textfield',

  id:'ProductName',

  name:'ProductName',

  fieldLabel:'商品名称',

  anchor:'95%'

  }

  ]

  }),

  new Ext.Panel({

  columnWidth:.25,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'radio',

  id:'DiscontinuedOneID',

  //hiddenName:'Discontinued',

  name:'Discontinued',

  inputValue:'1',

  fieldLabel:'是否停售',

  boxLabel:'是',

  anchor:'95%'

  }

  ]

  }),

  new Ext.Panel({

  columnWidth:.25,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'radio',

  id:'DiscontinuedTwoID',

  //hiddenName:'Discontinued',

  name:'Discontinued',

  checked:true,

  inputValue:'0',

  boxLabel:'否',

  anchor:'95%'

  }

  ]

  })

  ]

  }),

  new Ext.Panel({

  id:'pnProductRowTwo',

  border:false,

  layout:'column',

  items:[

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'textfield',

  id:'QuantityPerUnit',

  name:'QuantityPerUnit',

  fieldLabel:'规格',

  anchor:'95%'

  }

  ]

  }),

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'textfield',

  id:'UnitPrice',

  name:'UnitPrice',

  fieldLabel:'单价',

  anchor:'95%'

  }

  ]

  })

  ]

  }),

  new Ext.Panel({

  id:'pnProductRowThree',

  border:false,

  layout:'column',

  items:[

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'textfield',

  id:'UnitsInStock',

  name:'UnitsInStock',

  fieldLabel:'库存量',

  anchor:'95%'

  }

  ]

  })

  ,

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'combo',

  id:'CommpanyName',

  //name:'CommpanyName',

  hiddenName:'SupplierID',

  fieldLabel:'供货商',

  displayField: 'cName',

  valueField: 'sID',

  mode: 'local',

  typeAhead: true,

  triggerAction: "all",

  editable: false,

  allowBlank: false,

  autoSelect: true,

  selectOnFoucus: true,

  store: stSupplier,

  anchor:'95%'

  }

  ]

  })

  ]

  })

  ]

  });

  var pnCategory=new Ext.Panel({

  id:'pnCategory',

  title:'商品相关种类信息',

  autoHeight:true,

  items:[

  new Ext.Panel({

  id:'pnCategoryRowOne',

  border:false,

  bodyStyle:'padding-top:10px;',

  layout:'column',

  items:[

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'textfield',

  id:'CategoryName',

  name:'CategoryName',

  fieldLabel:'商品种类',

  anchor:'95%'

  },

  {

  xtype:'textfield',

  id:'Description',

  name:'Description',

  fieldLabel:'商品描述',

  anchor:'95%'

  },

  {

  xtype:'hidden',

  id:'CategoryID',

  name:'CategoryID',

  fieldLabel:'种类编号'//这个是隐藏的

  }

  ]

  }),

  new Ext.Panel({

  columnWidth:.5,

  border:false,

  bodyStyle:'padding-left:25px;',

  layout:'form',

  labelWidth:60,

  labelAlign:'right',

  items:[

  {

  xtype:'box',//

  id:'CategoryImage',

  width:172,

  height:120,

  autoEl:{

  tag:'image',

  src:'tempFile/1.png'

  }

  }

  ]

  })

  ]

  })

  ]

  });

  var tpProduct=new Ext.TabPanel({//很多时候我们可能是一个表单放在不同的tab中,为了方便提交和加载数据可以在tabpanel最外层放一个formpanel,但是显示就有问题,这个时候可以通过设置tabpanel高度和deferredRender、layoutOnTabChange两个属性来调整

  id:'tpProduct',

  deferredRender:false,//是否第一次显示就渲染所有tab(默认为true)

  layoutOnTabChange:true,

  //height:300,

  //autoTabs:true,

  activeTab:0,

  border:false,

  items:[

  pnProduct,

  pnCategory

  ]

  });

  var fpProduct=new Ext.FormPanel({//作为TabPanel的容器

  id:'fpProduct',

  reader: new Ext.data.JsonReader({

  successProperty: 'success',//后台返回的json中成功与否的字段名称

  root: 'info'//后台返回的json中,数据字段名称

  },

  [

  'ProductName',

  //'Discontinued',

  'QuantityPerUnit',

  'UnitPrice',

  'UnitsInStock',

  'CategoryID',

  'CategoryName',

  'Description',

  'SupplierID'

  ]

  ),

  items:[

  tpProduct

  ]

  });

  var winProductInfo=new Ext.Window({

  title:'商品信息',

  width:450,

  height:300,

  layout:'fit',

  closeAction:'hide',

  plain:true,//true则主体背景透明,false则和主体背景有些差别

  collapsible:true,//是否可收缩

  modal:true,//是否为模式窗体

  items:[

  fpProduct

  ],

  buttons:[//窗体按钮

  {

  text:'提交',

  handler:function(){

  if(fpProduct.getForm().isValid()){

  var record=grdProduct.getSelectionModel().getSelected();

  fpProduct.getForm().submit({

  method:'post',

  url:'ProductInfo.aspx?type=updateProductInfo&productId='+record.get("ProductID"),

  waitMsg:'数据更新中...',

  success:function(){

  stProduct.reload();

  Ext.Msg.alert("系统提示","提交成功!");

  },

  failure:function(){

  Ext.Msg.alert("系统提示","提交失败!");

  }

  });

  }

  }

  },

  {

  text:'关闭',

  handler:function(){//点击时触发的事件

  winProductInfo.hide();

  }

  }

  ]

  });

  // Ext.getCmp('tp').on("tabchange",function(tabPanel,tab){

  // Ext.Msg.alert("系统提示","Tab标题:"+tab.title);

  // });

  grdProduct.on("rowdblclick",function(grid,rowIndex,e){

  var row=grid.getStore().getAt(rowIndex).data;

  //Ext.Msg.alert("系统提示","行:"+rowIndex+" 产品ID:"+row.ProductID);

  fpProduct.form.load({//利用load自动填充,注意表单控件字段一定要和json中一致

  url:'ProductInfo.aspx?type=getProductInfo&productId='+row.ProductID,

  waitMsg:'数据加载中...',

  success:function(){

  //alert("tempFile/"+row.CategoryName+".png");

  if(row.Discontinued=="是"){

  Ext.getCmp('DiscontinuedOneID').setValue(true);

  }else{

  Ext.getCmp('DiscontinuedTwoID').setValue(true);

  }

  Ext.getCmp('CategoryImage').getEl().dom.src="tempFile/"+row.CategoryName+".png";

  },

  failure:function(){

  Ext.Msg.alert("系统提示","数据加载失败!");

  }

  });

  winProductInfo.show();

  });

  var pnCenter=new Ext.Panel({

  id:'pnCenter',

  region:'center',

  items:[

  grdProduct

  ]

  });

  var vp=new Ext.Viewport({

  id:'vp',

  layout:'border',

  renderTo:Ext.getBody(),

  items:[

  pnNorth,

  pnCenter

  ]

  });

  });