您的位置：首页 > Web前端 > JavaScript

基于ExtJs的桌面系统（2)

2015-06-26 12:09 585 查看
今天接着来写，昨天的数据是用ajax请求回来的，是加载页面的时候就请求了，然而我现在要点击快捷方式再请求，昨天gridpanel部分的代码是这样的：

new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.JsonReader({}, [
{name: 'itemId'},
{name: 'name'},
{name: 'format'},
{name: 'count'}
]),
data: Ext.grid.dummyData
Ext.grid.dummyData是js加载后时就请求回来的，现在要将改成点击事件的时候加载。然后查了下api：http://www.okajax.com/book/ext2.2/

jsonstore是酱紫描述的：

Small helper class to make creating Stores for remotely-loaded JSON data easier. JsonStore is pre-configured with a built-in Ext.data.HttpProxy and Ext.data.JsonReader.
If you require some other proxy/reader combination then you'll have to create a basic Ext.data.Store configured
as needed.

var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

This would consume a returned object of the form:
{
images: [
{name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
{name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
]
}

然而我改成了，发现并不可行，完全没请求：

ds: new Ext.data.Store({
url: 'inventory_findInventory.action',
reader: new Ext.data.JsonReader({
fields : [  {name: 'itemId'},
{name: 'name'},
{name: 'format'},
{name: 'importPrice'},
{name: 'quantity'},
{name: 'count'},
{name: 'batch'},
{name: 'inDate'},
{name: 'validDate'}
]
})
}),


然后搜了下资料，发现再套个httpproxy，请求了并且数据加载出来了：

ds: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'inventory_findInventory.action',
headers: { 'Content-type': 'application/json' },
method: 'post'
}),
reader: new Ext.data.JsonReader({
fields : [  {name: 'itemId'},
{name: 'name'},
{name: 'format'},
{name: 'importPrice'},
{name: 'quantity'},
{name: 'count'},
{name: 'batch'},
{name: 'inDate'},
{name: 'validDate'}
]
})
}),
接着我试着删掉了一些代码，变成这样：

ds: new Ext.data.Store({
autoLoad: true,
url: 'inventory_findInventory.action',
method: 'get',
reader: new Ext.data.JsonReader({
fields : [  {name: 'itemId'},
{name: 'name'},
{name: 'format'},
{name: 'importPrice'},
{name: 'quantity'},
{name: 'count'},
{name: 'batch'},
{name: 'inDate'},
{name: 'validDate'}
]
})
}),


结果发现没了autoLoad就不会请求了，之前查看的资料都有一个store.load()，应该就是发送请求吧。

看了下aotuload的描述：

autoLoad : Boolean/Object

If passed, this store's load method is automatically called after creation with the autoLoad object
应该就是酱紫了。

然而我返回的数据里面带有Date类型的数据：

[{"batch":10,"count":800,"format":"10条装","id":1,"importPrice":15,"inDate":{"date":1,"day":6,"hours":0,"minutes":0,"month":1,"nanos":0,"seconds":0,"time":1391184000000,"timezoneOffset":-480,"year":114},"itemId":1001,"name":"香口胶","quantity":1000,"validDate":{"date":1,"day":3,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1464710400000,"timezoneOffset":-480,"year":116}},{"batch":10,"count":1000,"format":"1包","id":2,"importPrice":10,"inDate":{"date":26,"day":5,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1435248000000,"timezoneOffset":-480,"year":115},"itemId":1002,"name":"薄荷糖","quantity":1000,"validDate":{"date":26,"day":1,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1498406400000,"timezoneOffset":-480,"year":117}},{"batch":5,"count":1000,"format":"1包","id":3,"importPrice":20,"inDate":{"date":26,"day":5,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1435248000000,"timezoneOffset":-480,"year":115},"itemId":1003,"name":"哈哈汤","quantity":1000,"validDate":{"date":1,"day":6,"hours":0,"minutes":0,"month":7,"nanos":0,"seconds":0,"time":1438358400000,"timezoneOffset":-480,"year":115}}]

直接像普通数据那样写的话会显示Object object，那如何正确显示Date类型数据呢?

记得一开始模板是这样的，大家看到那个特殊的数据木有：

cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]),


是的Price里面有个renderer:Ext.util.Format.usMoney,机智的大家一定知道这个用来干啥。我查阅了下api文档：

renderer : Function

(可选) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not sp...

叫我看setRenderer，乖乖去看：

setRenderer( 
Number
col
, 
Function fn
)
: void

设置指定列的渲染(格式化)函数. See Ext.util.Format for
some default formatting functions.

又叫我看Ext.util.Format:

方法继承自
capitalize ( 
String value
) : String

Converts the first character only of a string to upper case ...

Format
date ( 
String/Date value
, 
String
format
) : String

Parse a value into a formatted date using the specified format pattern. ...

Format
dateRenderer ( 
String format
) : Function

Returns a date rendering function that can be reused to apply a date format multiple times effici...

Format
defaultValue ( 
Mixed value
, 
String
defaultValue
) : String

Checks a reference and converts it to the default value if it's empty ...

Format
ellipsis ( 
String value
, 
Number
length
) : String

Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length ...

Format
fileSize ( 
Number/String size
) : String

Simple format for a file size (xxx bytes, xxx KB, xxx MB) ...

Format
htmlDecode ( 
String value
) : String

Convert certain characters (&, <, >, and ') from their HTML character equivalents. ...

Format
htmlEncode ( 
String value
) : String

Convert certain characters (&, <, >, and ') to their HTML character equivalents for lit...

Format
lowercase ( 
String value
) : String

Converts a string to all lower case letters ...

Format
stripScripts ( 
Mixed value
) : String

Strips all script tags ...

Format
stripTags ( 
Mixed value
) : String

Strips all HTML tags ...

Format
substr ( 
String value
, 
Number
start
, 
Number length
) : String

Returns a substring from within an original string ...

Format
trim ( 
String value
) : String

Trims any whitespace from either side of a string ...

Format
undef ( 
Mixed value
) : Mixed

Checks a reference and converts it to empty string if it is undefined ...

Format
uppercase ( 
String value
) : String

Converts a string to all upper case letters ...

Format
usMoney ( 
Number/String value
) : String

Format a number as US currency ...

然后我就试了下dateRenderer(string format)，在含日期的数据中加入renderer : Ext.util.Format.dateRenderer('Y-m-d'),然而这并没有什么卵用。

问题出在哪呢？搜了下资料，找到了很好的解答：/article/4497119.html。

在reader里面要对数据进行指定：

{name:'inDate',
type:'date',
mapping : 'inDate.time',
dateFormat : 'time'}


Date类型数据也成功的显示了。

接下来也要查询其他的数据，同样用gridwindow显示，html中的写法：

<dt id="grid-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>grid window</div></a>
</dt>
于是我又加了一个：

<dt id="grid-win2-shortcut">
<a href="#"><img src="images/s.gif" />
<div>grid window2</div></a>
</dt>


发现图片不显示了，去css找到grid-win-shortcut的部分复制给grid-win2-shortcut。图片也可以自定义。

然后js部分：

getModules : function(){
return [
new MyDesktop.GridWindow(),
new MyDesktop.GridWindow2(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule()
];
},


这里加了个gridwindow2，不太清楚这样好不好，本来想复用代码只改变参数，但是还是希望能独立弹出窗口，还是先这样子了。

下面在MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {});后面再复制个MyDesktop.GridWindow2 = Ext.extend(Ext.app.Module, {});

里面的grid-win再改成grid-win2，这样子两个窗口都能独立弹出了。数据和之前那样子取就行了。

接下来我要做的是在一个弹出的window里面放进多个panel，一开始看了看代码：

items:[
new Ext.grid.GridPanel({
border:false,
anchor: '100% 50%',
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]),

viewConfig: {
forceFit:true
}
})]


心里想只要在items里面再加一个panel就好了，于是就再new了一个同样的panel，却发现只能显示一个，问题在哪呢？有点经验的人应该知道这些window应该会有布局这样的东西，看看是不是：

win = desktop.createWindow({
id: 'grid-win',
title:'inventory',
width:960,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',


果然，layout是fit，但是我不清楚这布局怎么用或者说还有什么布局咋办？不用担心，查api或者直接百度都有很多说明，我还搜到了一篇图文并茂的博文，非常详细，供大家参考：/article/5108179.html，虽然是extjs4的，但是大部分布局在2也已经有了，大家可以试一试，不想试的话可以看图选自己需要的，挺方便。

上面的博客说到：fit ：这个布局下子元素会独占全部的容器空间，一般用于只有一个子项的情况。然后我就用了anchor，这个比较适合我所需要的显示效果。

今天就先记到这里，听说今晚会停水，还是赶紧去洗澡了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航