extjs 实践总结_习惯累积沉淀_新浪博客

var operation = Ext.create('Ext.data.Operation', {

action : 'read'

});

me.serviceListProxy.doRequest(operation, function() {

if (operation.wasSuccessful()) {

var resultList = operation.getRecords();

me.createValueSearchModel(resultList);

me.createFindProxy();

me.createStore();

me.reconfigureGridPanel(resultList);

me.store.load();

}

}, me);

取数据但不用store,增删改查是用 ajax . 查多个用store

fieldLabel: '出金金额',

                name: 'DoBankroll',

                id: 'outout',

                blankText: '请填写出金金额',

                allowBlank: false,

                regex: /^\d+$/,

                regexText: '请输入正确的数据类型',

                vtype: 'alphanum'

最下面的vtype的validatetype 

在Ext JS 4.2.1 Sencha Docs 中搜 vtype ,有几个能用的值.   是几个函数   alphanum就是制定函数.

可以自定义一个vtype

Ext.apply(Ext.form.field.VTypes, {

numeric: function (val, field) {

return /^\d+(\.\d{1,2})?$/.test(val);

},

numericText: '只能输入数字！'

});

可以给文本框加正则表达式 regex: /^\d+(\.\d{1,2})?$/,   来限制能输入什么

extjs 灵活性不够, 就是说知道怎么操作,顺着他来还行,   不知道怎么操作,去摸索很痛苦.

异步的,单线程的

1.与后台交互.

两种

1是简单的数据

简单是数据也有两种

1. Ext.Ajax.request({

url: me.historicalProfitStatisticsURL,//请求的地址

timeout:60000,

params: { //请求的参数

sellTradingProductName: me.aselectedSellTradingProductName,

from: Ext.Date.parse(from, 'Y-m-d', true).getTime(),

to: Ext.Date.parse(to, 'Y-m-d', true).getTime()+86399000 

},

method: 'GET',

success: function (response, options) {

var result = null;

try {

result = Ext.decode(response.responseText, false);

} catch (e) {

console.log('Can not decode json: ' + response.responseText);

return;

}

result.success 是否=success.   result.data 里的数据 result.list等等.     这里处理返回的结果     这种请求方式是通用的,灵活性最高.比如图表是要求list的. 但用float的图表没法用store. 就是用这种方式得到list数据(xx[0] 是列表的第一个数据).

},

failure: function (response, options) {

}

});    (适用的地方. 要得到或要处理的数据的单个数据,比如给form赋值,比如增删改(不太适用查 ,查用stroe方便).)

2.用代理    这个方法跟上面的差不太多就是很有ext风格

me.crudproxy = Ext.create('Ext.data.proxy.Ajax',

{

api: {

create: me.createUrl,

read:   me.retrieveUrl,

update: me.updateUrl

},

reader : {

type : 'json',

root : 'data'

},

model : me.modelTypeName

});

var operation = Ext.create('Ext.data.Operation',

{

action : 'create',

params : me.userOptionPresetPanel.getForm().getValues()

});

me.crudproxy.doRequest(operation,

function(operation) {

var success = operation.wasSuccessful();

if (success == true) {

Ext.Msg.alert('Status','Added Successfully');  //通常增删改返回就是提示成功与否

}

}, me);

再看一个例子 ,用的上面的proxy

var operation = Ext.create('Ext.data.Operation', {

action: 'read',  //api 

params: {}

});

me.crudproxy.doRequest(operation, function (operation) {

if (operation.wasSuccessful()) {

var defaultValueMap = {};

var records = operation.getRecords();

var instanceIdSub;

Ext.Array.forEach(records, function (item, index, allItems) { //这个是读一条显示出来 ,虽然能处理多条. 但最好不要

defaultValueMap['id'] = item.get('id');

});

me.userOptionPresetPanel.getForm().setValues(defaultValueMap);

}

}, me);

2是列表数据

列表是数据也有两种

1是store      ,好像不能传参数

好处.1.和表格,下拉列表,图表 挂钩.只要数据有了别的都不用自己操作, 排序删除新增等等等操作

2.load, reload方便

me.findProxy = Ext.create('Ext.data.proxy.Ajax', {

url: me.retrieveUrl,

reader: {

type: 'json',

root: 'data',

},

model: me.modelTypeName

});

me.store = Ext.create('Ext.data.Store', {

proxy: me.findProxy,

model: me.modelTypeName

x

x

});

把store给了谁, 加载页面就有数据了. 只有比如删除一行, 时候load一下

2是直接请求

ext的控件. 要用store的话 就别直接请求了

2.前台界面操作.

form panel的操作, 对form的操作:

1.params : me.userOptionPresetPanel.getForm().getValues()   //取得form里的所有值

  me.paramPanel.getForm().getValues()['openVolatility']    //取得form里name是openvolatility的文本框的值

2.var defaultValueMap = {};

var item = result.data;

defaultValueMap['winRate'] = item['winRate'];

defaultValueMap['averageEarningsRate'] = item['averageEarningsRate'];

me.statisticsPanel.getForm().setValues(defaultValueMap);    //往form里放值

me.headerForm.getForm().setValues({

        lastUpdatedTime: Ext.Date.format(lastUpdatedTime, 'Y-m-d H:i:s'), 

        lastUpdatedUser: lastUpdatedUser,

        });  //这个跟上面的<等价>.     ['ss'] ='sdf' 的实质就是这个

me.paramPanel = Ext.create('Ext.form.Panel',{

items:[{

xtype:'fieldset',

title:'参数',

items:[

{

xtype : 'textfield',

fieldLabel : 'Close Profit',

   name: 'closeProfit',

   allowBlank: false

},{

 xtype:'button',

                 text: 'Update',

                 listeners: {

                 }

}

]

}]

}这是一种button . 它是跟field一起的.

me.paramPanel = Ext.create('Ext.form.Panel',{

width: '100%',

       bodyPadding: 10,

items:[ {

allowBlank: false,

xtype : 'textfield',

fieldLabel : 'Open Volatility',

   name: 'openVolatility'

}

]

,

buttons: [

           {

            text: '保存',

            listeners: {

            }

           }

       ]

}

);这个button是panel的. 有跟panel一起的样式

form panel是用来做数据交互的.所以有这些操作

var msgbox=Ext.Msg.progress("请稍候","loading..");//一个处理中的提示. 应该是有相应了就自动关闭

delay

Ext.Msg.alert('Status', 'Query Successfully.',function(){

me.configXaxes();

});   弹出窗口,点了确定后执行一个操作   这里有个作用域的问题. this指的是谁

layout. 

hbox. vbox .flex. layout: {type: 'hbox',align: 'stretch'(填充方式),padding: 0},      (flex很重要. 比如一个hbox里面有两个控件. 一个flex是1一个flex是2   则一个占1/3 一个占2/3   如果不设flex 就不显示吧)    (在spreadmonitoring里的历史分析panel里有)           padding 每个控件间的间隔

bodyPandding 是设置所有内边距.

margin   是设置所有外边距.   比如window 里放个panel. window在放panel时候可以设置外边距(让这个要放的东西与自己有些空隙).   panel自己可以设置自己的内边距(在panel边上留空.不是所有组件都挨着自己的边框)

         区别是 bodypandding是panel自己的事.他可以有东西设置还是挨着边放.    margin的容器的事  给多大就这么大   例子:价差监测里的参数设置

传参数

winddow 里

me.pair1Panel = Ext.create('QuantInfoTech.magnostadt.finance.marketdata.spreadmonitoring3.ParamEditPanel', {

        parentWindow: me,

        flex: 1,

        margin: '5, 5, 5, 5'   上,右,下,左

        });

pair1Panel 里有  parentWindow:null,就可以使用

me.parentWindow.close()});

hidden: me.module.app.userInfo.get('actionURLs').indexOf('/capitalCostItem/create') == -1 ? true : false,   items里的东西有个hidden参数

me.items = [me.gridPanel];     //这个很常用.panel都有

me.dockedItems = [me.toolbar]; //这个是《停靠的items》  停靠在顶部,底部   比如toolsbar

me.toolbar = Ext.create('Ext.toolbar.Toolbar', {

dock: 'bottom',            //底部

items: [

{

                    text: '预设',

                    iconCls: 'option',

                    listeners: {

                    click: function () {

                    }

                    }

                }

]

});

me.items = [me.gridPanel];

me.dockedItems = [me.toolbar];

2.1 表格

mode在4.2里

表格中的模板

{

text: 'Profit',

width: 75,

xtype: 'templatecolumn',

tpl: new Ext.XTemplate(

'',   //great then

' {[Ext.Number.correctFloat(values.spread - values.cost)]}',

'', //little then

' {[Ext.Number.correctFloat(values.spread - values.cost)]}',

'',

' {[Ext.Number.correctFloat(values.spread - values.cost)]}',

''

)

}, 这个是条件   if

{

text: 'Type',

dataIndex: 'type',

width: 70,

xtype: 'templatecolumn',

tpl: new Ext.XTemplate(

'',

'',

' 监测中',

'',

' 开仓',

'',

' N/A',

''

)

},这个是 ==  时候的显示  switch

{

text: 'Delivery',

width: 75,

dataIndex: 'delivery',

xtype: 'booleancolumn',

trueText: '交割',

falseText: '非交割'

},这个是true false的显示

3.图表(float)

这里是jquery的float插件. 用的是列表数据,但没法用store. 就用的上面的通用的请求方式得到一个list对象

me.marketDataChart.getOptions().xaxes[0].max = time;   //设置options

me.marketDataChart.setData(me.marketDataChartSeries);

me.marketDataChart.setupGrid();

me.marketDataChart.draw();

label上的数变化.两个y轴.柱状图,点的hightlight. 指向弹出窗口,两个series,动态设置坐标轴的最大最小值,数轴上的数字的格式化(位数太长).

4.数据操作

var records = operation.getRecords();

var instanceIdSub;

Ext.Array.forEach(records, function (item, index, allItems) { //这个是读一条显示出来 ,虽然能处理多条. 但我没试

defaultValueMap['id'] = item.get('id');

defaultValueMap['createdTime'] = item.get('createdTime');

defaultValueMap['isPublic'] = item.get('isPublic');

});

var item = me.resultDataRecord[i];   //这是解析json得到的对象

var type = item['type'];

var functionId = item.get('functionId');  item是个map .   在很多地方用到. 比如表格,store的item等    很多情况是一个数组, 数组的元素(item)的类型是个map

一个list . list里是一个元素. json解析后就是一个数组. 数组的每个元素的对象.

如: var item = result.data[i]    //数组操作

var profit= item['profit'];  //对象操作

var time = item['time'];

js对数组的操作

shift：删除原数组第一项，并返回删除元素的值

unshift：将参数添加到原数组开头，并返回数组的长度 

pop：删除原数组最后一项，并返回删除元素的值

push：将参数添加到原数组末尾，并返回数组的长度

concat：返回一个新数组，是将参数添加到原数组中构成的 

var a = [1,2,3,4,5]; 

var b = a.concat(6,7); //a：[1,2,3,4,5]   b：[1,2,3,4,5,6,7] 

splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... 

slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组 

reverse：将数组反序

sort(orderfunction)：按指定的参数对数组进行排序 

join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符 

[]的是array,  逗号隔开

{}的是对象 

var profit =  Ext.Number.from((spread).toFixed(5), 0);// 7-15改需求   //是number返回前面的, 不是number返回后面的

4.1 Store

对store的操作

me.recordStore.insert(0, recordData);

me.recordStore.removeAt(count);

me.store.removeAll();

me.spreadStore.getAt(count).get('buyTradingProductName')

me.spreadStore.getAt(count).set('type',signalData['type']);

me.recordStore.commitChanges();  //什么用?

4.2 Mode

2.1跟这个重复

{

        name: 'maturityDate', type: 'date',

        convert: function (v, record) {                                    //《转换》

if (v && typeof(v) == 'number') {return new Date(v);}else return v;

    }

         }日期格式

function location(v, record){

return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);

}

Ext.define('Dude', {

extend: 'Ext.data.Model',

fields: [

{name: 'lastname',  mapping: 'name.last'},

{name: 'city', defaultValue: 'homeless'},

'state',

{name: 'location',  convert: location}                    //《转换》  函数的第二个参数是当前条的record. 就是说可以根据这条记录的其他列来得到这里显示什么

]

});

{

text:'到期日' ,

dataIndex:'maturityDate', //《渲染器》这个就是处理自己了

renderer : Ext.util.Format.dateRenderer('Y-m-d')    //《渲染器》 Ext.util.Format.xxx()   还有好多格式化的方式 如Ext.util.Format.numberRenderer('0.000')

},

{

text:'BID',

dataIndex:'BID',

renderer:function(val){if(val !='')return (Math.round(val*100)/100).toFixed(2)}//《渲染器》  自定义

}

 

{

 dataIndex: 'profit', text: 'Profit', flex: 1, minWidth: 80, align: 'right',

 renderer: function (value) {

 var color = 'yellow';

 if (value < 0)

 color = 'green';

 else if (value > 0)

 color = 'red';

 return ' ' + Ext.util.Format.currency(value, '￥', 2) + '';  //《渲染器》 返回span  

 }

 }

 

{

text: 'Delivery',

width: 75,

dataIndex: 'delivery',

xtype: 'booleancolumn',

trueText: '交割',

falseText: '非交割'

}, //这个是true false的显示 

 

5. 时间

1. var time= Ext.Date.parse(一个年-月-日的变量, 'Y-m-d', true).getTime()

Ext.Date.parse(item['time'], 'Y-m-d H:i:s.u', true).getTime();

2. (new Date()).getTime()   当前时间的毫秒数

6 combobox

它的store可以有这几种

1.store : [['call', 'CALL'], ['put', 'PUT']]

2. 静态的data

var pairStore = Ext.create('Ext.data.Store', {

fields: [

{name: 'label', type: 'string'},

{name: 'value', type: 'string'},

{name: 'sellTradingProductName', type: 'string'},

{name: 'buyTradingProductName', type: 'string'},

{name: 'delivery', type: 'boolean'}

],

data: QuantInfoTech.magnostadt.finance.marketdata.spreadmonitoring3.SpreadMonitoringPanel.spreadPairs

});

statics: {

spreadPairs: [

{label: 'Please select ...', value: ''},

{label: 'AU9999 - XAU(寄售) [交割]', value: 'TICK@AU9999@SGE-DEPTH@AU@GLOBAL', sellTradingProductName: 'AU9999', buyTradingProductName: 'XAU (寄售)', delivery: true},

{label: 'AuTD - XAU(寄售) [交割]', value: 'TICK@AUTD@SGE-DEPTH@AU@GLOBAL', sellTradingProductName: 'AuTD', buyTradingProductName: 'XAU (寄售)', delivery: true},

]

} 这个panel是SpreadMonitoringPanel   .  下面那个statics 是固定的

3. 后台来, 

简单