Ext4.1 grid 多选（可无checkbox）-HTML5中微数据在搜索引擎中的...-Dojo高级Web2.0 UI组件库---Tree组件

当前位置: 编程技术>WEB前端

本页文章导读:

▪Ext4.1 grid 多选（可无checkbox）在Ext4.1中的grid默认只能实现单选的。如果你想要你的grid有多选功能，需要给grid增加selModel如果你使用了Ext.create('Ext.selection.CheckboxModel')-->selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"}).........

▪HTML5中微数据在搜索引擎中的使用举例做网站优化已经快一个月了，对于seo的一般技术也有了一些了解，前些天开始使用谷歌的网站站长工具，在里面发现很多百度站长工具里面不曾有的内容，其中“结构化数据”这一项是.........

▪Dojo高级Web2.0 UI组件库---Tree组件 Tree组件可以把有层次关系的数据用树状结构展现出来，就如同 Windows 系统的资源浏览器。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有很多TreeNode..........

[1]Ext4.1 grid 多选（可无checkbox）

来源: 发布时间: 2013-11-06

在Ext4.1中的grid默认只能实现单选的。

如果你想要你的grid有多选功能，需要给grid增加selModel

如果你使用了Ext.create('Ext.selection.CheckboxModel')-->selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"})

部分代码：

1 this.grid= new Ext.grid.GridPanel({
2 title : 'users',
3 store : this.userStore,
4 columns : [ {
5 header : "用户ID",
6 sortable : true,
7 dataIndex : 'userId'
8 }, {
9 header : "用户名称",
10 sortable : true,
11 dataIndex : 'userName'
12 } ],
13 stripeRows : true,
14 manageHeight:true,
15 height:this.height-114,
16 selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"}),

界面效果：

但是这种方式会出现复选框,

如果不想有复选框是需要把selModel换成Ext.create('Ext.selection.RowModel',{mode:"SIMPLE"})就ok了

如图：

获得选中的数据用var records = this.grid.getSelectionModel().getSelection();就可以了

本文链接

[2]HTML5中微数据在搜索引擎中的使用举例

来源: 发布时间: 2013-11-06

做网站优化已经快一个月了，对于seo的一般技术也有了一些了解，前些天开始使用谷歌的网站站长工具，在里面发现很多百度站长工具里面不曾有的内容，其中“结构化数据”这一项是出现在 “优化”栏里面，可想而知，这个结构化数据会不会是争对谷歌搜索的一个优化的方法呢？添加自己的站进入这个页面，发现它提示我的网站上未检测到任何结构化数据，但是这么一个缺少概念的词让我们这种网站优化新手怎么理解呢？

进入谷歌的“帮助”页，谷歌提到了“丰富网页摘要（微数据、微格式、RDFa 和数据荧光笔）”，其中微数据是谷歌推荐的优化方式，而这个微数据正是现在新秀HTML5为增强网页语义化而增加的新特性，旨在构建对程序，对用户都更有价值的数据驱动的web。

HTML5微数据规范是标记内容的一种方式，用于描述特定的信息类型，例如评论、人物信息或活动。每种信息都描述特定类型的项，例如人物、活动或评论。例如，活动可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记（常为 <span> 或 <div>）中的简单属性为项和属性指定简要的描述性名称。以下示例是一个简短的HTML 文本块，显示的是 Bob Smith 的基本联系信息。

<div>

我的名字是王XX，但大家叫我 wungking。我的主页是：

<a href="http://www.webgamei.com">www.webgamei.com</a>

我住在武汉。我是程序员，目前在第五动力上班。

</div>

以下是用微数据标记的同一 HTML 内容。

我的名字是 <span itemprop="name">王XX</span>

但大家叫我 <span itemprop="nickname">wungking</span>。

我的主页是：

<a href="http://www.webgamei.com" itemprop="url">www.webgamei.com</a>

我住在武汉。我是<span itemprop="title">程序员</span>

目前在<span itemprop="affiliation">第五动力</span>上班。

</div>

下面对此示例进行了详细说明。

1,在第一行中，itemscope 表示 <div> 中的内容是个项。itemtype="http://data-vocabulary.org/Person 表示该项是人物。

2，人物项的每个属性均使用 itemprop 属性进行标识。例如，itemprop="name" 描述人物的姓名。

简单的用法介绍了，看一下效果，因为这种标记在web页面不会有任何不同的效果（对用户来说），所以这里要粘贴下，谷歌测试工具的效果：

这个是我主页的结构化数据测试的结果，下方 item 之后的 image title 都是在页面中的对应元素中添加的，谷歌在抓取你的页面的时候，通过这种结构化的标记，来快速获取最有效的信息。至于它对于网站排名有没有效果，现在还没法测试，只能先优化了看看效果。

看到这里，各位站长是不是很想把自己的站优化一下呢？因为在定义itemprop的类型时没有一个官方的标签集。只提供了部分行业的部分属性值，所以这里我们还是静待其完善吧！

文章首发站：http://www.webgamei.com/club/thread-93918-1-1.html【页游开发网】

本文链接

[3]Dojo高级Web2.0 UI组件库---Tree组件

来源: 发布时间: 2013-11-06

Tree组件可以把有层次关系的数据用树状结构展现出来，就如同 Windows 系统的资源浏览器。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有很多TreeNode.而初始化树，打开树节需要的数据，是通过来提供的。提供了封装的标准的数据存取API，作为统一的数据访问层而存在。所有的数据都是item或者item的属性。提供了一个基本的ItemFileReadStore类来读取JSON格式数据，而dojox提供了更多扩展，比如XmlStore, CsvStore, OpmlStore等，也可以自定义自己的store类型。

术语

data source数据源datastore表item行记录attribute列reference 有些类似外键依赖，但外键指向的父记录，而reference指向子记录的列表identity主键query 查询条件，是一个Object类型，形如{ name: '?hite*', aisle: 'Condiments' },”,”表示条件的and关系，通配符”?”,”*”表示一个或多个字符（包含0个）JSON(JavaScript Object Notation)

是一种轻量级的数据交换格式。它是基于Javascript标准的一个子集，JavaScriptd的数据结构(如字符串、数组、对象)的表示方式恰好与JSON相同,所以JSON可以被Javascript无损的识别。它是一种简单文本格式，与XML相比，它更加易读、更少的数据冗余。下面就是一段典型的JSON格式数据，例如：

{ identifier: 'name',
items: [
{ name: 'Adobo', aisle: 'Mexican' },
{ name: 'Balsamic vinegar', aisle: 'Condiments' },
{ name: 'Worcestershire Sauce', aisle: 'Condiments' }]
}

假设该段数据存放于文件，相应的Dojo datastore的声明和使用如下：

<!- 指明了datastore的类型是；数据的url,请注意这里除了可以是文件路径，也可以是一段请求得到的流；以及该datastore的jsId-->
<div dojoType="" jsId="pantryStore"
url=""></div>
<div name="pantry_item" dojoType=""
store="pantryStore"
searchAttr="name" value="Vinegar" autoComplete="true"
></div>

也可以通过编程的方式读取datastore数据，例如：
/*用编程实现方式定义了一个datastore,在这里是，其实还可以是其它的datastore类型，如XmlStore,CsvStore等，甚至可以是自定义的datastore类型*/
var pantryStore = new ({url: "pantry_" } );
//自定义函数，为fetch函数做准备，用于数据处理。
var gotList = function(items, request){
var itemsList = "";
for (var i = 0; i < ; i++){
// getValue函数，它是由封装的API，用于得到某个item的某个属性名称的值。
itemsList += pantryStore .getValue(items[i], "name") + " "; }
alert("All items are: " + itemsList);
}
//自定义函数，为fetch函数做准备，用于异常处理。
var gotError = function(error, request){
alert("The request to the store failed. " + error);
}
({onComplete: gotList, onError: gotError,query:{name:”*”}});
/*执行数据查询的语句，需要传入一些查询选项，比如在示例中出现的onComplete:在得到所有符合条件的数据后的处理函数，参数为item的列表；onError:出现异常的处理函数；query: 查询条件，是一个Object类型，形如{ name: '?hite*', aisle: 'Condiments' },”,”表示条件的and关系，通配符”?”,”*”表示一个或多个字符（包含0个）*/

应用Tree组件创建一个树的实例需要按下步骤进行：

1．创建一个用于存储树结构数据的数据源ItemFileReadStore，创建方法如下：

function createTreeStore() {
var treeStore = new ( {
url :''
});
return treeStore;
}

2．使用ForestStoreModel对store进行了包装，在tree组件多引入了一个Model层，它能够进行一些特殊处理，如：没有根结点时，会自动增加一个父结点等。创建方法如下：

var treeStore = createTreeStore();
var treeModel = new ( {
query : {
type :'Province'//从数据源中查询type :'Province'的数据
},
store :treeStore,
root :true,//定义根结点
rootId :"中国",
rootLabel :"中国城市列表",
childrenAttrs : [ 'children' ]
});

3．然后使用ForestStoreModel创建一个TreeModel，该TreeModel可以解析结点的子结点，它是一个递归的程序结构。创建方法如下：

function createTreeModel(item, treeStore, typeValue) {
var newModel = new ( {
query : {
type :typeValue
},
store :treeStore,
root :true,
rooId :item,
rootLabel :item || getLabel(item),
childrenAttrs : [ 'children' ]
});
return newModel;
}

4．在页面文件中定义一个Tree，定义方法如下：

其中openOnClick= "true"表示单击结点时展开该