ext笔记
2024-08-30 07:41:54
命名
- The top-level namespaces and the actual class names should be CamelCased. Everything else should be all lower-cased. For example:MyCompany.form.action.AutoLoad
- path/to/src is the directory of your application’s classespath/to/src is the directory of your application’s classes
- Acceptable method names:encodeUsingMd5()
- Acceptable variable names:var isGoodName
声明
Ext.define(className, members, onClassCreated);
获取值
Ext.define()中的Config中的值可以用getXxx,setXxx来获取,注意驼峰命名
- config: {
- title: 'Title Here',
- bottomBar: {
- height: 50,
- resizable: false
- }
- }
技能
加上事件
下面例子就加上了click事件
- var container = Ext.create('Ext.Container', {
- renderTo: Ext.getBody(),
- html: 'Click Me!',
- listeners: {
- click: function(){
- Ext.Msg.alert('I have been clicked!')
- }
- }
- });
- container.getEl().on('click', function(){
- this.fireEvent('click', container);
- }, container);
widget not found
sencha app build
以上是打包的命令,运行后在build文件夹中会有production文件夹,东西都在那里面。
进去找到index.html点开后,如果报错,列如 widget/tabpanel.js 404 not found这种,那就找到用到tabpanel的地方,一般是因为你 xtype:tabpanel 这种地方,然后在相应的文件中,require下对应的名称即可,以tabpanel为例,requier写法如下:
- requires: [
- 'Ext.container.Container',
- 'Ext.tab.Panel', //看这里!对就这里,这个值怎么查到的呢,很简单,就是xtype:tabpanel对应的那个名字啦(查官方文档)
- 'Ext.form.field.File'
- ],
通用方法
查找元素ext.componentquery
- 我这智商,找了好久 orz
- var myPanel = Ext.ComponentQuery.query('#myPanel');
- //实际使用过程中,需要写成这样才能真正拿到这个组件
- myPanel[0]
具体项目
grid相关
表格不要隔行变色,属性竟然藏在这里viewConfig
- viewConfig: {
- stripeRows: false
- }
表格多选行
- //配置
- selModel: {
- selType: 'cellmodel',
- mode : 'MULTI' //多选
- }
- //方法
- getSelection()
表格中的内容无法选中解决方法
- 这个大腿必须抱啊![看这里](http://blog.csdn.net/yeshigudu/article/details/48522239)!!救人于水火啊!!!
- viewConfig: {
- enableTextSelection: true
- }
高亮行,
[取消高亮](http://forums.ext.net/showthread.php?868-CLOSED-Clearing-selection-from-a-gridpanel)
反正就是一把辛酸的泪,那些没设置延时的,你们怎么成功实现高亮的!!!
上结果:
- var urlListTab = Ext.ComponentQuery.query('#urlListTab')[0];
- setTimeout(function() {urlListTab.getSelectionModel().select(index, false, false)}, 800); //
- index为行的index值。第一个false时,进入这个grid时,有其他的高亮行时,指定的这行就不亮了,这个就看看,实际用的时候再测测
- //清除高亮
- GridPanel1.getSelectionModel().clearSelections //当前高亮全部去除
tab
我只是简单的想隐藏个tab,结果智商是硬伤,官方文档里就有好不好 orz
- var tabs = Ext.create('Ext.tab.Panel', {
- width: 400,
- height: 400,
- renderTo: document.body,
- items: [{
- title: 'Home',
- html: 'Home',
- itemId: 'home' // 看这里!!! 是itemId,不是id!!!
- }, {
- title: 'Users',
- html: 'Users',
- itemId: 'users',
- hidden: true
- }, {
- title: 'Tickets',
- html: 'Tickets',
- itemId: 'tickets'
- }]
- });
- Ext.defer(function(){
- tabs.child('#home').tab.hide();
- var users = tabs.child('#users');
- users.tab.show();
- tabs.setActiveTab(users);
- }, 1000);
store和storeManager
先吐槽,store的水好深(其实我好想打三个点,但我要忍住)
拿到store
- Ext.create('Ext.data.Store', {
- model: 'SomeModel',
- storeId: 'myStore'
- });
- var store = Ext.data.StoreManager.lookup('myStore');//用storeId拿到
用store
- Ext.create('Ext.data.Store', {
- model: 'SomeModel',
- storeId: 'myStore'
- });
- Ext.create('Ext.view.View', {
- store: 'myStore', //用storeId就到手啦,真好
- // other configuration here
- });
store具体方法
- //特别提醒,先要拿到store,说多了都是泪
- //增加内容
- myStore.add({some: 'data'}, {some: 'other data'});
- myStore.insert(index, records); //eg: myStore.insert(0, { "name": "hello", "age": "60"})
- myStore.find('name', 'hello'); //返回的是序列号,即index
- myStore.removeAt( index, [count] ) //嘿嘿嘿,拿到序号就可以删除啦
data
field
在这里可以重组field的数据
- {
- name: 'firstName',
- convert: function (value, record) {
- return record.get('name').split(' ')[0];
- },
- depends: [ 'name' ]
- }
data.model
绑定数据相关,好好看看
ajax相关
我一定要写下来,最后我都把我自己感动了,太不容易了,拿个值。
Ext.ajax
- Ext.define('ttt', function() {
- return{
- getData:function(){
- var userData;
- Ext.Ajax.request({
- async: false,//就是这个地方!要加!不然return出来的是undefined
- url: 'resources/userinfo.json',
- success: function(response, opts) {
- var obj = Ext.decode(response.responseText);
- console.log('成功')
- userData = obj;
- },
- failure: function(response, opts) {
- console.log('server-side failure with status code ' + response.status);
- userData = 'failure'
- }
- });
- return userData;
- }
- }
- })
- var test = new ttt();
- var userData = test.getData()
- //我会说这个userData拿到了要来干嘛吗?
- //引入
- viewModel: {
- data: userData
- }
- //使用
- {
- xtype:'button',
- bind: {
- text: '{username}'//json里面有的字段就可以用啦
- },
- }
- //正常实用款
- Ext.Ajax.request({
- url: 'resources/userinfo.json',
- success: function(response, opts) {
- var data = Ext.decode(response.responseText);
- //数据处理动起来
- },
- failure: function(response, opts) {
- console.log('server-side failure with status code ' + response.status)
- }
- });
- //亮点来啦!! [jsonp](http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.proxy.JsonP)
- proxy: {
- type: 'jsonp',
- url : 'http://domainB.com/user',
- callbackKey: 'callback', //亮点在这里,callback=Ext.data.JsonP.callback1 “callback”此字段名一定要匹配!!!
- reader: {
- rootProperty: 'rows',
- totalProperty: 'resutls'
- }
- },
define
我觉得挺实用的,拉出来
- Ext.define('My.awesome.Class', {
- someProperty: 'something',
- someMethod: function(s) {
- alert(s + this.someProperty);
- }
- ...
- });
- var obj = new My.awesome.Class();
- obj.someMethod('Say '); // alerts 'Say something'
base64
- 自带!!!
- //解码
- res = Ext.util.Base64.decode(res);
最新文章
- STMFD 和LDMFD指令
- No compiler is provided in this environment. Perhaps you are running on a JRE ra
- 页面加载后resize页面布局
- 【转】关于TCP和UDP协议消息保护边界的介绍
- json数据传输有感
- sublime配置问题
- js解决快速回车重复订单提交(客户端方式)
- Python程序的混淆和加密
- mysql 相同表求解统一字段不同内容的交集
- Java程序设计环境概述
- python_装饰器_语法糖
- CSS深入理解学习笔记之vertical-align
- java并发容器(Map、List、BlockingQueue)
- postgresql vacuum操作
- 解决webapi首次启动速度慢的问题 - z
- jqgrid 获取所有行数据
- iOS UTI(统一类型标识)
- UA 列表
- eclipse菜单栏工具
- posix 匿名信号量与互斥锁 示例生产者--消费者问题
热门文章
- 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)
- LeetCode.905-按奇偶排序数组(Sort Array By Parity)
- 企业级应用,如何实现服务化二(dubbo架构)
- Python -3-列表和元组
- urllib库的基本使用
- nginx和uwsgi的区别和作用
- bzoj2806 [Apio2012]dispatching【可并堆】
- bzoj 4695: 最假女选手 &;&; Gorgeous Sequence HDU - 5306 &;&; (bzoj5312 冒险 || 小B的序列) &;&; bzoj4355: Play with sequence
- audio、video的控制
- pc端_移动端_H5_ QQ在线客服链接代码