Extjs随笔(一)WebBuilder开发

1.extjs怎么实现点击第一个grid1(对应store1)的某行,显示第二个grid2(对应store1)与之关联的行(前提是grid1和grid2之间的数据有关联),并默认选中所有的行:

(1).在grid1的events事件的itemclick属性加入如下代码:

//首先获取grid1所选中的行

var record = grid1.getSelectionModel().getSelection();

//定义一个字符串用来存grid1所存取的的数据行的主键(INQ_H_ID)
      var INQ_H_ID_S = "";

//遍历所选中的行,把主键依次加入到INQ_H_ID_S中
       for(var i = 0; i < record.length; i++)
       {
         INQ_H_ID_S += record[i].data.INQ_H_ID;
         if(i<record.length-1)
         {
           INQ_H_ID_S = INQ_H_ID_S + "‘,‘";
         }
       }

//根据所得到的主键字符串INQ_H_ID_S重新刷新grid2的数据
     Wb.load(store2,{INQ_H_ID_S:INQ_H_ID_S});

(2).默认选中grid2中的所有行

在grid2对应的store2的events事件中的load属性中加入如下代码:

grid2.getSelectionModel().selectAll();

2.从数据库中读取的数据,怎么实现读取“1”,界面上显示“编辑中”,读取“2‘,界面上显示”已提交“:

decode(A.ORDER_STATUS,‘1‘,‘编辑中‘,‘2‘,‘已提交‘) STATUS_NAME

在query中加入以上代码,

在要显示的grid定义的Column中的dataIndex中填入STATUS_NAME,当从数据库中读取的STATUS_NAME状态为”1“的时候,前台界面显示”编辑中“,为“2”的时候,前台界面显示“已提交”

3.查询条件,订单类型(ORDER_TYPE),界面上显示的是”采购订单“或者”销售订单“,数据库中存储的字段是”S“或者”P“,其实就是是根据”S“或者”P“在数据库中查询

查询sql如下:

SELECT A.*,
decode(A.ORDER_STATUS,‘1‘,‘编辑中‘,‘2‘,‘已提交‘) STATUS_NAME
FROM TRD_PS_ORDER_V A WHERE NVL(A.ORDER_H_CODE,‘ ‘) LIKE ‘%{#text1#}%‘
AND NVL(A.ORDER_H_NAME,‘ ‘) LIKE ‘%{#text11#}%‘
AND NVL(A.COM_NAME,‘ ‘) LIKE ‘%{#text3#}%‘
AND NVL(A.ORDER_GROSS_VALUE,‘1‘) <TO_NUMBER (NVL({?number1?},99999999999))
AND NVL(A.ORDER_GROSS_VALUE,‘1‘) >TO_NUMBER (NVL({?number2?},0))
AND NVL(A.VENDOR_NAME,‘ ‘) LIKE ‘%{#text31#}%‘
AND NVL(A.ORDER_TYPE,‘ ‘) LIKE ‘%{#comboBox1#}%‘
AND NVL(A.ORDER_STATUS,‘ ‘) LIKE ‘%{#comboBox2#}%‘
AND NVL(A.CREATE_BY_NAME,‘ ‘) LIKE ‘%{#text2#}%‘
order by a.CREATE_DATE DESC

comboBox1中的properties中的query读入一条search,代码如下:

select A.VAL_CODE,A.VAL_NAME from XIP_PUB_VAL_SET_DTL A  where A.val_set_code=‘DDLX‘

VAL_CODE表示订单编码,存入数据库的字段,VAL_NAME订单名称,在界面显示的字段

4.怎么实现点击按钮(这里按钮名称为”新增“),要跳转的页面上自动生成制定格式的编码并赋值给制定的text文本框:

1).首先从数据库中获取制定格式的编码

1.新建一个组件(New module),在module中新建一个dataprovider,在dataprovider的properties中的sql中加入如下代码:

//获取年月日时分秒

select to_char(sysdate,‘yyyymmddhhiiss‘)as aa from dual

生成的字符格式:20141227064432

2.并在dataprovider的properties中的type选择jsonObject

3.新建一个Ajax,在Ajax的properties中的url属性中把module的url放入其中,即把module拖入改url中即可,并在该output中填入要得到的该编码的text文本框的名称

4.并在Ajax的events中的success中添加如下代码:

var a = response.responseText;
var  value=eval("("+a+")");
Ext.getCmp(‘CON_CODE‘).setValue(value.AA);

//CON_CODE为要得到该格式编码的text文本框的di名称

//AA和module下的dataprovider中的sql语句里面获取字符的别名,sql默认把这些字符都设置成大写,所以这里写成大写的AA

5.最后在新建按钮中的events的时间中的success属性中执行该Ajax

格式如下:getcodeajax.request();

getcodeajax为Ajax的名称

时间: 2024-08-02 04:59:10

Extjs随笔(一)WebBuilder开发的相关文章

ExtJS 4.2 业务开发(二)数据展示和查询

本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统,并提供查询.添加.修改的功能. 大致的目录结构如下: ShipMgrTab.js :船舶业务的入口. controller 目录:存放船舶业务的逻辑控制文件. model 目录:存放船舶业务的model文件. store 目录 :存放船舶业务的store文件. view 目录 :存放船舶业务的组件

ExtJS 4.2 业务开发(一)主页搭建

本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示地址 1. 主页结构说明 1.1 主页布局 传统的ExtJS 4.2应用,基本布局如下: 1.2 主页布局分析 根据上面的主页布局图,可转换具体试图结构: header:存放系统的名称.logo.用户信息等内容. menu:菜单区域,以Tree形态展现业务入口. tab:业务区域,具体的业务都以tab页的形式嵌入到此区域. 1.3

ExtJS 4.2 业务开发(三)数据添加和修改

接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个AddShipWindow.js文件,表示一个增加船舶的窗口组件. 此文件中包含了一个form组件用于显示所要添加的字段:船舶名称.状态.吨数和核载人数. 具体代码如下: Ext.define('App.ShipMgr.view.AddShipWindow', { extend: 'Ext.window

[extjs] extjs 5.1 API 开发 文档

官方博客发布了这个新版本说明,英文文章请戳下面 http://www.sencha.com/blog/announcing-sencha-ext-js-5.1/ 翻译版本请戳下面: http://extjs.org.cn/node/738 新版本下载地址: 官方下载地址: http://www.sencha.com/products/extjs/download/ext-js-5.1.0/3301 http://cdn.sencha.io/ext/gpl/ext-5.1.0-gpl.zip ex

随笔--独立软件开发

作为一个独立的人去开发一套系统或者一个项目,在整个开发流程中是要一个人去处理的,没有团队,只有你自己,需要把开发的流程以及相关的所有涉及到的东西都要去做,当然是简化版的. 当你接到项目以后,这时你是产品经理,你需要与业务员甚至是直接客户进行需求分析.产品设计确认.出具相关的软件原型.确认之后,你便是项目管理者,你需要将项目进行细分,分解任务,进行代码配置管理.然后,作为一名UI设计者进行界面的设计,再作为程序员进行代码开发,开发完成后,作为测试员进行测试,作为实施人员进行产品上线与实施.作为运维

Extjs 随笔备忘

//Point1. Ext.define 是用来创建类的.可以用来创建一个自定义的类,在这个自定义类中,可以用extend来继承Ext中的组件类. 举例: Ext.define('Ext.ux.LiveSearchGridPanel', { extend: 'Ext.grid.Panel', requires: [ 'Ext.toolbar.TextItem', 'Ext.form.field.Checkbox', 'Ext.form.field.Text', 'Ext.ux.statusbar

Extjs随笔(二)

1.js中千分位格式转化为数字格式 //千分位转化为数字,如:12,345.00转化为12345.00function rmoney(s)   {      return parseFloat(s.replace(/[^\d\.-]/g, ""));   } 测试函数代码: var s="12,345.00"; alert(rmoney(s)); 显示的结果为:12345.00 2.js中数字格式转化为千分位格式 //数字格式转千分位格式,如:12345.00可以转

『随笔』WCF开发那些需要注意的坑

执行如下 批处理:"C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin\svcutil.exe" http://127.0.0.1:40001/TestService?wsdl /language:C# /out:"D:\TestProxy.cs" /config:"app.config""C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0

.Net Core开发环境Build

微软刚发布了.net core 1.0.这里写一篇随笔记录下开发环境的build过程,以防不时之需. 1. 安装Visual Studio 2015(community版本亦可). 2. 升级到Update3 版本. 3. 安装.net core 1.0 runtime. 4. 安装DotNetCore.1.0.0-VS2015Tools.Preview2. 5. 安装.Net Portability Analyzer.