2. IT
    3. Extjs 常用方法总结

    Extjs 常用方法总结

    xiaoxiao2021-03-26  26
    1.Extjs5 中的model 属性是用于判断窗口是模态窗口还是非模态窗口，所谓的模态窗口指的是当 某一个窗口  打开的时候，其余的窗口都不能再进行操作了，直到该窗口关闭。非模态窗口指的是，当该窗口处于打开状态，仍然可以操作别的窗口。  2.创建一个新的window对象，该窗口不会自动显示出来，如果想要该窗口显示出来，可以调用其show()方法或者将其属性   设置为true autoShow: true,如果想关闭该窗口 ，可以调用close()方法  3. 在使用grid的时候，必须先要定义model，然后在定义store.     //1.定义Model Ext.define("MyApp.model.User", {    extend: "Ext.data.Model",    fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' }    ] }); //2.创建store var store = Ext.create("Ext.data.Store", {    model: "MyApp.model.User",    autoLoad: true,    pageSize: 5,    proxy: { type: "ajax", url: "GridHandler.ashx", reader: {    root: "rows" }    } }); 4.给某个按钮添加响应，需要对应的是handler:‘login’。后面对其的编辑可以使function login(){}或者是login：function(btn){}  handler：function（）{  } 5.ExtJS 给textfield赋值的方法总结 var value="值";  (1) fs.form.findField(id/name).setValue(value);  (2) Ext.get(id/name).setValue(value);  (3) Ext.getCmp(id).setValue(value);  获取form里面的field的三种方法  1)Ext.getCmp('id');  2)FormPanel.getForm().findField('id/name');  3)Ext.get('id/name');//前提是FormPanel在界面上显示出来了 6. 理解extjs的几个数据模型，其分别是 数据实体模型（Model），数据代理（Proxy），数据读取器（Reader）    数据写入器（Writer），和数据集Store。    数据实体模型Model代表了应用系统中用到的数据实体，其包含四个重要部分分别是：Field（字段定义），Proxy（数据代理），Association（模型关联），    validation（数据校验）；    数据代理Proxy用来处理数据的读取和保存，如通过ajax代理获取服务端的数据。    数据读取器Reader，Writer用于读取原始数据到Model数据实体模型，或者将Model数据实体模型格式化为指定的数据格式。    数据集Store是一个保存Model对象的客户端缓存，他提供了对数据的过滤，排序，查找等功能，常用于数据模型与UI组件的数据接口。 7.Ext.grid.panel的主要方法    getSelectionModel 获取选择模式    getStore 获取表格中的数据集    getView获取表格中的视图对象  8.Ext.grid.column.Column类定义了表格内部与列相关的配置，包括列标题和数据显示的相关内容，其主要配置项包括：  columns: 参数类型Array 设置组列，数组中的列将作为一组处理，组列不能排序但可以隐藏和移动，组内的列可以移出组外，当所有的子列都被  移出后组列将自动销毁。  dataIndex（String） 设置列与数据集中数据的对应关系，值为数据模型中的字段名称  flex（number）设置列宽占所有flex和的比例  header（String） 设置列标题  render(function )设置列的自定义渲染函数  sortable(Boolean)是否允许排序，默认值为true,他将根据Ext.data.Strore.remoteSort判断进行本地排序还是远程排序  text(String)设置列标题，header配置项优先  width（number） 设置列宽  9.选择模式是用来处理数据视图中的记录的选择状态，Ext.selection.Model是选择模式的基类，他的子类包括：Ext.selection.CellModel(单元格选择模式)，  Ext.selection.CheckboxModel(复选框选择模式)和Ext.selection.RowModel(行选择模式)  10.支持多选  multiSelect:true;                        selModel:{                             selType:'checkboxmodel'      } 11.定义一个模型： Ext.define('User',{ extend:'Ext.data.Model', fields:[    {name: 'name',type:'string'},    {name: 'age',type:'number'} ]}); 12.renderTo()指的是将Extjs组件加载到什么位置。Ext.toBody()  document.getBody() 13.如果既需要行编辑又需要列编辑，那么plugins应该怎么样写？          var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {                 clicksToMoveEditor: 1,                 autoCancel: false             });//行编辑             var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {                 clicksToEdit: 1,                 autoCancel: false             });//列编辑            plugins:[rowEditing],   plugins:[cellEditing] 14.如果要是想让一行成为一个链接，可以点击，那么 需要将改行的xtype设置为linkcolumn; 15.静态过滤store中的数据，filter和filterBy的区别？ 16.模态窗口就是在该窗口关闭之前，其父窗口不可能成为活动窗口的那种窗口。      非模态窗口指的是：父窗口和子窗口之间可以随意切换，当子窗口没有关闭的时候，仍然可以操作父窗口。      模态对话框在显示之后，就不能对同一个程序中的其它窗口进行操作。      非模态对话框在显示之后，还可以对同一个程序的其它窗口进行操作。 17.表格的相关操作：    删除列：store.remove(store.getAt(i));    刷新表格：grid.view.refresh();    限制表格前面的复选款中只选一行：sm: new Ext.grid.RowSelectionModel({singleSelect:true}) 18.修改完数据 一定要上传到服务器中 19.查看一个json的格式是否正确，可以借助“json在线解析/json在线格式化数据”     20.Ext.JSON.encode():是将一个对象转编码成一个JSON格式的字符串    Ext.JSON.decode(),是将一个JSON格式的字符串编码成为一个对象 21.Ext.Ajax.request（options）  也是可以查看api的，注意所有和Ext相关的都可以从api中查看到，要学会看api，学会在api中找到自己需要的知识。   其中，可能的参数包括：   URL：string/function() 请求的服务器地址，可以是一个字符串也可以是一个返回值为URL地址的函数   params:Object/string/Function  包含请求参数的配置对象，或者包含字段名称和字段值对的字符串，  callback:function 指定接收到服务器响应后的处理函数，不管是成功还是失败，该函数都将被调用  success：function（）请求成功后的回调函数  22.如何把一个控件render到一个div （不是body身上），<div id="myform" ></div>  可以使用的方法是：render:"myform"   或者是renderTo：docuemnt.getElementById("myfrom") 23.关于拼接字符串，不要直接把后台得到的值 赋给前台需要的值，至少要进行encode,decode一下 ，要不然就是一个四不像。还有在赋值的时候，要深刻的理解该处要填的值是什么，是字符串就填写字符串，是数组就填写一个数组。series：[{},{}],它就是一个对象数组。（这里不是纯粹的拿来主义就可以了，虽然后台输出的是对象的样子，但他实际上是一个字符串） encode和decode我总分不清楚，Encodes an Object, Array or other value. 返回的是一个字符串，decode的是一个json类型的字符串，返回的是一个对象。Decodes (parses) a JSON string to an object. 24.向后台传送一个json类型的字符串 手动拼写：   var params='{"zhibiao":"'+zhibiao+'","beginYear":"'+beginYear+'","endYear":"'+endYear+'"}'; 25.combobox 是下拉框 { xtype: 'combobox', fieldLabel: Ext.tzGetResourse('TZ_RES_TMPL_MG_COM.TZ_RES_TMPL_STD.isneed','是否启用'), forceSelection: true, editable:false, store: useFlagStore, valueField: 'TValue', displayField: 'TSDesc', queryMode: 'remote', name: 'isneed', afterLabelTextTpl: [    '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>' ], allowBlank: false    }   Checkbox是复选框   {     xtype:'checkbox',     fieldLabel: Ext.tzGetResourse('TZ_SMS_TMPL_MG_COM.TZ_SMS_TMPL_STD.isuse','是否启用'),     name: 'isuse',     inputValue:'Y',(勾选上的取值)     uncheckedValue:'N',(未勾选的取值)     afterLabelTextTpl: [ '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'     ] } 26.测试迁到开发 ，开发里面的视图迁到测试，需要重新build一下，如果是新建的表或者是已经修改过的表，也需要重新build一下。  否则，在测试环境下面没有，找不到。  27.置灰样式  cls:'lanage_1'，表示该字段只读，不可修改  28.关闭一个panel 的方法 this.getView().close();  如果是一个gridPanel,也可以获取到这个grid,然后grid.close();  29.注意区分tzLoad和tzSubmit  ，这两个方法的参数是不一样的     var tzParams = '{"ComID":"TZ_ZXDC_MBGL_COM","PageID":"TZ_ZXDC_MBSZ_STD","OperateType":"QF","comParams":{"tplId":"'+tplId+'"}}';         //加载数据         Ext.tzLoad(tzParams,function(responseData){             var formData = responseData.formData;             form.setValues(formData);         });   /***************************************************************/     var tzParams = '{"ComID":"TZ_ZXDC_WJGL_COM","PageID":"TZ_ZXDC_XJWJ_STD","OperateType":"U","comParams":' + tzStoreParams + '}';             Ext.tzSubmit(tzParams,                 function(jsonObject) {                   win.close();                 },"",true,this); 30.跳转到不同的component在他上面需要加上这样一句话： Ext.tzSetCompResourses("TZ_ZNX_RYXZGL_COM"); 31.页面上可以自定义属性，然后给整个属性赋值： 参考在线调查的 设置页面 32.ueditor 悬浮状态：zIndex:999（当父类型是panel的时候，不让他悬浮）    忽略一个字段的变化 ignoreChangesFlag:true,（当这个字段变化时，点击关闭，窗口不会发生提示“未保存”） 33.给form表单中的数据赋值: form.setValues(formData);    grid列表中的数据重新加载： var tzStoreParams = '{"TZ_APPPRO_TMP_ID":"'+smtDtTmpID+'"}';                                                      //执行这个方法，相当于执行了tzQueryList()方法                                                      grid.store.tzStoreParams = tzStoreParams;                                                      grid.store.load(); 34.grid的列的动态增加：列的动态生成。reconfigure，使用新的store和column动态生成列 35.自己写分页： 36.后台获取json数据，并对他进行处理，获得字符串类型的数据：     rem 解析json类;    Local JavaObject &jsonUtil = CreateJavaObject("com.tranzvision.util.PaseJsonUtil");    rem 将字符串转换成json;    Local JavaObject &CLASSJson = &jsonUtil.getJson(&comParams);    rem 邮件群发批次编号;    Local string &strEmailID = &CLASSJson.getString("emailID"); 37.gridPanel的关闭：     grid.close(); 38.导出是在源数据库下面执行；导入是在目标数据库执行；使用DataMover导出导入 先执行导出，在执行导入 39.获取gird  panel.child("grid"); 40.获取grid 中store的方法   var store=grid.getStore();  重新加载grid列表中的数据，重新获取一个store方法：  store.comID="TZ_ZNX_RYXZGL_COM";  store.pageID="TZ_ZNX_RYGL_STD";  store.tzStoreParams='{"orgID":"'+orgID+'"}';  store.load(); load()方法本身就具有这个作用 42.当encode 返回的JSON失效后，可以考虑手动拼写JSON类型的字符串：  形式为：params='{"zhibiao":"'+zhibiao+'","beginYear":"'+beginYear+'","endYear":"'+endYear+'"}'参数传递，传过去的只能是一个字符串，返回来的也只能是一个字符串。 43.在提交迁移申请的时候，需要先在不同的环境下面克隆本项目（测试：test;培训：release；生产：master）, 特别注意：开发->测试（需要将自己修改的项目手动提交到测试环境，然后在提交申请）                     测试->UAT(需要将手动修改的项目提交到UAT环境下面，然后再提交申请)(每次都忘记将修改的提交，然后就提交申请！！！)    UAT->生产(生产环境下面不需要手动将修改的内容提交（自己不能推送，需要相关部署人去推送），只需要发送申请就好了) 44.Ext参数请求 tzParams{  "comID":"XXX",  "pageID":"XXX",  "OperateType":"XXX",操作类型（U-更新（新增(add)、修改(update)、删除(delete)）QF-查询表单，QG-查询列表）  "comParams":"XXX" } 45.点击下拉框立即有反应，comboBoxField,可以将他的属性设置成editable:false  46.日期类型的显示字段  格式化为标准的形式 使用这个 format:'Y-m-d'  47.html style margin   margin 属性设置元素的外边距；   如果规定一个值，比如div{margin:50px}-所有的外边距都是50px;   如果规定两个值，比如div{margin:50px 10px}--上下外边距都是50px，左右外边距都是10px;   如果规定三个值，比如div{margin:50px 10px 20px}--上外边距是50px,右外边距是10px,下外边距是20px;   如果规定四个值，比如div{margin:50px 10px 20px 30px}--上外边距是50px,右外边距是10px,下外边距是20px,左外边距是30px 48.
    转载请注明原文地址: https://ju.6miu.com/read-663804.html

    技术

    最新回复(0)