Page 1 of 6 123 ... LastLast
Results 1 to 10 of 51

Thread: Various data store and form extensions.

  1. #1

    Default Various data store and form extensions.

    I have been building a big project and have build numerous Ext 2.0 extensions for data stores, some new form fields, and some components that make it really easy to work with Rails models via REST controllers. I just pulled this out of my project and haven't had time to spruce it up so please let me know if I can make it more useful or more generic. My full explanation is on my blog right now, "ExtJS customizations", and the code is at:

    I'll add more information about the individual items and some examples as I have time.
    Last edited by curzonj; 3 Dec 2007 at 12:27 PM. Reason: Addition

  2. #2
    Ext User
    Join Date
    Apr 2007


    can you post some example about your treecombox,I want to use it,but I don't know which params I have to post to it,and I have found some bug.
    like :
    tree_combo.js line 36
    and the plugin:line 38
            plugins: new Ext.ux.tree.DataStoreBacking(this.nodes),
    I console.dir(config);I haven't got anything...,
    and the store....

  3. #3
    Sencha User
    Join Date
    Mar 2007


    Can you post any examples about all?

  4. #4

    Default TreeCombo example

    galdaka: Sorry for the lack of examples, I just wanted to get this stuff out there. I will post exmples for everything, obviously getting to the those items that people are interested in first. Is there something specific you are interested in?

    apaa: In my project everything is based around and Store. DataStoreBacking is something of a loader that builds a TreePanel and keeps the node tree up-to-date with the data store. It isn't implemented as a TreeLoader because it doesn't really fit that pattern.

    TreeComboBox currently depends on DataStoreBacking in multiple ways and requires a data store. I could fix that you need me too. A piece of my working code is:
      items: [
              new TreeComboBox({
                  fieldLabel: 'Location',
                  hiddenName: 'portion[location_id]',
                  dataIndex: 'location_id',
                  store: locations_ds,
                  nodes: { textField: 'title' },
                  displayField: 'full_title',
                  valueField: 'id',
                  allowBlank: false,
                  width: 280,
                  resizable: true,
    Here the code is assuming that your records have fields "id" and "parent_id". You can changes that by setting idField and parentIdField on the nodes attribute passed it. (nodes is a config object passed to DataStoreBacking) DataStoreBacking doesn't depend on any of my other code, but because it is based on a data store, you can use the plugins to keep the tree up to date.

    All the parameters except nodes, store, and allowBlank function exactly like the regular ComboBox. Nodes is a config object passed in to DataStore backing. Store gets set on DataStoreBacking. I just changed it so you can pass it in either as a member of the nodes hash or the rest of the config options. AllowBlank shows the root node and tries it's best to be "blank" when you select the root node. That part may not function as expected, let me know and I'll fix it.

    DataStoreBacking can take several parameters, only textField is required. textField is the field on the records to put as the text attribute on the tree nodes. Optional parameters are: idField and parentIdField are attributes on the records used to build the parent child relations of the tree nodes. qtipField sets the qtip on the nodes to the appropriate value from the record. baseAttrs are applied to each node just like the TreeLoader.

    This is my first time really working with people outside my own shop, so please let me know if I need to do something better. Let me know if you need any changes, more examples.

  5. #5

    Default CRUDGridPanel example

    A quick example of CRUDGridPanel is below. CRUDGridPanel is meant to have basic CRUD features with the following config, but also to be overrided in numerous ways. The "editor" parameter creates an instance of CrudEditor which has a huge set of dependecies on the response that comes back. The editor posts the form just as any form would be posted, but it expects a json object back of roughly the following format:

      "success": (boolean, whether the record saved on the server side.
      "hidden": (boolean, should the object be removed from the data store),
      "objectid": (id of the record new or old),
      "data": (new value of the data property on the record that was update/created),
      "errors":an errors hash for BasicForm to display errors on the form
    For deletes the CrudEditor currently uses the restfull semantics "DELETE /outside_process/3". By default it bases this off the url of the data store, but you change change that by setting deleteUrl. This part of the is pretty tightly tied to a restful setup on rails. If people will explain how they'd like it to work I can make it more flexible. Here is my most basic usage of CRUDGridPanel and CrudEditor:

    new CRUDGridPanel({
        title: 'Outside Processes',
        store: outside_processes_ds,
        autoSizeColumns: true,
        cm: new Ext.grid.ColumnModel([
          {header: 'Number', dataIndex: 'process_number', width:70, sortable:true},
          {header: 'Name', dataIndex: 'name', width:70, sortable:true}
        btnConfigs: [{
          text: 'Delete',
          handler: CRUDGridPanel.prototype.onClickDeleteBtn
        editor: {
          height: 480,
          formPanel: new Ext.form.FormPanel({
            labelAlign: 'right',
            buttonAlign: 'center',
            height: 100,
            items: [
              new Ext.form.TextField({
                fieldLabel: 'Name',
                name: 'outside_process[name]',
                dataIndex: 'name',
                allowBlank: false,
              new Ext.form.NumberField({
                fieldLabel: 'Number',
                name: 'outside_process[process_number]',
                dataIndex: 'process_number',
                allowDecimals: false,
                allowNegative: false,
                allowBlank: false,
              new Ext.form.TextArea({
                height: 130,
                width: 300,
                fieldLabel: 'Description',
                name: 'outside_process[description]',
                dataIndex: 'description',  
    Sorry for the terse explanation, but this is a large code base that I have never had to explain to anyone before.

  6. #6
    Ext User
    Join Date
    Apr 2007


    can you give me a demo? because I use it as your follow,but it didn't show anything,and there are some syntax error in ie,.......
    thank you for your hard work!!!

  7. #7
    Ext User
    Join Date
    Apr 2007


        bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
    	var store = new{
    		url : '',
    		reader : new{
    			root : 'rows',
    			id : 'id'
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [new TreeComboBox({
                  fieldLabel: 'Location',
                  hiddenName: 'text',
                  dataIndex: 'text',
                  store: store,
                  nodes: { textField: 'text' },
                  displayField: 'text',
                  valueField: 'id',
                  allowBlank: false,
                  width: 280,
                  resizable: true
                    fieldLabel: 'First Name',
                    name: 'first',
                    fieldLabel: 'Last Name',
                    name: 'last'
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
            buttons: [{
                text: 'Save'
                text: 'Cancel'
    the response data:
    {"rows":[{"id":"4737ef6b-6c84-4088-abb3-6e39c0a80005","leaf":false,"text":"haha123"},{"id":"4737f6c3-83dc-40a7-a87f-7268c0a80005","leaf":false,"text":"\u4f60\u597d\u5446674566"},{"id":"4738405b-4b64-4056-ae35-7bfbc0a80005","leaf":false,"text":"edit ok123454"},{"id":"47381a7d-0c2c-4aac-aeaf-7473c0a80005","leaf":false,"text":"kk"},{"id":"474f8ed2-38e4-4296-8c87-1e04c0a80005","leaf":false,"text":"5566"},{"id":"4757a13d-2f04-406b-996b-19fcc0a80005","leaf":true,"text":"123453"}]}
    what's wrong with it ?
    anybody give me some advise?

  8. #8

    Default Works for me

    apaa, I put your code together in an html page and put the data in a file and everything works fine for me. I put my test (html and data) in the attached zip file. Let me know if it gives you problems.

    I just realized that if the code you posted is the actual code you used, it won't work. The parameters to your store don't look correct. It looks like you wanted to use a JsonStore and got confused. Here is the store that I used in the zip file:

    var store = new{
          url: "data.json",
          id: 'id',
          root: 'rows',
          fields: [ 'id', 'text' ]
    Attached Files Attached Files

  9. #9

    Default Tree functionality

    If you want the tree to behave like a tree (with child nodes). Use the add "parent_id" to your fields on your data store as below. You can change the record field that links to the parent with the parentIdField configuration parameter. The field to use as the id to match parent to child can be changed with the idField config parameter (both to be set on the TreeComboBox.

    var store = new{
      url: "data.json",
      id: 'id',
      root: 'rows',
      fields: [ 'id', 'text', 'parent_id' ]
    And change your data so each row has a parent_id for the node which it is a child of:

    {"id":"4737ef6b-6c84-4088-abb3-6e39c0a80005","leaf":false,"text":"haha123", "parent_id":null},
    {"id":"4737f6c3-83dc-40a7-a87f-7268c0a80005","leaf":false,"text":"d5446674566", "parent_id":null},
    {"id":"4738405b-4b64-4056-ae35-7bfbc0a80005","leaf":false,"text":"edit ok123454", "parent_id":null},
    {"id":"47381a7d-0c2c-4aac-aeaf-7473c0a80005","leaf":false,"text":"kk", "parent_id":"4737f6c3-83dc-40a7-a87f-7268c0a80005"},
    {"id":"474f8ed2-38e4-4296-8c87-1e04c0a80005","leaf":false,"text":"5566", "parent_id":"4737f6c3-83dc-40a7-a87f-7268c0a80005"},
    {"id":"4757a13d-2f04-406b-996b-19fcc0a80005","leaf":true,"text":"123453", "parent_id":"4737ef6b-6c84-4088-abb3-6e39c0a80005"}
    As a side note, because the data store is building your parent child relationships for you, you don't need (nor does it do anything) to have the leaf attribute on your records.

  10. #10

    Default Children Nodes of TreeComboBox


    Does the TreeComboBox handle multiple children nodes? As in more than 2 levels.

    E.G 3 Levels
    Parent Node 1
    |-Child Node A of Parent 1
    | |- Child Node 1 of Child Node A
    | |- Child Node 2 of Child Node A
    |-Child Node B of Parent 1
    | |- Child Node 1 of Child Node B
    | |- Child Node 2 of Child Node B
    Parent Node 2
    |-Child Node C of Parent 2
    | |- Child Node 1 of Child Node C
    | |- Child Node 2 of Child Node C

    Or even more levels?

    I seem to get an error if I add third level nodes


Page 1 of 6 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts