`
红尘默岩
  • 浏览: 78031 次
  • 性别: Icon_minigender_1
  • 来自: 福建福州
社区版块
存档分类
最新评论

Extjs4.0 笔记

    博客分类:
  • Ext
阅读更多

【一】、布局:TabPanel(card布局)、FormPanel(form布局)、GridPanel(column布局)
1、border
东(east)、南(south)、西(west)、北(north)、中(cente)
2、column
绝对像素(width)、百分比形式(columnWidth)
3、fit
填满整个父容器;若有多个子元素,则只显示第一个子元素
4、form
设置标签,自动生成子元素;是否隐藏标签(hideLabels);对齐方式(labelAlign)
5、accordion
可折叠的布局({title:"标题",html:"内容"})
展开折叠时是否应有动画效果(layoutConfig:{animate:true})
6、tabel
类似HTML标签,用rowspan、colspan给表格做合并
({title:"标题",html:"内容",rowspan:2,height:100})

 

【二】、基本表格
1、new Ext.grid.GridPanel(...)创建基本表格
2、表格标题(header)、表格列对应记录集(dataIndex)、可排序(sortable)、列渲染数(renderer)、宽度(width)、格式化(format)

 

【三】、可编辑表格
1、用 new Ext.grid.EditorGridPanel(...)创建可编辑表格
2、edit:new Ext.form.xxx()来指定可编辑样式
3、clicksToEdit:1为单击单元格即可编辑;为2则为双击单元格才可编辑
4、renderer:方法名(不含括号)该列可自动触发自定义方法,传递一个value值
5、编辑的内容会触发afterEdit事件(afterEdit:function(obj){var value = obj.record.get("id");//获取值}

 

【四】、Ajax
Ext.Ajax.request({
  url:'后台地址',
  success:sFn,//成功调用的方法
  failure:fFn,//失败调用的方法
  params:{name:'姓名',email:'xm@163.com'}//传递参数
});

 

【五】、树
1、leaf为是否含有子节点(true为是,false为否)
2、普通树节点(Ext.tree.TreeNode定义);异步加载树节点(Ext.tree.AsyncTreeNode定义)
3、获取当前节点(tree.getSelectionModel()getSelectedNode())

 

【六】、调用对应接口

1、read:

     store.filter(filters);

2、update:

     form.getForm().updateRecord(record);
     store.sync();

3、destroy:

     store.remove(selection);
     store.sync();

4、create :

     store.add(record);
     store.sync();

 

【大杂烩】

01、调试

  1)js中添加断点:debugger;

  2)控制台中查看结果:console.dir(要查看的对象);

02、按钮不可用:Ext.getCmp('buttonId').setDisabled(true);

03、弹窗确定方法:Ext.MessageBox.confirm('提示', '确定删除?', function(button) {点击确定按钮后执行的代码}

04、获取按钮所属的窗口对象:var win = button.up('window');

05、获取按钮所属的表单对象:var form = button.up("form");

06、获取表单中当前被编辑的记录:var record  = form.getRecord();

07、动态插入数据到第一行处:store.insert(0, values);

08、刷新页码信息:Ext.getCmp("pageToolBarId").doRefresh();

09、重新加载树信息:treeStore.load();

10、页面程序入口(在index.html中引入该文件):Main.js

11、按钮单击事件:click(示例:'noticeList button[action=delete]' : {click: this.deleteNotice})

12、树单击事件:itemdblclick(示例:'noticeTree':{itemclick: this.itemclick})

13、文件上传按钮事假:change(示例:'noticeImport filefield[action=importExcel]':{change:this.importExcel})

14、store中自动调用查询方法:autoLoad = true;

15、内容不允许为空:allowBlank: false

16、每页10条数据:pageSize:10

17、隐藏窗口关闭按钮:closable: false

18、显示出窗体(?):autoShow: true

19、可拖动改变窗体的大小:resizable: true

20、可拖动窗体进行移动:draggable: true

21、显示遮罩层:modal:true

22、折叠收缩(大箭头):collapsible: true

23、折叠收缩(小箭头,必须和大箭头一同使用):split: true

分享到:
评论

相关推荐

    extjs4.0 笔记大全

    extjs4.0 笔记大全,按照这个笔记来,相信你一定能很快学会的

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4...

    Extjs4.0开发笔记

    EXTJS4.0 开发笔记主要探讨了如何利用EXTJS4.0的MVC模式进行Web应用程序的构建,特别是员工管理系统的开发。在MVC模式下,开发过程更具有组织性和可维护性,将模型(Model)、视图(View)和控制器(Controller)...

    Extjs4.0学习笔记大全

    Extjs4.0学习笔记大全

    Extjs4.0学习笔记大全.pdf

    Extjs4.0学习笔记大全.pdf,供大家学习

    ExtJS4.0 MVC 学习资料集合

    这份笔记涵盖了作者在学习ExtJS4.0过程中积累的实战经验和技巧。它可能涉及如何创建一个基本的MVC应用、自定义组件的开发、布局管理、表单处理、数据绑定等方面。此外,还可能包含了一些常见问题的解决方案,对于...

    extjs4.0学习笔记

    EXTJS 4.0 版本带来了许多改进和新特性,使得开发人员能够更高效地构建交互式的Web界面。以下是一些EXTJS 4.0 中的关键知识点: 1. **简化JS文件引用**:在EXTJS应用中,可以通过数组存储所有需要的脚本文件路径,...

    Extjs4.0学习与开发笔记

    Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid,带checkbox的可编辑的Grid等知识点,并附实现代码

    Extjs4.0学习资料

    Extjs4.0学习资料,不知道大家能不能用到。

    2828-Extjs4.0学习笔记大全.pdf

    ExtJS4 学习笔记(一)---window 的创建 Extjs4,创建 Ext 组件有了新的方式,就是 Ext.create(....),而且可以使用动态加载 JS 的方式 来加快组件的渲染,我们再也不必一次加载已经达到 1MB 的 ext-all.js 了,本文...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 ...

    基于extjs4.0.7的员工管理系统

    Extjs4开发笔记(一)——准备工作 http://www.mhzg.net/a/20116/20116281100279.html Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步,我在参照原作者的...

    ExtJS 学习资料 1

    Extjs4.0学习指南(中文).docx ExtJsBook.chm extjs核心api详解.doc ExtJS实用开发指南.pdf Extjs中文文档.pdf EXT--zgibfwebjiaocheng.doc EXT官方网站+中文教程.doc LearningExtJS.pdf 轻松搞定ExtJS.pdf

    ExtJs 学习资料 2

    Extjs4.0学习指南(中文).docx ExtJsBook.chm extjs核心api详解.doc ExtJS实用开发指南.pdf Extjs中文文档.pdf EXT--zgibfwebjiaocheng.doc EXT官方网站+中文教程.doc LearningExtJS.pdf 轻松搞定ExtJS.pdf

    Extjs4 MVC开发笔记源码

    Extjs4 MVC开发笔记源码,此源码已经将命名空间修改为Soyi,由于涉及到一些公司信息,将所有数据库中的数据清除,由于时间仓促。只有备案管理的grid是可以使用的,其他的功能,按照备案管理的文件照猫画虎即可实现。 ...

    EXTjs自己的入门笔记

    这篇笔记主要介绍了EXTJS的入门步骤,特别关注了EXTJS 4.1.0-beta-1版本的配置和运行。 首先,我们需要下载EXTJS的库文件。在这里,作者选择了EXTJS 4.1.0-beta-1版本,但你可以根据需求选择其他版本。下载完成后,...

Global site tag (gtag.js) - Google Analytics