目录

标签 ：代码片段

  1. //定义一些比较常用的属性，总是忘记，记录下来，以便查询
  2. 1.cls: String //添加一个额外的类样式，自定义样式，将类选择器名放在这个配置里
  3. 2.disabled : Boolean //为true时无效，Read-only
  4. 3.disabledClass : String //当组件处于无效状态时添加到组件上的CSS类(默认为 'x-item-disabled')。 
  5. 4.hideBorders : Boolean //设置为true可以隐藏所包含的每个组件的边框， false为遵照组件现有的边框设      置(默认为 false)。 
  6. 5.html : String/Object //一个HTML片段，或者一个 DomHelper 描述
  7. 6.itemCls : String //一个附加的CSS类，应用到div上，包装当前field的表单元素。
  8. 7.labelSeparator : String //每个fieldLabel 文本后面现实的分隔符
  9. 8.labelStyle : String //field的label样式 eg:labelStyle: 'font-weight:bold;'
  10. 9.layout : String/Object //布局方式
  11. 10.listeners : Object //一个包含一个或多个事件处理器的配置对象
  12. 11.margins : Object //此配置只用于该组件展现在一个使用BorderLayout 或 BoxLayout的两个子类之一作      为布局的容器
  13. 12.overCls : String //它将在鼠标移过元素时CSS类
  14. 13.xtype : String //类型
  15. 14.ref : String //定义组件的访问路径 eg ref:'abc' 则可以使用他的父级.abc实现对组件的访问
  16. 15.region : String //布局为BorderLayout的容器中使用
  17.     renderTo : Mixed //该值可以是一个节点的id、一个DOM节点或者一个已存在的元素，选在在DOM内
  18.     applyTo: //将组件渲染在DOM节点后面
  19. 16.stateEvents stateful Ext.state.Provider //组件状态保存功能，不会用，也比较少用
  20. 17.style : String //style: {marginBottom: '10px'} 参考Ext.Element.applyStyles
  21.     bodyStyle: String //对组件起作用，也可用于布局 style主要用于布局
  22. 18.tabTip : String //Ext.QuickTips.init()调用的前提下，只用于当该组件作为TabPanel提示
  23. 19.tpl : Mixed //Ext.XTemplate的字符串数组。 与 data 和 tplWriteMode 配置项协同使用
  24. 20.pageX : Number | pageY : Number //表示页面级的x y坐标值
  25. 21.x y: Number //被包含在一个指定位置的容器中，这个值表示x(left) y(top)坐标值
  1. /*  column的渲染配置项
  2.     格式为：renderer：function（value，metadata，record，rowIndex，colIndex，store）{}
  3.     value 当前单元格的值；metadata 可配置单元的css类和attr样式属性； record 从数据中提取的          record； rowIndex 行号； colIndex 列号；Store 对象
  4. */
  5. renderer: function(value, metaData, record){
  6.     for(i=0;i<ptypeStore.getCount();i++){
  7.         var rec = ptypeStore.getAt(i);
  8.         if(rec.get('pt_id')==value){
  9.             return rec.get('pt_name');
  10.         }
  11.     }
  12.     return value; 
  13. }
  1. /* editor是对可编辑Column提供的编辑控件，目前发现仅支持系统控件，不支持自定义控件 */
  2. editor: {
  3.     editor: {xtype: 'textfield', allowBlank: false}
  4. }
  5. editor:{xtype: 'combo', editable: false,triggerAction: 'all', valueField: 'wf_id',
  6.     displayField:'wf_name', forceSelection: true, mode: 'remote', store: procStore
  7. }
  8. /* editor里面不需要filelabel、name、hiddenName这些属于表单提交控件的属性，因此可编辑Column也就不支持隐藏表单控件 */
  1. //BorderLayout布局定义区域配置项
  2. region: 'north' | 'south' | 'west' | 'east' | 'center'
  1. 1.ownerCt : Ext.Container //父类容器
  2. 2.disabled : Boolean //设置是否可用
  3. 3.hidden : Boolean //设置隐藏状态
  4. 4.items : MixedCollection //子组件集合
  5. 5.refOwner : Ext.Container //通过ref配置的组件可以通过该属性访问引用祖先组件
  6. 6.rendered : Boolean //渲染状态
  1. 1.add (  ...Object/Array component  ) : Ext.Component/Array //向当前容器中添加  Component(s),需要调用 doLayout 方法来刷新视图
  2. 2.addClass (  string cls  ) : Ext.Component //添加CSS class样式
  3. 3.destroy () : void //销毁
  4. 4.disable () : Ext.Component //将组件置为无效状态，并出发'disable'事件
  5. 5.doLayout (  [ Boolean shallow ],  [ Boolean force ] ) : Ext.Container //强制容器的布局进行重新计算
  6.    参数:
  7.     shallow : Boolean 
  8.         (可选) 设置为true时将仅仅计算当前组件的布局， 并且让子组件在需要时自动计算布局 (默认为            flase，它将递归地调用每个子容器的doLayout方法) 
  9.     force : Boolean 
  10.         (可选) 设置为true将强制进行布局，即使项目是隐藏的也进行。 
  11.     返回值:
  12.         Ext.Container 
  13.         this 
  14. 6.enable () : Ext.Component //将组件置为有效状态并触发'enable'事件
  15. 7.find (  String prop ,  String value  ) : Array //根据属性查找当前容器中任何层次上的组件 
  16. 8.findById (  String id  ) : Ext.Component //通过id查找容器中位于任何层级上的组件
  17. 9.findByType (  String/Class xtype ,  [ Boolean shallow ] ) : Array //根据xtype或者类型，查找当前容器中任何层级上的组件
  18. 参数:
  19.     xtype : String/Class 
  20.         组件的xtype字符串，或者直接是组件的class类型 
  21.     shallow : Boolean 
  22.         (可选) 此参数为flase时将检查当前组件是否是指定xtype的后裔 (这是默认情况)，或者设置为true，         将检查当前组件是否直接是指定xtype类型（译者注：即指不按照多态性进行检查）。 
  23.     返回值:
  24.         Array 
  25.         Ext.Component数组
  26. 10.findBy (  Function fn ,  [ Object scope ] ) : Array //自定义的函数查找容器内的组件
  27.     //fn(component, this container) 函数将会被用如下参数(component, this container)进行调用
  28. 11.findParentBy (  Function fn  ) : Ext.Container //查找当前组件上层任何层次上的容器
  29.     //fn(container, this component)
  30. 12.findParentByType (  String/Class xtype  ) : Ext.Container //根据xtype查找父组件
  31. 13.fireEvent( String eventName, Object... args ) : Boolean
  32.     //用传入的参数触发指定的事件，一个事件可以被设置为冒泡到Observable父类继承树(参看                 Ext.Component.getBubbleTarget) 调用enableBubble实现。
  33. 14.focus (  [ Boolean selectText ],  [ Boolean/Number delay ] ) : Ext.Component 
  34.     尝试将当前组件设为焦点。 
  35.     参数:
  36.         selectText : Boolean 
  37.             (可选) 如果可用，同时选中组件内部的文本 
  38.         delay : Boolean/Number 
  39.             (可选)将当前组件设置为焦点的延迟时间(设置为true等于0毫秒) 
  40.     返回值:
  41.         Ext.Component 
  42.         this 
  43. 15.get (  String/Number key  ) : Ext.Component 
  44.     //根据索引获取当前容器包含的一个组件（items.get(key)方法的别名）
  45. 16.getComponent (  String/Number comp  ) : Ext.Component 
  46.     //检查当前容器的 items property（id） 并且获取当前容器的一个直接的子组件。
  47. 17.hide () : Ext.Component //隐藏当前组件。 监听 beforehide' 事件并且返回false 可以取消隐藏组件    的操作。 在隐藏组件之后触发 ' hide' 事件。
  48. 18.insert (  Number index ,  Ext.Component component  ) : Ext.Component //在当前容器的指   定索引处插入一个组件。 在插入之前触发 beforeadd 事件， 然后在组件被插入之后触发 add 事件
  49. 19.isXType (  String xtype ,  [ Boolean shallow ] ) : Boolean //判断xtype
  50. 20.nextSibling () : Ext.Component  previousSibling () : Ext.Component //兄弟组件
  51. 21.remove (  Component/String component ,  [ Boolean autoDestroy ] ) : Ext.Component //从当前容器中移除一个组件。 在移除之前触发 beforeremove 事件， 然后在组件被移除之后触发 remove 事件
  52. 22.removeAll (  [ Boolean autoDestroy ] ) : Array //从当前容器中删除所有组件
  53. 23.removeClass (  string cls  ) : Ext.Component //从组件底层的元素上删除一个CSS类
  54. 24.setPosition (  Number left ,  Number top  ) : Ext.BoxComponent 
  55.     //设置组件的left和top值。设置组件的页面XY值
  56. 25.setPagePosition (  Number x ,  Number y  ) : Ext.BoxComponent //设置组件在页面中的XY位置
  57. 26.setSize (  Mixed width ,  Mixed height  ) : Ext.BoxComponent 
  58.     //设置BoxComponent的宽度和高度
  59. 27.show () : Ext.Component //显示组件
  60. 28.setVisible (  Boolean visible  ) : Ext.Component //设置组件显示或隐藏
  61. 29.on(String eventName, Function handler)  un(String eventName, Function handler) 
  62.     //添加 删除 事件监听
  63. 30.
  1. 1.add : (  Ext.Container this ,  Ext.Component component ,  Number index  ) 
  2.     //将组件添加到容器子组件集合时的位置索引 
  3.     监听器将会被使用如下的参数被调用:
  4.         this : Ext.Container 
  5.         component : Ext.Component 
  6.     被添加的组件 
  7.         index : Number 
  8.  2.

属性

  1.  
  1. //BoxComponent 是盒子模型组件，用于布局和封装Html元素
  1. //ViewPort是一个特殊的容器，一个页面只能有一个，使用于做单页面应用，自动渲染到body上，并且宽高与浏览器一致
  2. new Ext.Viewport({
  3.     layout: 'border', //*必选* 设置viewport的布局方式
  4.     split: true,    //组件之间的空隙
  5.     defaults:{      //子类的默认配置
  6.     }，
  7.     items: []  //*重要* 这是内容填充的必须属性
  8. });
  1. //很常用的一个组件
  2. new Ext.panel({
  3.     title: 'Panel', //标题
  4.     [layout: '', ]    //布局方式
  5.     [ x | y ]         //这是相对于容器来说的讲的位置，且只有 absoulte 布局生效
  6.     [ pageX | pageY ] //页面级的位置，一样只有 absolute 布局生效
  7.     [padding: Number/String,] //设置padding值 数值设置所有边侧，或者CSS的padding样式
  8.     items: []       //子组件
  9. }); 
  1. //Ext窗口组件，常用于表单弹出窗的载体
  1. //border布局 就是将container组件分为 东南西北中 5个区域，将子组件放入到各个区域中去；
  2. //这5个区域的特点是：南北通栏，西中东在南北中间水平分布，东西设置宽度，剩余的是中的
  3. new Ext.Viewport({
  4.     layout: 'border',
  5.     items: []     //子组件需要设置 region: 'north' | 'south' | 'west' | 'east' | 'center'
  6. });
  1. //Absolute绝对定位布局，通过设置 x、y 或者  pageX、pageY 进行组件位置布局
  2. new Ext.Viewport({
  3.     layout: 'absolute',
  4.     items: [{
  5.         xtype: 'panel',
  6.         title: 'Absolute',
  7.         x: 50,
  8.         y: 50,
  9.         html: '<p>定位布局</p>'
  10.     }]
  11. }）
  1. //Accordion是手风琴折叠布局
  2. new Ext.Viewport({
  3.     layout: 'accordion',
  4.     items: [{
  5.         xtype: 'panel',
  6.         title: 'Absolute'，
  7.         html: '<p>accordion</p>'
  8.     }]
  9. }）
  1. //CheckBoxSelectionModel 继承自RowSelectionModel 这个控件就是列表页前面的选择框
  2. var Sm = new Ext.grid.CheckboxSelectionModel({
  3.     dataIndex: 'id',
  4.     singleSelect: false，  //是否单选
  5. });
  7. //配置项：
  8. width：//设置宽度
  9. //公共属性
  10. sm.grid //grid的引用，但是为只读
  11. //公共方法
  12. clearSelections (  [ Boolean fast ] ) : void   //清除所有的选中状态。 
  13. getCount (): Number ； //获取选择的总数
  14. getSelected (): Record ; //获取第一条选择的
  15. getSelections () : Array ;  //返回所有选中的记录
  17. //公共事件
  1. //ColumnModel是数据的展现形式就是表格的展现形式 {dataSource}-mapping->{dataStore}-dataIndex->ColumnModel
  1. //editGrid,注意事项，保存的时候发送 list为key的son对象 保存修改的数据
  1. //简单说就是Store里数据的封装对象，可以通过record访问数据对象
  2. 1、get(String name);             :Object             查询制定key的value；
  1. //比较常用的方法
  2. 1、store.getCount();             : Number            查询Stroe的数据数量
  3. 2、store.getAt(Number index);    : Record            获取指定位置记录
  4. 3、store.load();                 : void              使用配置的reader从远程获取数据
  5. 4、removeAll(Boolean silent);    : void              删除所有数据，参数表示是否触发clear事件
  6. 5、removeAt(Number index);       : void              删除指定位置记录,触发remove事件
  7. 6、store.save();                 ：Number            保存所有挂起的更改，返回保存的条数|-1
  8. 7、
  1. //数据类型
  2. var recordType = Ext.data.Record.create([
  3.     {
  4.         name:'cit_id', type:'int', mapping:'cit_id'
  5.     },{
  6.         name:'cit_name', type:'string', mapping:'cit_name'
  7.     }]
  8. );
  9.     
  10. //数据对象
  11. var listStore = new Ext.data.Store({
  12.     remoteSort: true,
  13.     autoLoad:true,
  14.     proxy:new Ext.data.HttpProxy(
  15.         {
  16.             url:"data/getList",
  17.             method:"POST"
  18.         }),
  19.     reader:new Ext.data.JsonReader(
  20.         {
  21.             root : 'list',
  22.             totalProperty : 'totalSize',
  23.             id : 'cit_id'
  24.         }, recordType)//recordType也可以直接申明一个数组进行数据解析
  25. });
  1. /* 使用属组作为备选数据 */
  2. {name:【key】,layout:'form',anchor: '92%',xtype:'combo', fieldLabel: 【nameS】,
  3.     triggerAction: 'all', allowBlank: 【isBlank】,hiddenName:【key】,
  4.     forceSelection: true,valueField: 'code',displayField:'value',mode:'local',
  5.     store:new  Ext.data.ArrayStore({fields:['code','value'],data:
  6.    【Ext.decode(dataS)】})
  7. };
  9. /* 使用远程数据作为数据来源（默认的数据来源） */
  10. {name:【key】,layout:'form',anchor: '92%',xtype:'combo', fieldLabel: 【nameS】,
  11.     triggerAction: 'all',//触发器点击时使用的操作，目前一般选 all 
  12.     allowBlank: 【isBlank】,//允许为空
  13.     hiddenName: 【key】,//Input 的 name
  14.     forceSelection: true,//限定单选
  15.     valueField: 【'cit_id'】,//值
  16.     displayField: 【'cit_name'】,//显示text
  17.     mode: 【'remote'】, //数据 
  18.     store: listStore
  19. };
  21. /* 常用方法 */
  22. getCount(); //获取缓存数据数量
  23. getAt(i);//获取制定位置数据 从0开始
  24. get('key');//根据key取值
  26. /* eg.遍历 */
  27. for(var i=0;i<store.getCount();i++){
  28.     var rec = store.getAt(i);
  29.     if(rec.get('id')==val){
  30.         return rec.get('name');
  31.     }
  32. }
  34. /* 加入使用的时候发现第一次载入不能实现键值的转换，那么可能是因为我们的store还没有载入的原因，那么可以选择在控件上增加一个 beforerender 事件，来判断是否store是否已经load，如果没有就进行load() */
  1. /* 可编辑Grid中的打勾选项控件 Ext.ux.grid.CheckColumn */
  2. {
  3.     dataIndex: '对应的数据名称',
  4.     header: '控件的表头',
  5.     xtype: 'checkcolumn',
  6.     align: 'center',
  7.     width: 80
  8. }
  9. /* 值得注意的是：使用该控件的时候它的值为 true和false，后台存储
  10. 的时候要注意对控件值做处理，最好对应的数据库列为整数，读取数据的时
  11. 候就可以匹配0和1 */

版权声明：本文为itck原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/itck/p/10478396.html