I have a "select" type:
Blah
I have it's values initialized in javascript:
$('a[name="my_name"]').editable({
url: 'blah.php',
name: 'my_name',
source: [
{value: 'Foo', text: 'Foo'},
{value: 'Bar', text: 'Bar'}
]
});
I disable the field on page load with this code: (I have a button that turns on the field whence clicked)
$(document).ready(){
$('a[name="my_name"]').editable('disable');
});
The problem is the "source" values DO NOT get read in when 'enabling' the link.
If I comment out the disable code on page load, the editable field works fine. Only when I first disable, and then enable does this happen. Any clues why?
Related
I'm using Sanity.io, GatsbyJS 3.x
Watch mode works great when you update content in the CMS, except for when the content you edit is part of a referenced schema of type 'document'.
Put another way, changes made to a document referenced by another document will not re-render the page despite having watch mode on and configured properly.
For example, here is a snippet from my Page schema.
...
{
name: "content",
type: "array",
title: "Page Sections",
description: "Add, edit, and reorder sections",
of: [
{
type: 'reference',
to: [
{ type: 'nav' },
{ type: 'section' },
{ type: 'footer' }
]
}
],
},
...
The above schema references a
nav schema
section schema
footer schema
Each of these are type 'document'.
See the example below.
export default {
type: 'document',
name: 'section',
title: 'Page Sections',
fields: [
{
name: 'meta',
title: 'Section Meta Data',
type: 'meta'
},
...
I want to reference a document, rather than an object, because I need to use the content created based on these schemas to be re-used in throughout the application.
Finally, I've configured the source plugin correctly for watch mode.
Gatsby Config is set properly
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `asdfasdf`,
dataset: `template`,
watchMode: true,
overlayDrafts: true,
token: process.env.MY_SANITY_TOKEN,
},
},
In the CMS / Studio, when you edit one of the fields, you can see Gatsby re-compile in dev mode from the terminal. However, the page does not auto reload and display the changes made to the referenced document.
I've tried reloading the page with the reload button and via hard refresh, the changes do not render.
The only way to render the changes is to go back to the CMS and edit a field on the main “Page” document. Then it refreshes immediately.
Am I doing something wrong? Is this expected behavior? Is there a way to get this to work?
For those that run across this issue, I was able to answer my own question. I hope this saves you the day's it took me to find a solution.
Solution TLDR
You need to explicitly query the referenced document in order for watch mode to work properly.
Details with Examples
Summary
The gatsby-source-sanity plugin provides convenience queries that start with _raw for array types. When you use the _raw query in your GraphQL query, it will not trigger watch mode to reload the data. You need to explicitly query the referenced document in order for watch mode to work properly. This may have to do with how the plugin sets up listeners and I don't know if this is a bug or a feature.
Example
My Page Document has the following schema
{
name: "content",
type: "array",
title: "Page Sections",
description: "Add, edit, and reorder sections",
of: [
{
type: "reference",
to: [
{ type: "nav" },
{ type: 'section' },
],
},
],
},
The section is a reference to a section document.
{ type: 'section' }
The reason I'm not using an object is because I want the page sections to be re-usable on multiple pages.
Assuming you have watch mode enabled properly in your gatsby-config.js file, watch mode, like so...
// gatsby-config.js
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `asdf123sg`,
dataset: `datasetname`,
watchMode: true,
overlayDrafts: true,
token: process.env.SANITY_TOKEN,
},
},
Then you should see the following behavior:
listen for document/content updates
re-run queries, update the data, hot-reload the page
You'll see the following scroll in your terminal window.
success Re-building development bundle - 1.371s
success building schema - 0.420s
success createPages - 0.020s
info Total nodes: 64, SitePage nodes: 9 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.081s
success onPreExtractQueries - 0.006s
success extract queries from components - 0.223s
success write out requires - 0.002s
success run page queries - 0.010s - 1/1 99.82/s
This works great if you are querying the main document or any referenced objects. However, if you are querying any references to another document then there is one gotcha you need to be aware of.
The Gotcha
When you use the _raw query in your GraphQL query, it will not trigger watch mode to reload the data. You need to explicitly query the referenced document in order for watch mode to work properly.
Example: This Query will NOT work
export const PageQuery = graphql`
fragment PageInfo on SanityPage {
_id
_key
_updatedAt
_rawContent(resolveReferences: {maxDepth: 10})
}
`
Example: This query WILL Work
export const PageQuery = graphql`
fragment PageInfo on SanityPage {
_id
_key
_updatedAt
_rawContent(resolveReferences: {maxDepth: 10})
content {
... on SanitySection {
id
}
}
}
`
This additional query is the key
Here is where I am explicitly querying the document that is being referenced in the 'content' array.
content {
... on SanitySection {
id
}
}
You don't actually need to use the data that results from that query, you simply need to include this in your query.
My guess is that this informs the gatsby-source-sanity plugin to set up a listener, whereas the _rawContent fragment does not.
Not sure if this is a feature, bug, or just expected behavior. At the time of writing the versions were as follows.
"gatsby": "3.5.1",
"gatsby-source-sanity": "^7.0.0",
How do you get the project name in Rally?
I'm working with a grid app and all I'm trying to do is include a 'Project' field for the grid view. However, because 'Project' is actually an object, the resulting field is '[object Object]'. So, how is it possible to get the name in string type?
Here's the code from my columnCfgs that deals with making the field.
{
text: 'Project',
dataIndex: this.getContext().getProject().get
},
Try this.getContext().getProject()._refObjectName or this.getContext().getProject().Name
In some cases it is useful to print and explore the object in the console, because it may be that you need to traverse project.data._refObjectName as in this gist, or in your case:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0 Docs'},
launch: function() {
var currentProject = this.getContext().getProject();
console.log(currentProject);
this.add({
xtype:'container',
html: currentProject.Name
});
}
});
I have to make a live search , and after hours spent on google I decided to ask here if anyone have an ideea how can I make an live search( using or not combobox) in Ext JS but (the triky part). I have 2 data sets . One data set from one URL and and second from another URL.
I dont know how to start or how can I make the request when I type something in my search box to return small data set first and when is completly loaded second data set ( is much bigger).
Something like when I type "computer" in search field in first block to show me some things related to computers (first request that have few data) after that in second block to show me more thing related to computer when request is over( second request lot of data).
I need this thing because in one of my request i have over 10 k product and i dont want to let user w8 until the request is done, and to show the other request that have fewer data. until the first is done.
I forgot to mention that i want to make both request in the same time and asynchronous.
My solution for exactly this kind of problem was:
Creating a store dedicated only for the combobox content.
When one of the two "source" stores loads data, they push the records into the combo-store.
You also have the reference between the records automatically, so if a record in source-store 1 or 2 is removed, it also disappears in your combostore- and so in your combobox, like magic! Here is the key, for pushing data on load in another store:
http://serversideguy.com/2012/01/31/ext-js-4-merging-store-data/
best regards, hope that helps, write if you need further sugggestion / info on this solution.
If the data is really vital, you can try loading up on memory when the application starts.
Create the stores you need on launch() of the app, load the data and the use it everywhere you want. You can do this on your controller launch() too, to your controller references and granulate this as you wish.
Ext.application({
name: 'Blog',
models: ['Post', 'Comment'],
controllers: ['Posts', 'Comments'],
launch: function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'userStore',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
}); }
});
I am trying to create a hidden form with some data, which needs to be submitted to a jsp page (which gets open in a new window), but all this would happen programatically, without user pressing submit button.
My Sample code
var fsquery = "abcd";
var emailId = "as#gmail.com";
var portalPsswd = "password";
var projectId = "123";
var kbUrl = "some url which will consume form post parameters";
var pv="1.2",pn="ADA";
this.kbform=isc.DynamicForm.create({
width: 300,
fields: [
{type: "hiddenitem", name: "EMAIL_ID", defaultValue:emailId },
{type: "hiddenitem", name: "PORTAL_PASSWORD", defaultValue:portalPsswd},
{type: "hiddenitem", name: "PROJECT_ID", defaultValue:projectId},
{type: "hiddenitem", name: "FSQUERY", defaultValue:fsquery},
{type: "hiddenitem", name: "PRODUCT_VERSION", defaultValue:pv},
{type: "hiddenitem", name: "PRODUCT_NAME", defaultValue:pn},
{type: "hiddenitem", name: "ORIGIN", defaultValue:"Administrator"},
{type: "submit", name: "submit", defaultValue: "submit"}
],
action: kbUrl,
target: "_blank",
method: "POST",
canSubmit: true
});
this.kbform.submit();
the last statement does not submit the form automatically, but if I click the submit button provided, it works perfectly as needed.
Please provide me a solution which will help me simulate "submit" type button functionality to submit the form.
You can try this sample code here under "text.js" tab
I'm not sure about this, but have you tried triggering the submit on a window.onload event? I don't think the form is available until the document is fully loaded. I'm sorry I don't have any examples.
i try to add a button in a navigationBar of a navigationView with possibility to push a new view when i tap the button. I need help because i don't understand how i can do that. My button is ok and i can log tap action in my console but i can't push a new view. I need to have a view which is docked to my tabbar...
What i want in fact is proposing to user the possibility to change the view : with the button he could switch views : navigation / list to carousel (with same datas from a store). All is ok with navigationview and my list of results but i can't add the carousel view possibility by tapping the button...
My first question would be, is it possible ? If yes then how can i do that ?
My code :
Ext.define("MyApp.view.Annuaire", {
extend: 'Ext.navigation.View',
xtype: 'annuairepanel',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
/*IMPORTANT : évite une erreur de clsReplace...*/
autoDestroy: false,
title: 'Annuaire',
iconCls: 'address_book',
defaultBackButtonText: 'Retour',
navigationBar: {
items: [
{
xtype: 'button',
id: 'carousel-annuaire',
iconCls: 'more',
iconMask: true,
align: 'right',
listeners: {
'tap': function() {
console.log('tap !');
}
}
}
]
},
items: [
{
xtype: 'list',
id: 'liste-annuaire',
cls: 'x-liste-annuaire',
itemTpl: [
'<div class="vignette-liste" style="background-image:url({_ann_www_pub});"></div>',
'<div class="titre-liste">{post_title}</div>',
'<div class="categories-liste">{categories}</div>'
].join(''),
title: 'Annuaire',
grouped:true,
indexBar:true,
store: 'Annuaires',
}
]
}});
Thanks for your help
Ben
Do you not confusing why NavigationView is used for? The use case for it is create a stacked pool of Panels (Ext.Panel and/or Ext.form.Panel) and do navi.push(view)/navi.pop() to easy navigating in eg. Master-Detail relation.
First it is not intended to add a List as a direct child of the Navi View.
Also the good practice is using of the Sencha MVC Controllers. I'm advising you to start with reading basic concepts in Sencha doc page:
http://docs.sencha.com/touch/2-0/#!/guide/controllers , http://docs.sencha.com/touch/2-0/#!/guide/views and other guides.
I do not say there are perfect Getting Start sources but there is something.
If you want to get more close look at Sencha buy a commercial book.
Tip, never buy Jesus Garcia's books
I'd prefer issues from Packt Publishers.
Cheers, Oleg