samedi 31 janvier 2015

Unable to Save project settings after checking Overwrite index file on save

[unable to retrieve full-text content]SA 3.2.0.75 on OS X In Project Settings, if I check "Overwrite index file on save" I am no longer able to "Save" the project settings; the Save...



Unable to Save project settings after checking Overwrite index file on save

Change to another component

Good day. Guys tell me how to deal with this situation. insert kompanet

Code:



{
xtype: 'gridpanel',
title: 'Прайс обновлен 00.00.00',
store: 'PriceStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'gr',
text: 'Группа',
width : 70,
},
{
xtype: 'gridcolumn',
dataIndex: 'naimenovanie',
flex : 1,
text: 'Наименование'
},
{
xtype: 'gridcolumn',
dataIndex: 'edIzm',
width : 70,
text: 'Ед.изм.'
},
{
xtype: 'gridcolumn',
dataIndex: 'cenaBezNDS',
width : 70,
text: 'Цена без НДС'
}
]
}



I would like to change it to Ext.ux.LiveSearchGridPanel without changing structure. In general, something like

Code:



{
xtype: 'LiveSearchGridPanel',
title: 'Прайс обновлен 00.00.00',
store: 'PriceStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'gr',
text: 'Группа',
width : 70,
},
{
xtype: 'gridcolumn',
dataIndex: 'naimenovanie',
flex : 1,
text: 'Наименование'
},
{
xtype: 'gridcolumn',
dataIndex: 'edIzm',
width : 70,
text: 'Ед.изм.'
},
{
xtype: 'gridcolumn',
dataIndex: 'cenaBezNDS',
width : 70,
text: 'Цена без НДС'
}
]
}





Change to another component

Can I prevent the architect code editor from redrawing every time I type something?

For example I click my controller, view it's code and click the edit button to the left to open up the text edit mode in sencha architect. Every time I type, pause or hit return it seems to redraw the entire controller code and refresh the screen. This means I have to wait, until this is finished and then the insert point is not even where I was last typing.

Is this a setting, bug, or ?






Can I prevent the architect code editor from redrawing every time I type something?

Carousel - How to get overscroll event ?

In my application I have a need to know when a user reaches the end of a carousel or swipes back to the beginning. So if the user tries to scroll past what is there I can hook in to an event.

What's the best way to do this?


It doesn't like an event is fired in this case. Am I wrong?


Thank you.






Carousel - How to get overscroll event ?

5.1.1.247 Uncaught TypeError: Cannot read property 'isSynchronized' of undefined



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default 5.1.1.247 Uncaught TypeError: Cannot read property 'isSynchronized' of undefined



    5.1.1.247 Uncaught TypeError: Cannot read property 'isSynchronized' of undefined





    This happens too often but very hard to describe, it's related to the mouse moving on a form having two fields, and no drag and drop is really expected to happen.

    Code:



    removeCls (ext-all.js:19)
    Ext.cmd.derive.removeCls (ext-all.js:19)
    Ext.cmd.derive.enable (ext-all.js:19)
    Ext.cmd.derive.enable (ext-all.js:19)
    Ext.cmd.derive.ddEnable (ext-all.js:19)
    Ext.cmd.derive.handleMouseUp (ext-all.js:19)
    fire (ext-all.js:19)
    Ext.cmd.derive.fire (ext-all.js:19)
    Ext.cmd.derive.publish (ext-all.js:19)
    Ext.cmd.derive.doDelegatedEvent (ext-all.js:19)
    Ext.cmd.derive.doDelegatedEvent (ext-all.js:19)
    Ext.cmd.derive.onDelegatedEvent (ext-all.js:19)
    Ext.Function.i.bind.r (ext-all.js:19)

    getData() return undefined

    Code:



    removeCls: function(names, prefix, suffix) {
    var me = this,
    elementData = me.getData(),
    hasNewCls, dom, map, classList, i, ln, name;
    if (!names) {
    return me;
    }
    if (!elementData.isSynchronized) {
    me.synchronize();
    }

    'this/me':


    Code:



    constructor {dom: null, id: "ext-quicktips-tip", el: constructor, hasListeners: statics.prepareClass.HasListeners, events: Object…}component: constructorconfig: Objectdom: nullel: constructorevents: ObjecthasListeners: statics.prepareClass.HasListenersid: "ext-quicktips-tip"initConfig: function () {}initialConfig: ObjectisDestroyed: truelastBox: nullmanagedListeners: Array[0]shadow: null__proto__: constructor$className: "Ext.dom.Element"














5.1.1.247 Uncaught TypeError: Cannot read property 'isSynchronized' of undefined

YouTube video embeds with iframe causing issues

I have a problem with displaying embedded YouTube videos in my app. I retrieve news articles from a website and display the content in the app and some times this may include YouTube videos.

It displays the retrieved article fine and shows the YouTube embed but you cannot tap the play button. It seems you have to 'activate' the iframe by tapping inside it to be able to press the play button which means when you then try to scroll the rest of the article it will only seem to scroll the iframe. You then have to tap outside the iframe to scroll the rest of the article.


Any ideas on what the best way to fix this would be?






YouTube video embeds with iframe causing issues

Spotlight has callbacks documented for show and hide but they are not implemented

Code:



Ext.define('overrides.Ext.ux.Spotlight', {
override: 'Ext.ux.Spotlight',

/**
* Show the spotlight
*/
show: function (el, callback, scope) {
var me = this;

//get the target element
me.el = Ext.get(el);

//create the elements if they don't already exist
if (!me.right) {
me.createElements();
}

if (!me.active) {
//if the spotlight is not active, show it
me.all.setDisplayed('');
me.active = true;
Ext.on('resize', me.syncSize, me);
me.applyBounds(me.animate, false, callback, scope); // FIX: added callback/scope
} else {
//if the spotlight is currently active, just move it
me.applyBounds(false, false, callback, scope); // FIX: added callback/scope
}
},

/**
* Hide the spotlight
*/
hide: function (callback, scope) {
var me = this;

Ext.un('resize', me.syncSize, me);

me.applyBounds(me.animate, true, callback, scope); // FIX: added callback/scope
},

/**
* Resizes the spotlight depending on the arguments
* @param {Boolean} animate True to animate the changing of the bounds
* @param {Boolean} reverse True to reverse the animation
*/
applyBounds: function (animate, reverse, callback, scope) {
var me = this,
box = me.el.getBox(),
//get the current view width and height
viewWidth = Ext.Element.getViewportWidth(),
viewHeight = Ext.Element.getViewportHeight(),
i = 0,
config = false,
from, to, clone;

//where the element should start (if animation)
from = {
right: {
x: box.right,
y: viewHeight,
width: (viewWidth - box.right),
height: 0
},
left: {
x: 0,
y: 0,
width: box.x,
height: 0
},
top: {
x: viewWidth,
y: 0,
width: 0,
height: box.y
},
bottom: {
x: 0,
y: (box.y + box.height),
width: 0,
height: (viewHeight - (box.y + box.height)) + 'px'
}
};

//where the element needs to finish
to = {
right: {
x: box.right,
y: box.y,
width: (viewWidth - box.right) + 'px',
height: (viewHeight - box.y) + 'px'
},
left: {
x: 0,
y: 0,
width: box.x + 'px',
height: (box.y + box.height) + 'px'
},
top: {
x: box.x,
y: 0,
width: (viewWidth - box.x) + 'px',
height: box.y + 'px'
},
bottom: {
x: 0,
y: (box.y + box.height),
width: (box.x + box.width) + 'px',
height: (viewHeight - (box.y + box.height)) + 'px'
}
};

//reverse the objects
if (reverse) {
clone = Ext.clone(from);
from = to;
to = clone;
}

if (animate) {
Ext.Array.forEach(['right', 'left', 'top', 'bottom'], function (side, i, all) {
/* FIX for missing callback support */
var listeners = i < all.length - 1 ? {} : {
listeners: {
afteranimate: {
fn: callback || Ext.emptyFn,
scope: scope
}
}
}

me[side].setBox(from[side]);
me[side].animate(Ext.apply({
duration: me.duration,
easing: me.easing,
to: to[side],
}, listeners));
},
this);
} else {
Ext.Array.forEach(['right', 'left', 'top', 'bottom'], function (side) {
me[side].setBox(Ext.apply(from[side], to[side]));
me[side].repaint();

/* FIX for missing callback support */
if (callback) {
callback.apply(scope); // not sure what arguments to pass here
}
},
this);
}
}
});





Spotlight has callbacks documented for show and hide but they are not implemented

vendredi 30 janvier 2015

Unable to switch Ext Version from SA 3.1

Please help

I installed latest architect 3.2 side by side with 3.1. ie, installed in another location. When I open an old project in SA 3.1 it asking for project upgrade. So that I removed all latest versions of CMDs from my PC and now I only having CMD 5.0.3.324. Then I have removed everything exept "metadata" folder and project xds file and opened project file again in SA3.1 and now the CMD is picking correct version.

But the strange issue is that the Ext version automatically upgraded to the latest 5.1 . But I dont want that version I need previous 5.0.1 version only because this one having lots of issues.


So my question is that, how can I tell SA 3.1 to pick the degraded version of ExtJS. I couldn't see any configuration. I tried to changes the framework version from xds file but it automatically converted the ExtJS version again to the latest one.


Please help urgent.


MG






Unable to switch Ext Version from SA 3.1

HOW TO add cell listener to grid row?

[unable to retrieve full-text content]Hi: I would like to add a cell listener to a grid row for mouseenter and mouseleave. I am aware of the itemmousenter and itemmouseleave for a...



HOW TO add cell listener to grid row?

ViewModel access from ViewController and same ViewModel

Hello, im moving to extjs5 and writing an application from scratch.

I have a view that contains (among other things) this



Code:



{
xtype: 'panel',
flex: 1,
margin: '0 10 5 0',
layout: {
type: 'hbox',
pack: 'end'
},
items: {
xtype: 'displayfield',
name: 'statusBanner',
bind: '{astatus}'
}
}

Then i have this inside my viewModel

Code:



Ext.define('cc.view.Agent.AgentModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.agent',
data: {
astatus: 'unknown'
},
formulas: {
agentname: function (a) {
var infoObj = JSON.parse(localStorage.getItem("infoLogin"));
if (infoObj !== undefined)
{
return infoObj.user.usuario;
}
return 'ND';
}
}
,
stores: {
Agents: {
storeID: 'agentsStore',
fields: ['name', 'type', 'status', 'contact', 'maxNoAnswer', 'wrapUpTime', 'rejectDelayTime', 'busyDelayTime'],
proxy: {
type: 'ajax',
url: '/cccore/agents',
reader: {
type: 'json',
rootProperty: 'agents',
successProperty: 'success',
totalProperty: 'total'
}
},
filters: [{
property: 'name',
value: '{agentname}',
operator: '='
}],
listeners : {
load: {
fn: function(){
console.log(); //<<<<---- from here
}
}
},
autoLoad: true
}
}
});

How can i, where says 'from here' set the value of astatus inside data? (meaning with this, i want to astatus be setted with the status field of the first record from the store)

after that, on my viewController i have this



Code:



Ext.define('cc.view.Agent.AgentController', {
extend: 'Ext.app.ViewController',
alias: 'controller.agent',
//aca tengo que escribir los metodos para procesar los eventos
onClickNoDisponible: function () {
this.changeStatus('Logged Out');
},
onClickDisponible: function () {
this.changeStatus('Available');
},
onClickManual: function () {
this.changeStatus('Available (On Demand)');
},
onClickDescanso: function () {
this.changeStatus('On Break');
},
changeStatus: function (status) {
//crear form, submitear, dar load al store de agentes
var form = Ext.create('Ext.form.Panel', {
items: [
{
xtype: 'hiddenfield',
name: 'username',
value: this.getViewModel().get('agentname')
},
{
xtype: 'hiddenfield',
name: 'status',
value: status
}
]
});

// console.log(status+" for "+this.getViewModel().get('agentname'));
// console.log(this.getViewModel().getStore('Agents'));
if (form.isValid()) {
form.submit({
url: '/cccore/agentstatus',
method: 'POST',
success: function (form, action) {
//FROM HERE <----------------------------- FROM HERE
},
failure: function (form, action) {
Ext.Msg.alert('Error en comando', action.result.msg);
}
});
}
}


});

how can i call to load again the Agents store inside my viewModel?

Sorry to ask this, i've been trying and i cannot realize it






ViewModel access from ViewController and same ViewModel

Using requires in an "external" class vs. app.js

I've added a workspace classpath to a folder that holds a singleton class:

Code:



Ext.define('storage.WebStorage', {


singleton: true,

I then use it the config of another class (MyApp.store.TaskLists) define:

Code:



config: {
model: 'MyApp.model.TaskList',
proxy: {
type: 'offline',
url: '/test-api/test-resource.json',
storageKey: 'tasklists',
storageFacility: storage.WebStorage,
reader: {
type: 'json',
rootProperty: 'data'
}
}

When I add 'storage.WebStorage' to the requires array for the Ext.application (app.js) this works. But it does not work if I only add it to the requires array for the class that uses the singleton. I get a 'Uncaught ReferenceError: storage is not defined'

I've got another singleton class that works without using the application.requires array (required from multiple controllers). But it is located within the regular app hierarchy (app/util/MySingleton.js)

I thought it was best-practice to specify the requires at the individual class level, is there something about classes added via the workspace classpath that is different?

This is happening while serving the app from its workspace using sencha app watch.






Using requires in an "external" class vs. app.js

Adding Direct Resource in New Project Fails with Communications Failure

All of my old 5 and 5.1 apps work fine. However, if i create a new, blank 5.1 app and add the Direct Resource, and point it to the SAME resource that worked in my other applications, I get "Communications Error" Remoting spec failed to load

then, usually, SA Crashes!


Bruce






Adding Direct Resource in New Project Fails with Communications Failure

GXT 2.3 with GWT 2.7

I tried GXT 2.3 with GWT 2.7, I am getting the below error in GWT Compile. Is there anyway to have GXT 2.3 with GWT 2.7?

Compiling 5 permutations

Compiling permutation 0...

[ERROR] An internal compiler exception occurred

com.google.gwt.dev.jjs.InternalCompilerException: Unexpected error during visit.

at com.google.gwt.dev.js.ast.JsVisitor.translateException(JsVisitor.java:482)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:469)

at com.google.gwt.dev.js.ast.JsVisitor.doAccept(JsVisitor.java:444)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.JsToStringGenerationVisitor.visit(JsToStringGenerationVisitor.java:225)

at com.google.gwt.dev.js.ast.JsBinaryOperation.traverse(JsBinaryOperation.java:112)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsVisitor.doAccept(JsVisitor.java:444)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.JsToStringGenerationVisitor.visit(JsToStringGenerationVisitor.java:603)

at com.google.gwt.dev.js.ast.JsInvocation.traverse(JsInvocation.java:91)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsVisitor.doAccept(JsVisitor.java:444)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.JsToStringGenerationVisitor.visit(JsToStringGenerationVisitor.java:445)

at com.google.gwt.dev.js.ast.JsExprStmt.traverse(JsExprStmt.java:41)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsVisitor.doAccept(JsVisitor.java:444)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.ast.JsNode.toSource(JsNode.java:63)

at com.google.gwt.dev.js.JsDuplicateCaseFolder$DuplicateCaseFolder.toSource(JsDuplicateCaseFolder.java:142)

at com.google.gwt.dev.js.JsDuplicateCaseFolder$DuplicateCaseFolder.visit(JsDuplicateCaseFolder.java:108)

at com.google.gwt.dev.js.ast.JsSwitch.traverse(JsSwitch.java:53)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsModVisitor$ListContext.traverse(JsModVisitor.java:80)

at com.google.gwt.dev.js.ast.JsModVisitor.doAcceptWithInsertRemove(JsModVisitor.java:197)

at com.google.gwt.dev.js.ast.JsVisitor.acceptWithInsertRemove(JsVisitor.java:121)

at com.google.gwt.dev.js.ast.JsBlock.traverse(JsBlock.java:53)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsModVisitor$NodeContext.traverse(JsModVisitor.java:153)

at com.google.gwt.dev.js.ast.JsModVisitor.doAccept(JsModVisitor.java:176)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.ast.JsFunction.traverse(JsFunction.java:202)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsModVisitor$NodeContext.traverse(JsModVisitor.java:153)

at com.google.gwt.dev.js.ast.JsModVisitor.doAccept(JsModVisitor.java:176)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.ast.JsBinaryOperation.traverse(JsBinaryOperation.java:118)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsModVisitor$NodeContext.traverse(JsModVisitor.java:153)

at com.google.gwt.dev.js.ast.JsModVisitor.doAccept(JsModVisitor.java:176)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.ast.JsExprStmt.traverse(JsExprStmt.java:42)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsModVisitor$ListContext.traverse(JsModVisitor.java:80)

at com.google.gwt.dev.js.ast.JsModVisitor.doAcceptWithInsertRemove(JsModVisitor.java:197)

at com.google.gwt.dev.js.ast.JsVisitor.acceptWithInsertRemove(JsVisitor.java:121)

at com.google.gwt.dev.js.ast.JsBlock.traverse(JsBlock.java:53)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

at com.google.gwt.dev.js.ast.JsModVisitor$NodeContext.traverse(JsModVisitor.java:153)

at com.google.gwt.dev.js.ast.JsModVisitor.doAccept(JsModVisitor.java:176)

at com.google.gwt.dev.js.ast.JsVisitor.accept(JsVisitor.java:109)

at com.google.gwt.dev.js.JsDuplicateCaseFolder.execImpl(JsDuplicateCaseFolder.java:171)

at com.google.gwt.dev.js.JsDuplicateCaseFolder.exec(JsDuplicateCaseFolder.java:163)

at com.google.gwt.dev.jjs.MonolithicJavaToJavaScriptCompiler$MonolithicPermutationCompiler.optimizeJs(MonolithicJavaToJavaScriptCompiler.java:139)

at com.google.gwt.dev.jjs.JavaToJavaScriptCompiler$PermutationCompiler.compilePermutation(JavaToJavaScriptCompiler.java:324)

at com.google.gwt.dev.jjs.MonolithicJavaToJavaScriptCompiler.compilePermutation(MonolithicJavaToJavaScriptCompiler.java:296)

at com.google.gwt.dev.jjs.UnifiedAst.compilePermutation(UnifiedAst.java:143)

at com.google.gwt.dev.CompilePerms.compile(CompilePerms.java:197)

at com.google.gwt.dev.ThreadedPermutationWorkerFactory$ThreadedPermutationWorker.compile(ThreadedPermutationWorkerFactory.java:50)

at com.google.gwt.dev.PermutationWorkerFactory$Manager$WorkerThread.run(PermutationWorkerFactory.java:74)

at java.lang.Thread.run(Thread.java:662)

Caused by: java.lang.NoSuchMethodError: com.google.gwt.util.tools.shared.StringUtils.javaScriptString(Ljava/lang/StringLjava/lang/String;

at com.google.gwt.dev.js.JsToStringGenerationVisitor.printStringLiteral(JsToStringGenerationVisitor.java:1344)

at com.google.gwt.dev.js.JsToStringGenerationVisitor.visit(JsToStringGenerationVisitor.java:822)

at com.google.gwt.dev.js.ast.JsStringLiteral.traverse(JsStringLiteral.java:76)

at com.google.gwt.dev.js.ast.JsVisitor.doTraverse(JsVisitor.java:467)

... 60 more

[ERROR] at Button.java(704): <source info not available>

com.google.gwt.dev.js.ast.JsStringLiteral

[ERROR] at Button.java(704): <source info not available>

com.google.gwt.dev.js.ast.JsBinaryOperation

[ERROR] at Button.java(704): <source info not available>

com.google.gwt.dev.js.ast.JsInvocation

[ERROR] at Button.java(704): <source info not available>

com.google.gwt.dev.js.ast.JsExprStmt

[ERROR] at Button.java(274): <source info not available>

com.google.gwt.dev.js.ast.JsSwitch

[ERROR] at Button.java(271): <source info not available>

com.google.gwt.dev.js.ast.JsBlock

[ERROR] at Button.java(271): <source info not available>

com.google.gwt.dev.js.ast.JsFunction

[ERROR] at Button.java(271): <source info not available>

com.google.gwt.dev.js.ast.JsBinaryOperation

[ERROR] at Button.java(271): <source info not available>

com.google.gwt.dev.js.ast.JsExprStmt

[ERROR] at com.google.gwt.dev.js.ast.JsProgram(0): <source info not available>

com.google.gwt.dev.js.ast.JsGlobalBlock

[ERROR] Unrecoverable exception, shutting down






GXT 2.3 with GWT 2.7

Axis gauge ???

BUG re: OS X caps is treated like CTRL

Using Play as a Namespace in SA 3.2 causes App to Fail

Hi there,

I was working a quick example pie so I created a PlayModel project.


Created a Model, Store, and Pie View together and used namespaces.


Model name - Play.CustomerTypesModel

Store name - Play.CustomerTypesStore

Pie Class name - PlayClass.CustomerTypesPie

Panel name - Play.PieChartdisplay


Generated some data. Looked good so far and pressed F6.


The app would not run in a browser. I looked at the traffic and the app was failing on a get to the Model with a Request URL of...


localhost/sencha/app/PlayModel/app/CustomerTypesModel.js (with parameters).


Um, it should be looking in


localhost/sencha/app/PlayModel/app/Play/CustomerTypesModel.js


Messed around for about an hour or so, got a colleague to look at it. Removed namespacing for all objects and pressed F6. It ran just fine.


Decided to start adding namespace back in one at a time, first changing the model to Play.CustomerTypesModel. It failed immediately.


WOW, that's weird. Tried with


PlayModel.CustomerTypesModel - works

PLY.CustomerTypesModel - works

Fred.CustomerTypesModel - works.


Is Play a reserved word?


Thanks,


Crispin.






Using Play as a Namespace in SA 3.2 causes App to Fail

Collapsible Panel

Hi all,

i've noticed that there isn't a collapsible option on ST panels.


I really need to have a panel with a collapse direction 'top'. So the panel is initially collapsed and show only the title, when user press the title the panel must expand itself and show the content. But without changing view completely.


Thanks a lot for your help






Collapsible Panel

Tree Menu with Navigation look and Feel

I am using tree panel, tree view and tree column to show our menus.

It is looking like the below image.

Tree Menu.png

I want to look like the navigation menu.

I need like the below image

Navigation Menu.png


Is it possible in Sencha to provide like a navigation menu in tree panel?


If any other alternate way is available, Please provide some examples and code snippet






Tree Menu with Navigation look and Feel

Please give feedback on this localization approach

We have implemented several Ext JS applications in English, and the time has now come when we need to localize the applications for new markets. I have read the various localization documentation, but the standard approach of storing all localizable texts in object fields and overriding class prototypes to change language is not well suited to our applications. The reason is that we develop everything using Sencha Architect, meaning that while our localizable texts are stored in object fields, many of the objects are "anonymous" in that they are simply specified as config objects in an items array or similar.

As an example, consider the following excerpt which creates a radiogroup with 3 radio buttons:


Code:



{
xtype: 'radiogroup',
itemId: 'roleType',
fieldLabel: 'Role types',
labelSeparator: ' ',
allowBlank: false,
items: [
{
xtype: 'radiofield',
name: 'roleType',
boxLabel: 'Single',
checked: true,
inputValue: 'S'
},
{
xtype: 'radiofield',
name: 'roleType',
boxLabel: 'Composite',
inputValue: 'C'
},
{
xtype: 'radiofield',
name: 'roleType',
boxLabel: 'Both',
inputValue: 'B'
}
]
}

There is no easy way in Architect to change the boxLabel attributes from fixed strings to a reference to something else. And even if this were trivial, it would require a great deal of work to go through the entire application and make those changes.

The approach I am currently prototyping requires no changes to these static texts in the application, but instead adds overrides to those UI classes that contain texts that require translation. Here is the override for Ext.form.field.Radio:



Code:



Ext.override(Ext.form.field.Radio, {
constructor: function(config) {
if (config && config.boxLabel && config.boxLabel.length > 0)
config.boxLabel = translate(config.boxLabel);
return this.callParent(arguments);
}
});

The translate() method simply performs a lookup of the original English text in a JavaScript array, e.g.


Code:



translations = {
'Single': 'Enkel',
'Composite': 'Sammensat',
'Both': 'Begge'
};

and returns the target language translation. The array declaration is loaded dynamically based on the user's language.

So far I have tested this for radio button texts, panel titles, and tab texts, and it works fine. I realize, of course, that there are quite a few classes to go through and write overrides for, and that there are cases that this particular approach does not cover such as dynamically generated texts. So this approach must be supplemented in certain parts of the application. However, I think the beauty of this approach is that it allows most of the application to remain untouched and remain simple to maintain. It also means that if the same text appears on e.g. both a button and a tab, then the text only needs to be translated once.


I do have two concerns:



  1. What is the potential performance impact of these overrides?

  2. Is this approach likely to prove brittle in the face of new Ext JS releases?


I welcome your comments and critiques.



Please give feedback on this localization approach

Can Sencha Cmd minify the package CSS?

text field focus

Application launch method not called when using Sencha Architect 3.2 / Ext JS 5.1

I tried upgrading my Ext JS 5.0 app to 5.1 back when 5.1 was released but ran into problems.

Now that we have Architect 3.2 with official support for Ext JS 5.1 I decided to give it another go and the exact same thing happens.


I get a blank screen when I visit the application that was updated using SA3.2 (was working fine with SA 3.2 prior to updating to Ext JS 5.1). It seems SA uses a launch() function to instantiate the viewport marked as the initial view thus:



Code:



launch: function() {
Ext.create(MyPkg.view.AppViewport');
}

If I add a debugger statement to launch() it is never executed, suggesting that the method itself is not being invoked. No uncaught exceptions are thrown.

When editing launch() the above Ext.create() statement is removed, but added back in when I leave the method, so the earliest I can add the debugger statement is after the Ext.create(). Is there somewhere earlier I can add a debugger statement to try and identify what is going wrong?


In the other thread dongryphon suggested I check the value of "Ext.isReady". If I do this in the console it returns false.


I wondered if the viewport should be converted to a panel with the viewport plugin but it appears this is not supported in SA 3.2.


I'm stuck. How do I get my application to initialize?






Application launch method not called when using Sencha Architect 3.2 / Ext JS 5.1

Grid filter list options

Hi :) ,

I'm trying to change a grid filter list options, here is my code :



Code:



Ext.getCmp('Plan').getView().getHeaderCt().child('#METIER').initialConfig.filter.options = store.collect('METIER');

This seems to work, the object is well updated.

But the filter menu is not changing.

What do I have to do more to apply the new list options ?


Thanks in advance,


Charlotte.






Grid filter list options

field on form's fieldset have no description when opening window

I use some form on tab panel with field description and allright

OT56zcN.png

But when I use this form on window that's doesn't work

mn6UVqC.png


What is wrong?


Window definition:



Code:



Ext.define('Project.view.d988.mkd.profile.generalMeeting.Add', {
extend: 'Project.AbstractWindow',
alias: 'widget.d988GeneralMeetingsAddWindow',
title: 'Добавление сведений о проводимых общих собраниях собственников',
resizable: false,
modal: true,
autoShow: true,
requires: [
'Project.ux.grid.PagingToolbarResizerExt',
'Project.view.d988.mkd.profile.generalMeeting.AddForm'
],
checkedData: {},
parentGrid: null,
autoScroll: false,
closeAction: 'destroy',
plugins: ['permission'],


initComponent: function () {
var me = this;


Ext.apply(me, {
tbar: {
ui: 'footer',
items: [
{
text: 'Сохранить',
handler: function () {
me.saveForm();
}
},
'->',
{
text: 'Отмена',
handler: function () {
me.close();
}
}
]
},
items: [
{
xtype: 'd988ProfileCardOverhaulOverview'
}
]
});


me.callParent(arguments);
},


saveForm: function () {
var me = this;
}
});





field on form's fieldset have no description when opening window

How read write file txt un Sencha Touch

I want to save/load app settings locally.

I put my json url in resources/url.txt file. Now I want to read that url and put in store.


How can I do that? I also want to write/edit the text in it. Any clue where to start?


I did follow this indexedDB sample guide, http://ift.tt/1yJeqSO


I can write data in indexedDB, but no clue how to read it. Please advice.






How read write file txt un Sencha Touch

Grid Builder - Remove Existing option doesn't remove all columns

jeudi 29 janvier 2015

not rendered nodeText if Text size is Too Large.

[unable to retrieve full-text content]Hi, i have used TreePanel. that tree contains one node which has too much text approx 76000+ characters. that is not render proper in Crome...



not rendered nodeText if Text size is Too Large.

How to delete ViewModel and ViewController?

Phantom init function

I was tidying up some controllers in a project today - I created a couple of new ones and moved some functions between controllers (just by drag+drop) and something seems to have seriously messed up my project.

I now seem to have "phantom" init functions in each of the controllers that I cannot edit and cannot delete.


What I've been doing up till now is adding the init function via the designer and using code like this to listen for events from controllers. This has been working fine



Code:



init: function(application) {
this.control({
"somePanel": {
someEvent: this.someFunction
}
});}

Now I have the situation where in the project inspector there is no longer an init function but if I view the code for the whole controller I can still see the code that used to be there. If I add the init function back in it does not have any code in it and any code I add just goes before the phantom code

I've tried looking at the actual files generated by architect. The init code isn't in the metadata file but it is in the generated "someController.js" file. If I delete it from there it just gets recreated next time I save.


I'm at a total loss what to do, short of redoing all my controllers again. I've tried reinstalling Architect and upgrading to Architect 3.2 to see if that sorted it but it hasn't


Has anyone seen this before and if so how did you fix it?


Edit: I should add I'm using Architect 3.0 and ExtJS 4.2






Phantom init function

best TODO / sample CMD apps?

Getting Record Sub-Data

I have a dataview that displays records from a nested store. When I tap on the dataview item, I can access the top level data from the store, but I can't seem to get the nested sub-level data.

My store data is structured as follows:



Code:



courses
|
|_ tests
|
|_ questions
|
|_ answers
|
|_ response

The following Fiddle (below) should help illustrate my problem.


  1. Once the Fiddle is loaded, tap on the 'Archives' tab at the bottom of the screen.

  2. Tap on one of the data items. The top level data (courses) is loading, but I also need to access the sub-level data (tests), and even the next level (questions), and so on.




You can see in the 'mainPanel' controller (onArchivesTabDataviewItemTap) where I have attempted to get the data using the index of the record, but since the top level record is a singular item, it always comes back as 0. I'm thinking that if I can get the index of the tapped item, I can sort down to the sub level using the following code:

Code:



var tests = record.tests();
console.log(record.data.tests[index].testName);

I haven't had any luck getting the tapped item's index, however. Also I may be completely off base with my assumption, so any help accessing the sub-level data would be appreciated.



Getting Record Sub-Data

Custom Generator Support

I would like to propose an enhancement request if not already done so. I really like the Data Binding generator, but it is unlikely it would ever fit my needs. Ideally we would have the ability to add our own generators to Architect, allowing us to create components, stores etc.

For example, I am building a Backend as a Service and would like a custom generator to connect to the service, retrieve meta data and then generate the appropriate components etc. This is more than an alternate datasource though as the components I would create would be based on custom components defined in a user extension.


Not sure how the client is created (ie Node-webkit, Titanium etc), but if you could leverage a generation tool such as is in Ruby on Rails, Node.js yeoman etc that would be fantastic.


Has anyone else requested such a feature? Do you see this as being useful for other users in the enterprise community??






Custom Generator Support

Error when creating ExtJS 5.1 App in Acrhitect 3.2

How to return json from php with ajax call

Hello,

Im totally new to PHP. How do I return the json generated from the ajax call.


Ive seen numerous examples, but they only show tables and such being generated in while loops with echo statements. How do I return the entire json response back to the Ext.ajax in one chunk?


I used to code on the AS/400 and it had another way of doing it.


Sorry to ask such a simple question, but Im not familiar enough with PHP yet?


Thank You






How to return json from php with ajax call

[Ext 4.2.3] onStoreRefresh of Ext.selection.Model



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default [Ext 4.2.3] onStoreRefresh of Ext.selection.Model



    [Ext 4.2.3] onStoreRefresh of Ext.selection.Model





    This ticket cannot be reproduced using fiddle since it requires a remote store with filtering feature.

    I have a combobox with remote data, forceSelection: true and queryMode:'remote'.

    If the user filters by entering a few characters while the store is reloaded, the "Ext.selection.Model#onStoreRefresh" method is called.


    If one of my previously selected value does not exist anymore in the store there is a JS error in this method.



    Code:



    onStoreRefresh: function(){ var me = this,
    selected = me.selected,
    items, length, i, rec, storeRec;

    if (me.store.buffered) {
    return;
    }

    items = selected.items;
    length = items.length;

    me.lastSelected = me.getStoreRecord(me.lastSelected);

    for (i = 0; i < length; ++i) {
    rec = items[i];
    storeRec = me.getStoreRecord(rec);
    if (storeRec) {
    if (rec.hasId()) {


    me.selected.replace(storeRec);
    }
    } else {

    me.selected.remove(rec);
    }
    }
    }

    The issue is due to the "for loop" : it is removing items from the array it loops on.


    Code:



    for (i = 0; i < length; ++i) { ...
    me.selected.remove(rec);

    And this can lead rec to be undefined.

    A solution for this kind of problem can be to iterate the array reversly,



    Code:



    for (i = length-1; i >= 0 ; --i)














[Ext 4.2.3] onStoreRefresh of Ext.selection.Model

Pie chart click event

Hi guys,

I have a Pie chart and I would like to handle click on the donut slice. I looked at the Ext.charts.series.Series class, but the only events available are chartattached and chartdetached.


Is there any way to get click or doubleclick events from slices in pie/donut charts ? Or at the very least on the items of the legends (but I still want the behavior of hiding ) ?


Thanks in advance !






Pie chart click event

Using two stores. Main data + lookup table

Hi All,

Can't find an example of how to do this anywhere, so thought I'd ask here;


I'm trying to find the correct / best / suggested way to perform what is essentially an SQL JOIN locally. I've been through references, associations and now totally confused.


---


What I am trying to achieve is this;


Table 1 holds the main data records. I will use books as an example;

field : id - unique key

field : title - title of the book

field : author_id - id of author


Table 2 holds a list of authors

field : id - unique key

field : name - authors name


Relationship is Many to One, so that one Author can have many books. (This could just as easily be Customers and Order, or User and Posts etc)


If this was server side a simple join would get me records which included the authors details when selecting a book.


However I'd like to do the association client side to save duplicating the author data on each book record.


---


So far I have two models, two stores and a grid. It feels like store level should be the place to do the association, that way if I bind a grid to the store of books the author name appears as real data and can be filtered on. (If the field is done in a grid renderer I believe that the filter function wont see it?)


I have set up the following example in Fiddle http://ift.tt/1EREEYV



Code:



Ext.define('darkApp.model.Base', {
extend: 'Ext.data.Model',


schema: {
namespace: 'darkApp.model'
}
});


Ext.define('darkApp.model.BookObject', {
extend: 'darkApp.model.Base',


fields: [{
name: 'id',
type: 'int',
critical: true,
unique: true
},{
name: 'Title'
}, {
name: 'AuthorID',
type: 'int',
reference: 'AuthorObject'
}]
});


Ext.define('darkApp.model.AuthorObject', {
extend: 'darkApp.model.Base',


fields: [
{
name: 'id',
type: 'int',
critical: true,
unique: true
}, {
name: 'Name'
}
]
});


Ext.define('darkApp.store.Books', {
extend: 'Ext.data.Store',
alias: 'Books',


model: 'darkApp.model.BookObject',


data: [{
id: 1,
Title: 'Book 1',
AuthorID: 1
}, {
id: 2,
Title: 'Book 2',
AuthorID: 2
}, {
id: 3,
Title: 'Book 3',
AuthorID: 1
}]
});


Ext.define('darkApp.store.Authors', {
extend: 'Ext.data.Store',


model: 'darkApp.model.AuthorObject',


data: [{
id: 1,
Name: 'Author 1'
}, {
id: 2,
Name: 'Author 2'
}, {
id: 3,
Name: 'Author 3'
}]
});




Ext.define('darkApp.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',


items: [{
xtype: 'grid',
store: {
xclass: 'darkApp.store.Books'
},
columns: [{
text: 'Book ID',
dataIndex: 'id'
},{
text: 'Title',
dataIndex: 'Title'
}, {
text: 'Authors ID',
dataIndex: 'AuthorID'
}, {
text: 'Authors Name',
dataIndex: 'AuthorID',
filter: {
type: 'string'
}
}],
plugins: [
{
ptype: 'gridfilters'
}
]
}]
});




Ext.application({
name: 'Fiddle',


launch: function() {
Ext.create("darkApp.view.main.Main", {
renderTo: Ext.getBody()
});
}
});

Anyone help? I can't help feeling I've missed something obvious :-)


Mark






Using two stores. Main data + lookup table

Creating a custom theme and use sencha watch on it

Hi.

I'm trying to build a custom theme for my app.

I've created a folder called myThemeName under the resources folder.

Inside of it I've created four folders:


I've put my sass file into the sass folder along with its config.rb

Now, I would like to make the sencha watch command to "watch" for the changes of my sass file and build the css file, because it only keeps watching the app.sass file into the resources/sass folder.


I've included the myThemeName/css folder in my app.json file in order to use it as a theme.


How can I tell to sencha watch to also watch my myThemeName/sass folder? Is this possible?






Creating a custom theme and use sencha watch on it

Horizontal list ST 2.4.1 not working

Hi,

I'm trying to figure out how to scroll the list component horizontally, with grouped items.

I search the forum and the web, and the simple answer is to put into the list config:


Code:



inline: { wrap: false },
scrollable: { direction: 'horizontal', directionLock: true }

but it doesn't work.

So, the only way I could accomplish this, is using the dataview component, but I don't know how to put the group header (like toolbar or something similar).



Horizontal list ST 2.4.1 not working

Question about Rendering in firefox

Container#moveBefore/moveAfter moves child to incorrect index when moving up (5.1.0)



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default Container#moveBefore/moveAfter moves child to incorrect index when moving up (5.1.0)



    Container#moveBefore/moveAfter moves child to incorrect index when moving up (5.1.0)





    Bug in Ext.container.Container#moveBefore and #moveAfter: when moving a child with a lower index to a child with a higher index withing the same container, the child gets placed one position too high.

    Example:



    • 1, 2, 3 => move 1 before 3 => should be 2, 1, 3 but is 2, 3, 1

    • 1, 2, 3 => move 1 after 2 => should be 2, 1, 3 but is 2, 3, 1


    Fiddle: http://ift.tt/15X8mQH

    See Fiddle example for further details, reproduction steps and expected/actual result.

    Additional info:


    Ext version tested:



    • Ext 5.0.1.1255 (works)

    • Ext JS 5.1.0.107 (fails)


    Browser versions tested against:

    • Chrome 40.0.2214.93 m

    • FF 34.0.5















Container#moveBefore/moveAfter moves child to incorrect index when moving up (5.1.0)

EXT-JS 4.2.1 retain the current Position of scrollbar of form - panel

mercredi 28 janvier 2015

OneToMany reference only load first record



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default OneToMany reference only load first record



    OneToMany reference only load first record





    This is related to thread - http://ift.tt/1Bz2Zlg

    But it seems the issue with one-to-many relation using reference is not addressed.

    I am trying to load a user with roles, but even when the user has multiple role only one gets loaded. Check the below fiddle -

    http://ift.tt/1tvtpEa

    I have two type of user in the system Admin user and End User. Both has the same JSON response. But different fields but both have same role structure. So I create two User model both with a "userRole" field associated with reference. But only one role is loaded.


    I am using Ext JS version 5.1.0.107 and I do have a foreign key relation in database















OneToMany reference only load first record

Override field Spinner doesn't work on production app

Hi, I'm working on







framework:Sencha Touch 2.4.x


I create a spinner override as described in this conversation.


In order to reproduce the problem, I created the Override I click on the component with the right button and the click on "Create override for this class"


The ovverride created a file /app/override/field/Spinner.js


The code was:



Code:



Ext.define('MyApp.override.field.Spinner', { override: 'Ext.field.Spinner',
applyValue : function(value) {
value = parseFloat(value);
if (isNaN(value) || value === null) {
value = this.getDefaultValue();
}
return this.callSuper([value]);
}
});

SA change app.json file adding

Code:



"js": [
...
{
"path": "app/override/field/Spinner.js",
"x-compile": true
},


...
],

nothing more.

When I launch the command "sencha app build production" there is an error in the app:



Code:



Error evaluating http://ift.tt/1BrG3Sr with message: TypeError: undefined is not a function

To fix the problem I had to remove the line from app.json file and add the required file in app.js file

Code:



Ext.application({
name: 'MyApp',


requires: [
'Ext.MessageBox',
'MyApp.override.field.Spinner'
],

//...
});

Do you thing it's a SA bug o I did something wrong when I added the Override?

Thanks for your support.

Regards






Override field Spinner doesn't work on production app

Variable Scope Issue in JSonStore Callback

I have a json store to return a json string into the call back function without any problem. However, I failed to pass the returned values into an array. Any guru could point me what I am doing wrong in the code below:

var studentArray = [];


store.load({

scope: this,

callback: function (records, options, success) {

if (success) {

for (var i=0; i < records.length; i++) {

studentArray.push(records[i].data.studentid);

}

}

alert("You have " + studentArray.length + " added"); // First alert

}

});


alert("You finally have: " + studentArray.length); // Second alert


In the Second alert, I always got "You finally have 0". Believe I have a variable scope problem. How could I get over this problem?


Thank you very much?






Variable Scope Issue in JSonStore Callback

Showing specific month in DatePicker when field is empty

Hi,

I'm currently working on a project in Ext 4.2 where I'm trying to make the datepicker from a datefield open up on a specific month even if the value of the field itself is not filled in yet.


For example, I have a sort of timesheet about a certain week and I would like the attached datefield to be blank but once you select the calendar button (and in this case open the Date Picker) it should open up the month that corresponds to the week shown in the timesheet. I already set all the other days as disabled but it would be nice if the datepicker opens up on a date I specified and not just the current week...


Would I have to override Datepicker for this or is there a more elegant way?


Thanks in advance,

J






Showing specific month in DatePicker when field is empty

How to export grid results to email?

Hello all,

Can anyone give me an idea on how we can export the grid results to an email?. I am able to do an export to excel sheet but not able to get an idea on how to do the export to an email. I have an right click option when a user clicks on the results grid and export to email is one of those options. I need to export the entire table to an email.


Thanks,






How to export grid results to email?

Sencha Architect 3.2 with Ext JS 5.1 Support

Dear Architect Users.

We're happy to announce the release of Architect 3.2. The latest release of Architect adds in Ext JS 5.1 support, the latest Sencha Cmd, project wide search and fixes a number of bugs.


Highlights of Architect 3.2 release:



  • Ext JS 5.1 support

  • Project wide search (located at the bottom middle, below the canvas)

  • 3D chart components from Ext JS 5.1

  • Support for latest Sencha Cmd




Try out the new version today. We welcome your comments and questions.

Thank you for your continued support and feedback.






Sencha Architect 3.2 with Ext JS 5.1 Support

sencha app watch raising exception

Hi, I've just created an app with SenchaCmd-5.1.1.39-linux-x64.run, following each step of the documentation. Nothing more.

When I try to launch watch (root user) I get this:


[ERR] /web/htdocs/olivier/wogwog/g/app/view/main/4913

at com.sencha.exceptions.BasicException.wrap(BasicException.java:54)

at com.sencha.exceptions.BasicException.stealthify(BasicException.java:43)

at com.sencha.exceptions.BasicException.raise(BasicException.java:35)

at com.sencha.tools.watchers.NotificationFileWatcherService.registerAndDescend(NotificationFileWatcherService.java:417)

at com.sencha.tools.watchers.NotificationFileWatcherService.processWatchKey(NotificationFileWatcherService.java:222)

at com.sencha.tools.watchers.NotificationFileWatcherService.run(NotificationFileWatcherService.java:166)

at com.sencha.tools.watchers.BaseFileWatcherService$1.run(BaseFileWatcherService.java:31)

at com.sencha.util.ThreadUtil$1.run(ThreadUtil.java:143)

at java.lang.Thread.run(Thread.java:745)

Caused by: /web/htdocs/olivier/wogwog/g/app/view/main/4913

at sun.nio.fs.UnixException.translateToIOException(UnixException.java:86)

at sun.nio.fs.UnixException.rethrowAsIOException(UnixException.java:102)

at sun.nio.fs.UnixException.rethrowAsIOException(UnixException.java:107)

at sun.nio.fs.UnixFileAttributeViews$Basic.readAttributes(UnixFileAttributeViews.java:55)

at sun.nio.fs.UnixFileSystemProvider.readAttributes(UnixFileSystemProvider.java:144)

at sun.nio.fs.LinuxFileSystemProvider.readAttributes(LinuxFileSystemProvider.java:97)

at java.nio.file.Files.readAttributes(Files.java:1686)

at java.nio.file.FileTreeWalker.walk(FileTreeWalker.java:105)

at java.nio.file.FileTreeWalker.walk(FileTreeWalker.java:69)

at java.nio.file.Files.walkFileTree(Files.java:2602)

at java.nio.file.Files.walkFileTree(Files.java:2635)

at com.sencha.tools.watchers.NotificationFileWatcherService.registerAndDescend(NotificationFileWatcherService.java:404)

at com.sencha.tools.watchers.NotificationFileWatcherService.processWatchKey(NotificationFileWatcherService.java:222)

at com.sencha.tools.watchers.NotificationFileWatcherService.run(NotificationFileWatcherService.java:166)

at com.sencha.tools.watchers.BaseFileWatcherService$1.run(BaseFileWatcherService.java:31)

at com.sencha.util.ThreadUtil$1.run(ThreadUtil.java:143)

at java.lang.Thread.run(Thread.java:745)






sencha app watch raising exception

Copying Ext.tree.plugin.TreeViewDragDrop settings for a Container

Hi guys,

Question:

Where are the drop event handlers that make Ext.tree.plugin.TreeViewDragDrop configured?


Details:

I love how beautifully Ext.tree.plugin.TreeViewDragDrop works on Ext.tree.Panel's. I don't have to configure anything after I "plug" it into my tree panels.


However, I have a situation where I'm using an Ext.container.Container to hold items instead of a tree! I would like to build a similar plugin to that of TreeViewDragDrop but for a container instead of a tree.


I would like to know where the drop event handlers are configured that make TreeViewDragDrop so awesomely smooth and wonderful to use. I'd like to copy those settings.






Copying Ext.tree.plugin.TreeViewDragDrop settings for a Container

Store, Model, ViewModel: what's the correct way?

HI!

I have some doubts with extjs 5.1.0


What is the correct way to use store, model and viewmodel


A) this one:


Model:



Code:



Ext.define('App.model.MyModel', {
extend: 'Ext.data.Model',


fields: ['id', 'name', 'email', 'address'],


proxy: {
type: 'ajax',
api: {
create : '/contacts/create',
read : '/contacts/read',
update : '/contacts/update',
destroy : '/contacts/destroy'
},
reader: {
type: 'json',
rootProperty: 'contacts',
totalProperty: 'total'
}
}
});

STORE:

ISSUE: we still need a store like this?



Code:



Ext.define('App.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',

config: {
model: 'App.model.MyModel'
}
});

VIEWMODEL:


Code:




Ext.define('App.view.model.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myviewmodel',

stores: {
contacts: {
type: 'mystore',


autoLoad: {
page: 1,
start: 0,
limit: 10
},
pageSize: 10
}
}
});

B ) or can do so only:


VIEWMODEL:



Code:



Ext.define('App.view.model.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myviewmodel',

stores: {
contacts: {
type: 'mystore',

fields: ['id', 'name', 'email', 'address'],

autoLoad: {
page: 1,
start: 0,
limit: 10
},
pageSize: 10,


proxy: {
type: 'ajax',
api: {
create : '/contacts/create',
read : '/contacts/read',
update : '/contacts/update',
destroy : '/contacts/destroy'
},
reader: {
type: 'json',
rootProperty: 'contacts',
totalProperty: 'total'
}
}
}
}
});



C) or is there a more correct way? Which One?

Thanks in advance.






Store, Model, ViewModel: what's the correct way?

AbstractContainer layout with no nested outer/innerCt?

Hello,

I've been looking for a decent way to make use of some sort of a custom component which I would next other Ext components in without getting extraneous div's inserted into my DOM.


Basic idea could be something like:



Code:



Ext.create('ul', {
/*
...other component stuff like listeners, etc.
*/
items: [
{
xtype: 'li',
items: [
{SOME EXT COMPONENT}
]
},
{
xtype: 'li',
items: [
{ANOTHER EXT COMPONENT}
]
}
]
});

Which would render:

Code:



<ul>
<li>{{SOME EXT COMPONENT}}</li>
<li>{{ANOTHER EXT COMPONENT}}</li>
</ul>

Any help, including telling me I'm barking up the wrong tree, would be greatly appreciated.

Thank you.






AbstractContainer layout with no nested outer/innerCt?

Why is the initial value of a ComboBox not selected in a special remote case?

Ext JS version: 5.1.0

Suppose we take the Kitchen Sink' remote-combo [exSrc] example



Code:



{
xtype: 'combobox',
reference: 'states',
publishes: 'value',
fieldLabel: 'Select State',
displayField: 'state',
anchor: '-15',
store: {
type: 'remote-states'
},
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 0,
queryParam: 'q',
queryMode: 'remote'
}

and now we expand the config of that combobox with


Code:



value: 'Alaska',
forceSelection: true,

Thus creating a combobox which accepts existing states only, displayField equals valueField and its intitial value should be set to 'Alaska'.

A peek into the implementation of doSetValue [impl] reveals that the combobox would not select that initial value.


1. value is 'Alaska' thus value != null

2. isLoaded = store.getCount() > 0 || store.isLoaded() is false because we have a store querying remote data on demand

3. displayIsValue = me.displayField === me.valueField is true

4. for that reason the code skips the store.load();

5. if (!record || !record.isModel) { will be entered but no record is found because the store is not loaded yet

7. if (!record) { is entered but

8. if (!forceSelection) { is not entered

9. thus matchedRecords.push(record); is not called for the current value

10. finally valueChanged is still undefined


Thus the initial value is (more or less) ignored and the box will not select it.


Is this the intended behavior or a bug?


[exSrc]: http://ift.tt/1wB2Hoq

[impl]: http://ift.tt/1wB2Fgz






Why is the initial value of a ComboBox not selected in a special remote case?

Scrollable Actionsheet -> terribly slow

[unable to retrieve full-text content]Hello, I wanted to create a filter in an action sheet. Unfortunately this is unusably slow. Even, if I remove *all* fields from the sheet,...



Scrollable Actionsheet -> terribly slow

TreePicker binding problem in 5.1



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default TreePicker binding problem in 5.1



    TreePicker binding problem in 5.1





    Treepicker has a problem : When you change its value, you cannot see the changes in somewhere else.

    explaining it or providing a sample is a little hard but I could find the source of problem.

    You overrided the setValue function but at last line you returned me. but in main setValue implementation you returned return me.mixins.field.setValue.call(me, value);


    I corrected the code and everything was ok after that. The override solution is :



    Code:



    Ext.define('Ext.ux.TreePicker-BUG', {
    requires: ['Ext.ux.TreePicker'],
    override: 'Ext.ux.TreePicker',
    setValue: function (value) {
    this.callParent([value]);
    return this.mixins.field.setValue.call(this, value);
    }
    });














TreePicker binding problem in 5.1

[5.1.0] Warning in console when close window with image component



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default [5.1.0] Warning in console when close window with image component



    [5.1.0] Warning in console when close window with image component





    Warning in console when close window with image component. See example. Open console and than close window. You can see warning: [WARN] Cannot destroy Element "image-1012". Already destroyed.

    http://ift.tt/18u6BLK















[5.1.0] Warning in console when close window with image component

[INFOREQ] chrome + logitech t620 generate error in boxReady function

Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.







Default chrome + logitech t620 generate error in boxReady function



chrome + logitech t620 generate error in boxReady function





After I installed Logitech T620 to my OS Windows 8.1 64 bit Ent, installer automatically installed drivers and some extensions. When I tried run any ExtJS app (and I mean any e.g. http://ift.tt/1JGjkbx generate error too) from Chrome 40.0.2214.93 m I get following error - undefined is not a function. I didnt dive too deep to source code but what I found is missing scroller.setInnerElement function. Following override temporarily fix this problem:

Code:



Ext.define('My.overrides.Component', {
override: 'Ext.Component',

onBoxReady: function(width, height) {
var me = this,
scroller = me.scrollable;

if (me.resizable) {
me.initResizable(me.resizable);
}

if (me.draggable) {
me.initDraggable();
}
if (scroller) {
if (me.touchScroll && scroller.setInnerElement) {
scroller.setInnerElement(me.getScrollerEl());
}
scroller.setElement(me.getOverflowEl());
}
if (me.hasListeners.boxready) {
me.fireEvent('boxready', me, width, height);
}
}
});

I tried uninstall Logitech Smooth Scrolling extension but it does not change anything. Firefox and IE works like a charm. It almost looks like Chrome detect this device as touch and ExtJS set touchScroll variable.















Default







We'll need some more information.

a) If you do a clean install of Chrome (no extensions) what happens?

b) What is scroller (what type)?

c) What is Ext.supports.touchScroll?


Even so, I don't really think this is an Ext bug. If Chrome detects your device as something that supports touch scroll, then there's not really much leverage to do anything.








Evan Trimboli

Sencha Developer

Twitter - @evantrimboli

Don't be afraid of the source code!















Default







Thats bad because with this device I get error in all ExtJS 5.1 apps. ExtJS 5.0 is without this error.

a) I get an error. So looks like problem isnt in extension but probably in drivers?

b) Ext.scroll.DomScroller

c) 1














[INFOREQ] chrome + logitech t620 generate error in boxReady function

Pressed CLS Button

Dear Sencha Team

I use the Version ExtJs 5.1.


Now to my Problem.


I want to Change like cls the Buttonpressed bu unfortunately I can't find cls for the.....

Have you removed this maybe?


If then it would have been a very bad decision by you.


It Looks but just plain crap, when I pressed-cls cannot Change this because it no longer exists.

It would be nice if you could tell me how I that pressed-cls can style.


Best Regards


Programmers






Pressed CLS Button

node.remove() cascades down which is odd and not useful



  1. Thank you for reporting this bug. We will make it our priority to review this report.







  2. Default node.remove() cascades down which is odd and not useful



    node.remove() cascades down which is odd and not useful





    Hi

    I have a treestore with 2 levels. There are no explicit associations (eg hasmany or reference)


    If node is a branch then


    node.remove()


    is first deleting node and then deleting node's children. At least based on the REST calls that take place in firebug


    This is odd because according to the documentation, only node should be deleted. (which of course is only logical if there are no children)


    It is also not useful because the DB barfs if the parent is deleted before its children. The other way would be better


    So is this a bug or is my code really screwed up somewhere















  3. Evan Trimboli

    Sencha Developer

    Twitter - @evantrimboli

    Don't be afraid of the source code!













node.remove() cascades down which is odd and not useful

File bootstrap.json giving full path

I've made an application with SenchaCmd-5.1.0.26-linux-x64

When I look to the Chrome Web client, I see bootstrap.json that contain all "full" path to application.




  • classpath: "/web/htdocs/mypath/myapp/app"


[snap...]

/web/htdocs/mypath/myapp/overrides

And so on.

Is that normal? I could give lot of examples why this might be a security flaw, and to the least: giving the less information to bad people reduces the chances for black-hackers.

What is the way to give no information about the full path?






File bootstrap.json giving full path
[unable to retrieve full-text content]


Why is Ext.picker.Month private?

mardi 27 janvier 2015

Grid with BufferedRenderer and persistent check-box selection

[unable to retrieve full-text content]*Hi,* I would like to use a grid with BufferedRenderer and persistent check-box selection. The main problem is that when scrolling, the selected...



Grid with BufferedRenderer and persistent check-box selection

Need scrolling for some layout driven UI

Hi,

I have a requirement for which I need to put tree tree panels in east part of a border layout. But I am facing issue in providing scrolling for that.


Check this: http://ift.tt/1CfJ5hZ


I need some guidance for using layouts at its best for my requirement.


~Kanny






Need scrolling for some layout driven UI

Cannot build using Sencha Architect

I just downloaded Sencha Architect from the web site. Ensured Ant, Ruby and Java were all installed properly.

Then installed Sencha Architect. It looks like Sencha Architect has installed Cmd 5.0.2.270 as well as other ExtJs and Touch frameworks. Please note I am running a trial version before we can purchase the license.


About: Sencha Architect


Created a new project in Architect and tried to save, I see the following message:

Architect build tools is missing dependencies to function. Please see preferences>dependencies.


Also, the "Build Web App" button is disabled. I tried to manually enable build tools from project settings>framework and still cannot make it work.


Am I missing something here?






Cannot build using Sencha Architect

setting proxy.reader.root for tree JSON with children

hello all,

my tree json format is similar to below json:



Code:



{
"text": ".",
"children": [
{
"task": "Project: Shopping",
"duration": 13.25,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"expanded": true,
"children": [
{
"task": "Housewares",
"duration": 1.25,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [
{
"task": "Kitchen supplies",
"duration": 0.25,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Groceries",
"duration": .4,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Cleaning supplies",
"duration": .4,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Office supplies",
"duration": .2,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}
]
}, {
"task": "Remodeling",
"duration": 12,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"expanded": true,
"children": [
{
"task": "Retile kitchen",
"duration": 6.5,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Paint bedroom",
"duration": 2.75,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [
{
"task": "Ceiling",
"duration": 1.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Walls",
"duration": 1.5,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Decorate living room",
"duration": 2.75,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Fix lights",
"duration": .75,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Reattach screen door",
"duration": 2,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}
]
}
]
}, {
"task": "Project: Testing",
"duration": 2,
"user": "Core Team",
"iconCls": "task-folder",
"children": [
{
"task": "Mac OSX",
"duration": 0.75,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [
{
"task": "FireFox",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Safari",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Windows",
"duration": 3.75,
"user": "Darrell Meyer",
"iconCls": "task-folder",
"children": [
{
"task": "FireFox",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Safari",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Internet Explorer",
"duration": 3,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Linux",
"duration": 0.5,
"user": "Aaron Conran",
"iconCls": "task-folder",
"children": [
{
"task": "FireFox",
"duration": 0.25,
"user": "Aaron Conran",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Aaron Conran",
"iconCls": "task",
"leaf": true
}
]
}
]
}
]
}

what im trying to do is add a root at the top of the JSON. Again, im not talking about root node, but the treestore readers root. I guess the reader looks for "children" array.

Code:



{"mytreeroot":[
{
"text": ".",
"children": [
{
"task": "Project: Shopping",
"duration": 13.25,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"expanded": true,
"children": [
{
"task": "Housewares",
"duration": 1.25,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [
{
"task": "Kitchen supplies",
"duration": 0.25,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Groceries",
"duration": .4,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Cleaning supplies",
"duration": .4,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Office supplies",
"duration": .2,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}
]
}, {
"task": "Remodeling",
"duration": 12,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"expanded": true,
"children": [
{
"task": "Retile kitchen",
"duration": 6.5,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}, {
"task": "Paint bedroom",
"duration": 2.75,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [
{
"task": "Ceiling",
"duration": 1.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Walls",
"duration": 1.5,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Decorate living room",
"duration": 2.75,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Fix lights",
"duration": .75,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task",
"done": true
}, {
"task": "Reattach screen door",
"duration": 2,
"user": "Tommy Maintz",
"leaf": true,
"iconCls": "task"
}
]
}
]
}, {
"task": "Project: Testing",
"duration": 2,
"user": "Core Team",
"iconCls": "task-folder",
"children": [
{
"task": "Mac OSX",
"duration": 0.75,
"user": "Tommy Maintz",
"iconCls": "task-folder",
"children": [
{
"task": "FireFox",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Safari",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Tommy Maintz",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Windows",
"duration": 3.75,
"user": "Darrell Meyer",
"iconCls": "task-folder",
"children": [
{
"task": "FireFox",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Safari",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}, {
"task": "Internet Explorer",
"duration": 3,
"user": "Darrell Meyer",
"iconCls": "task",
"leaf": true
}
]
}, {
"task": "Linux",
"duration": 0.5,
"user": "Aaron Conran",
"iconCls": "task-folder",
"children": [
{
"task": "FireFox",
"duration": 0.25,
"user": "Aaron Conran",
"iconCls": "task",
"leaf": true
}, {
"task": "Chrome",
"duration": 0.25,
"user": "Aaron Conran",
"iconCls": "task",
"leaf": true
}
]
}
]
}
]
}

the highlighted part above is what i need, especially because one response can contain data for numerous trees, thus i need to differentiate them with ROOTs. Also, if this can be formatted to remove the first object above

{"text":"", "children":[{}]}


without affecting the appearance of the tree, that will be great


Also, ive already defined tree root node in my treestore and set rootVisible:false


//store

.........

root:{

id:"0",

text:"",

expanded:false

}






setting proxy.reader.root for tree JSON with children