ext6使用的一些笔记(转)
来源:互联网 发布:java编程思想第六版 编辑:程序博客网 时间:2024/05/29 09:59
记性不好的人啊,还是写下来吧。
安装
- 安装senchacmd
- 安装ruby
- 下载ext.js,这里是ExtJS 6.0.0 GPL开源版。吐个槽,文档里总是会提到sdk,然后后面我猜发现sdk指的就是下载下来的压缩包,我那心情啊。
- sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app
示例:sencha -sdk /path/to/ExtSDK generate app -classic TutorialApp ./TutorialApp - 进入目标目录 sencha app watch,页面显示地址为 http://localhost:1841
- 桌面的内容在 classic文件夹
classic/src/main/main.js入口
classic/sass/src/ 里面修改sass文件改样式 - 入口 根目录 app.js 其中规定了最开始进入的页面
笔记内容开始
注意点:
命名
The top-level namespaces and the actual class names should be CamelCased. Everything else should be all lower-cased. For example:MyCompany.form.action.AutoLoadpath/to/src is the directory of your application’s classespath/to/src is the directory of your application’s classesAcceptable 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
我这智商,找了好久 orzvar 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'); //返回的是序列号,即indexmyStore.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);
form相关
转载:http://www.nuomixin.com/2016/02/04/extjs%E7%AC%94%E8%AE%B0/
表单提交后一直进入failure的解决方法,就是需要在返回的json中加入一个字段{“success”: true},亲测可用
阅读全文
0 0
- ext6使用的一些笔记(转)
- 使用sql的一些笔记
- postgresql使用的一些笔记
- js的一些使用笔记
- 学习笔记_JFrame的一些使用(1)
- ext6如何获得table选择的行数据
- ext6.2 如何应用请求后台的下拉框
- 平时使用VS2003总结的一些笔记
- ListActivity使用的一些学习笔记
- Qt 使用json的一些笔记
- Fragment使用时的一些笔记
- Java学习笔记---一些关键字的使用
- GCD,线程使用的一些笔记
- EXCEL的一些公式使用笔记
- android中DialogFragment的一些使用笔记
- 关于pymongo使用的一些笔记
- Hadoop、spark的一些基本使用笔记
- python hdfs 模块的一些使用笔记
- Python-异常处理try(一)
- 引第三方jar导致的java.lang.NoClassDefFoundError
- dorado解析excel
- 2017-11-8离线赛总结 (NOIP七连测第六场)
- C++中vector作为参数的三种传参方式
- ext6使用的一些笔记(转)
- 杭电oj1040
- 11.8模拟赛总结
- java中Integer.parseInt(),Integer.valueOf(),Integer.getInteger()方法的不同
- 【安全牛学习笔记】Kali实战-Web渗透
- 大神浅谈弹性布局链接~~
- Mysql索引总结
- 深度学习视觉领域常用数据集汇总
- 【转自阮一峰老师】React Router中IndexRoute组件的用法